Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Rasmus Fjord 675 posts 1566 karma points c-trib
    Aug 07, 2019 @ 12:07
    Rasmus Fjord
    0

    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

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Aug 07, 2019 @ 12:21
    Dave Woestenborghs
    0

    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

  • Rasmus Fjord 675 posts 1566 karma points c-trib
    Aug 07, 2019 @ 12:44
    Rasmus Fjord
    0

    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.

  • Rasmus Fjord 675 posts 1566 karma points c-trib
    Aug 07, 2019 @ 17:59
    Rasmus Fjord
    2

    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 :)

  • Rihab 104 posts 388 karma points
    Aug 18, 2019 @ 11:38
    Rihab
    1

    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?

  • Rasmus Fjord 675 posts 1566 karma points c-trib
    Aug 19, 2019 @ 05:58
  • Michel Collard 44 posts 264 karma points c-trib
    Jun 02, 2020 @ 13:25
    Michel Collard
    0

    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);
            }
        }
    
  • Bo Jacobsen 593 posts 2389 karma points
    Jan 07, 2021 @ 23:13
    Bo Jacobsen
    0

    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 ;)

  • Bo Jacobsen 593 posts 2389 karma points
    Jan 07, 2021 @ 23:37
    Bo Jacobsen
    1

    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.

  • Rasmus Fjord 675 posts 1566 karma points c-trib
    Jan 08, 2021 @ 08:37
    Rasmus Fjord
    0

    Good to know :)

  • Rasmus Fjord 675 posts 1566 karma points c-trib
    Aug 19, 2019 @ 05:58
    Rasmus Fjord
    0

    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.

  • Hassan 79 posts 264 karma points
    Jun 23, 2021 @ 08:04
    Hassan
    1

    Hi Rasmus.

    You should use () after function names in events input in View file.

    For example in on-click event input, use vm.clickItem() instead of vm.clickItem.

  • David Armitage 505 posts 2073 karma points
    Jun 19, 2023 @ 18:57
    David Armitage
    0

    Hi All,

    Just re-enfosing Hassan's response. I noted most people's controller code was correct.

    The thing that fixed it for me is simple adding those () on the end of the method calls innth ehtml view.

    So...

    <umb-table ng-if="vm.searchSubmissions.items"
                       items="vm.searchSubmissions.items"
                       item-properties="vm.tableProperties"
                       allow-select-all="true"
                       on-select="vm.selectItem(item)"
                       on-select-all="vm.selectAll()"
                       on-selected-all="vm.isSelectedAll()">
            </umb-table>
    

    vm.selectAll() vm.isSelectedAll()

    Instead of

    <umb-table ng-if="vm.searchSubmissions.items"
                       items="vm.searchSubmissions.items"
                       item-properties="vm.tableProperties"
                       allow-select-all="true"
                       on-select="vm.selectItem(item)"
                       on-select-all="vm.selectAll"
                       on-selected-all="vm.isSelectedAll">
            </umb-table>
    

    vm.selectAll vm.isSelectedAll

Please Sign in or register to post replies

Write your reply to:

Draft