umb table cant make any events fire

Rasmus Fjord 659 posts 1546 karma points c-trib

Aug 07, 2019 @ 12:07

Umb-table can't make any events fire

Hey there :)

Im doing a custom section where I have an umb-table with some custom data. It gets rendered just fine, but in no way can I get any events to work.

Latest umbraco 8.1.1 and my controller and view looks like this: View:

<div ng-controller="Dummy.RentalBackoffice.OverviewController as vm">
<h1>test</h1>
<umb-table
    ng-if="vm.items"
    items="vm.items"
    item-properties="vm.options.includeProperties"
    allow-select-all="vm.allowSelectAll"
    on-select="vm.selectItem"
    on-click="vm.clickItem"
    on-select-all="vm.selectAll"
    on-selected-all="vm.isSelectedAll"
    on-sorting-direction="vm.isSortDirection"
    on-sort="vm.sort"
>
</umb-table>

Controller:

(function () {
"use strict";

function Controller($scope, umbRequestHelper, $http) {

    var vm = this;

    vm.items = [];

    vm.options = {
        includeProperties: [
        { alias: 'contactName', header: 'Contact' },
    { alias: 'phone', header: 'Phone' }
        ]
    };

    vm.selectItem = selectItem;
    vm.clickItem = clickItem;
    vm.selectAll = selectAll;
    vm.isSelectedAll = isSelectedAll;
    vm.isSortDirection = isSortDirection;
    vm.sort = sort;
    initialGetList();
    function selectAll($event) {
        alert("select all");
    }

    function isSelectedAll() {

    }

    function clickItem(item) {
        alert("click node");
    }

    function selectItem(selectedItem, $index, $event) {
        alert("select node");
    }

    function isSortDirection(col, direction) {

    }

    function sort(field, allow, isSystem) {

    }

    function initialGetList() {
        $http({
            method: 'GET',
            url: '/umbraco/BackOffice/Api/SomeService/Getdata' /*You URL to post*/,
        }).then(
            function successCallback(response) {
                vm.items = response.data;
                },
            function errorCallback(response) {
        //   notificationsService.error(res.meta.error)
            }
        )
    }
}

angular.module("umbraco").controller("Dummy.RentalBackoffice.OverviewController", Controller);

})();

No issues in the console or nothing, and the custom data gets populated.

enter image description here

Copy Link

Dave Woestenborghs 3325 posts 11170 karma points MVP 5x admin c-trib

Aug 07, 2019 @ 12:21

Hi Rasmus.

All seems find to me. Maybe this could be the issue, but I doubt it.

 allow-select-all="vm.allowSelectAll"

You have not defined allSelectAll in your controller.

And maybe remove the ng-if. I seen this having some side effects.

Dave

Copy Link

Rasmus Fjord 659 posts 1546 karma points c-trib

Aug 07, 2019 @ 12:44

Ive tried removing the ng-if aswell, nothing.

I know its not set in the controller, ive just been leaning against this documentation for the umb-table:

https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.directives.directive:umbTable

Where its not set aswell.

Copy Link

Rasmus Fjord 659 posts 1546 karma points c-trib

Aug 07, 2019 @ 17:59

I figured it out, apperantly it has changed to V8 or somewhere in between. Took notice of this use here:

https://github.com/umbraco/Umbraco-CMS/blob/e180bb672212332556ac8ac17573a42c6311ba27/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js

and here

https://github.com/umbraco/Umbraco-CMS/blob/853087a75044b814df458457dc9a1f778cc89749/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html

So put this together as functions:

  function selectAll() {
        listViewHelper.selectAllItemsToggle(vm.items, $scope.selection);

    }

    function isSelectedAll() {
    //    return listViewHelper.isSelectedAll($scope.items, $scope.selection);
    }

    function clickItem(item) {
        listViewHelper.editItem(item);
    }

    function selectItem(item, $index, $event) {
        listViewHelper.selectHandler(item, $index, vm.items, $scope.selection, $event);


    }

    function isSortDirection(col, direction) {
        return listViewHelper.setSortingDirection(col, direction, $scope.options);
    }
       function sort(field, allow, isSystem) {
        if (allow) {
            $scope.options.orderBySystemField = isSystem;
            listViewHelper.setSorting(field, allow, $scope.options);
          //  $scope.getContent($scope.contentId);
        }
    }

And this as view

 <umb-table
    items="vm.items"
    item-properties="vm.options.includeProperties"
    allow-select-all="vm.allowSelectAll"
    on-select="vm.selectItem(item, $index, $event)"
    on-click="vm.clickItem(item)"
    on-select-all="vm.selectAll($event)"
    on-selected-all="vm.isSelectedAll()"
    on-sorting-direction="vm.isSortDirection(col, direction)"
    on-sort="vm.sort(field, allow, isSystem)"
  >
  </umb-table>

works now :)

Copy Link

Rihab 104 posts 387 karma points

Aug 18, 2019 @ 11:38

Hi Rasmus,

What is your umbraco version?

For Me, it's not working on Umbraco 8.1.1 ... It is showing this error :

TypeError: Cannot read property 'orderBy' of undefined

Can you help me or post your full code?

Copy Link

Rasmus Fjord 659 posts 1546 karma points c-trib

Aug 19, 2019 @ 05:58

my answer is here: https://our.umbraco.com/forum/umbraco-8/98497-umb-table-cant-make-any-events-fire#310808

Copy Link

Michel Collard 38 posts 248 karma points

Jun 02, 2020 @ 13:25

Hi, little late but I had this problem myself.

Check out this controller: It contains options and other properties/functions that you can use.

https://github.com/umbraco/Umbraco-CMS/blob/853087a75044b814df458457dc9a1f778cc89749/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js

This is my example code:

// Table
    vm.options = {
        filter: '',
        orderBy: "username",
        orderDirection: "asc",
        includeProperties: [
            { alias: "username", header: "E-mail" }
        ],
        bulkActionsAllowed: true
    };


    vm.selection = [];

    vm.selectItem = selectItem;
    vm.clickItem = clickItem;
    vm.selectAll = selectAll;
    vm.isSelectedAll = isSelectedAll;
    vm.isSortDirection = isSortDirection;
    vm.sort = sort;

    function selectAll() {
        listViewHelper.selectAllItemsToggle(vm.items, vm.selection);
    }

    function isSelectedAll() {
        return listViewHelper.isSelectedAll(vm.items, vm.selection);
    }

    function clickItem(item) {
        //listViewHelper.editItem(item);
    }

    function selectItem(item, $index, $event) {
        listViewHelper.selectHandler(item, $index, vm.items, vm.selection, $event);
    }

    function isSortDirection(col, direction) {
        return listViewHelper.setSortingDirection(col, direction, vm.options);
    }

    function sort(field, allow) {
        if (allow) {
            listViewHelper.setSorting(field, allow, vm.options);
            //  $scope.getContent($scope.contentId);
        }
    }

Copy Link

Bo Jacobsen 438 posts 1818 karma points

Jan 07, 2021 @ 23:13

Hi Rasmus, thanks to you i almost got it working now.

But i am using it in a custom section dashboard view and i am wondering what $scope.selection and $scope.options is containing. Do you know?

Because both are undefined as i do not have a listView as parent.

The documentation could use an update https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.directives.directive:umbTable ;)

Copy Link

Bo Jacobsen 438 posts 1818 karma points

Jan 07, 2021 @ 23:37

Stupid me, i could just read the post above. lol.

 $scope.options = {
        filter: '',
        orderBy: "Name",
        orderDirection: "asc",
        bulkActionsAllowed: true
    };

Now i just need to actuelly figure out how to make the sorting happening.

Copy Link

Rasmus Fjord 659 posts 1546 karma points c-trib

Jan 08, 2021 @ 08:37

Good to know :)

Copy Link

Rasmus Fjord 659 posts 1546 karma points c-trib

Aug 19, 2019 @ 05:58

Hey :)

Actually my post just upabove works.

https://our.umbraco.com/forum/umbraco-8/98497-umb-table-cant-make-any-events-fire#comment-310404

That worked for me, my issue was all the examples I found wasnt either updated or finished, and specifically there wasnt any properties being passed down to the real function, and the declarition of the real function wasnt setup to recieve any properties. So i looked to the source code and found a working example.

Orderby though i havnt found the correct declaration for, if you find a place its used in the backoffice its quite easy to find the implementation and take it from there.

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Umb-table can't make any events fire