Search code examples
javascriptjqueryangularjsslickgrid

SlickGrid onSelectedRowsChanged not firing


I have the following issue with slickgrid:

  1. Left click row 1 (onSelectedRowsChanged fires as expected)
  2. Hold down the control button
  3. Left click row 2 (onSelectedRowsChanged fires as expected)
  4. Left click row 1 (onSelectedRowsChanged fires as expected)
  5. Let go of the control button
  6. Click row 1 (onSelectedRowsChanged does not fire! If you click on the same row 1 cell as before)

Issues as described on step 6 above. Here is a link to a jsfiddler showing the issues: http://jsfiddle.net/fortesl/oLj8otsj/1/

Code also attached:

         var grid;
     var data = [];
     var columns = [{
         id: "title",
         name: "Title",
         field: "title",
         width: 300,
         selectable: false,
         resizable: false
     }, {
         id: "priority",
         name: "Priority",
         field: "priority",
         width: 200,
         selectable: false,
         resizable: false
     }];

     var options = {
         editable: true,
         enableAddRow: true,
         enableCellNavigation: true,
         forceFitColumns: true,
         autoEdit: false
     };

     for (var i = 0; i < 100; i++) {
         var d = (data[i] = {});
         d["title"] = "Task " + (i + 1);
         d["priority"] = "Medium";
     }

     grid = new Slick.Grid("#myGrid", data, columns, options);

     grid.setSelectionModel(new Slick.RowSelectionModel());

     grid.onSelectedRowsChanged.subscribe(function () {
         var selectedRows = grid.getSelectedRows();
         for (var i = 0; i < selectedRows.length; i++) {
             selectedRows[i] = selectedRows[i] + 1;
         }
         $('.selected-rows')[0].innerHTML = selectedRows;
     });
     grid.onClick.subscribe(function () {
         $('.selected-rows')[0].innerHTML = '';
     });

Please help


Solution

  • I solved my issue by handling the OnClick event and calling setSelectedRows from the handler. Shown below:

                    grid.onClick.subscribe(function(e) {
                    var cell = $scope.grid.getCellFromEvent(e);
                    var row = (cell) ? cell.row : 0;
                    var rows = [row];
                    grid.setSelectedRows(rows);
                });