Slick Grid wrapped in directive (angular), some options not work (resize and drag&drop columns)

All we need is an easy explanation of the problem, so here it is.

When I’ve wrapped Slick Grid plugin into directive, some Slick Grid options (resizing and drag & drop columns) do not work. I think those events may conflict with directive.
Does anyone have any insight?

my html:

<div style="width:600px;height:500px;" s-grid></div>

my directive:

angular.module('slickGrid.directive', [])
.directive('sGrid', [function () {
    return {
        restrict: 'EA',
        link : function(scope, element, attrs){
            // for clearer present I initialize data right in directive
            // start init data
            var columns = [
                {id: "title", name: "Title", field: "title"},
                {id: "duration", name: "Duration", field: "duration"},
                {id: "%", name: "% Complete", field: "percentComplete"},
                {id: "start", name: "Start", field: "start"},
                {id: "finish", name: "Finish", field: "finish"},
                {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
            var options = {
                enableCellNavigation: true,
                enableColumnReorder: true
            var data = [];
            for (var i = 0; i < 50000; i++) {
                var d = (data[i] = {});

                d["id"] = "id_" + i;
                d["num"] = i;
                d["title"] = "Task " + i;
                d["duration"] = "5 days";
                d["percentComplete"] = Math.round(Math.random() * 100);
                d["start"] = "01/01/2009";
                d["finish"] = "01/05/2009";
                d["effortDriven"] = (i % 5 == 0);
            // end init data

            // finally render layout
            scope.grid = new Slick.Grid(element, data, columns, options);

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

my bugs are solved, after take some time to research, I found a solution here Uncaught TypeError: Cannot read property 'msie' of undefined

My newer version jquery(1.9.1) caused that problem.

Method 2

You need to include jQuery UI to use SlickGrid’s column resizing/reordering.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply