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

Question

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

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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.

edited May 23 '17 at 11:59

Community

1
1

answered Aug 16 '13 at 02:37

phong ly

53
1
6

score 0 · Answer 2 · answered Aug 15 '13 at 21:16

0

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

answered Aug 15 '13 at 21:16

idbehold

16,833
5
47
74

My bugs is solved, because my jquery version (1.9.1) is conflict to Slick Grid plugin (using jquery version 1.7) and then I find and do following instructions http://stackoverflow.com/questions/14793331/uncaught-typeerror-cannot-read-property-msie-of-undefined finally my time is saved. Thank for your time. – phong ly Aug 16 '13 at 02:31

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

2 Answers2

Linked