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 657 posts 1542 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 3252 posts 11032 karma points MVP 5x 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 657 posts 1542 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 657 posts 1542 karma points c-trib
    Aug 07, 2019 @ 17:59
    Rasmus Fjord
    0

    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 387 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 657 posts 1542 karma points c-trib
    Aug 19, 2019 @ 05:58
  • Michel Collard 31 posts 191 karma points
    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);
            }
        }
    
  • Rasmus Fjord 657 posts 1542 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.

Please Sign in or register to post replies

Write your reply to:

Draft