Double click on kendo grid row with angular directive

In my application, I wanted to handle double click on grid’s row by redirecting user to page, which contained detailed data about this particular row. Unfortunately, none of existing implementation did not satisfied me, because it either binded to dbClick event in controller, or used rowTemplate to show data in grid. I was very determined to create a new directive to handle it, because I needed a shared solution to avoid copying code from one controller to another. So i created my own implementation - kendoGridRowDblClick directive:

(function () {
    angular.module('moduleName').directive('kendoGridRowDblClick', kendoGridRowDblClick);

    function kendoGridRowDblClick() {
        return {
            link: function (scope, element, attrs) {
                scope.$on("kendoWidgetCreated", function (event, widget) {

                    if (widget !== element.getKendoGrid())
                        return;

                    attachDblClickToRows(scope, element, attrs);

                    element.data("kendoGrid").bind('dataBound', function () {
                        attachDblClickToRows(scope, element, attrs);
                    });
                });
            }
        };

        function attachDblClickToRows(scope, element, attrs) {
                element.find('tbody tr').on('dblclick', function (event) {
                    var rowScope = angular.element(event.currentTarget).scope();
                    scope.$eval(attrs.kendoGridRowDblClick, { rowData: rowScope.dataItem });
                });
        }
    }
})();

Directive’s link function runs before initialization of kendo grid, so we need to postpone binding to dbClick event. At the beginning, I used $timeout to do it, but i decided not to make such workaround in my code. Finally I bumped into this article, describing kendoWidgetCreated event,  which allowed me to connect directly to initialization of my grid.

Then, in directive, I run attachDblClickToRows function to bind dbClick event to rows. Of course, I did not forget to connect attachDblClickToRows to grid’s _dataBound _event - it’s needed because kendo redraws the rows every time, when the new data is bound.

In attachDblClickToRows function I used _angular.element _and _scope.$eval _to get data from particular row and run code from controller, which handled dbClick event.

Use of this directive is very simple:

<div kendo-grid options="ctrl.gridOptions" kendo-grid-row-dbl-click="ctrl.rowDblClick(rowData)">

self.rowDblClick = function(rowData) {
    // redirect user to details page
};

Such implementation allows me to use this directive in various places in my application without bindings to the same grid’s events. My controllers are cleaner and it’s much easier to understand what logic is done, when dblClick event is raised.

Comments:

dotnetomaniak.pl - Mar 6, 2016

Double click on kendo grid row with angular directive – RadBlog

Dziękujemy za dodanie artykułu - Trackback z dotnetomaniak.pl

starata - Nov 0, 2016

Thanks a lot Radeck,

This is a very useful and helpful post.