Kendo Grid select/unselect all, select/unselect multiple rows, javascript

0
votes

I'm trying to implement a kendo grid which allows users to select rows using checkbox. It will provide:

  • Select all
  • Unselect all
  • select multiple rows
  • unselect multiple rows
  • Updates the users No of rows selected while doing all of the above actions.

UI: I've used headerTemplate for creating select all checkbox and template for creating checkbox for each row.

Functionality: Used change event of kendoGrid for updating the number of rows selected

and dataBound event for attaching event handlers to checkbox.

I've used grid.select() for selecting a row but it is working only when we specify selectable option while initializing grid and grid.clearSelection() for un selecting all rows.

See the demo Kendo Grid UI for better understanding

I found few resources suggesting to add a active class to selected row, however the change event is not firing. Grid selection using checkbox

Questions

Now the issue is, how can one implement multiple select which fires the change event?

Is there any function available to unselect a row that is selected by grid.select()

1
jquerykendo-uikendo-grid

1 Answers

3
votes

The problem you are having is that your grid is configured with selectable: false (the default if you don't specify) but your selectAll() is trying to use the grid.select() and grid.clearSelection(). These methods will throw errors as the grid is not selectable.

If you change your selectAll() to something like this:

function selectAll(e) {
    debugger;
    var checked = this.checked,grid = $("#grid").data("kendoGrid");

    for (var i = 0; i < grid.dataSource.data().length; i++) {
      var item = grid.dataSource.data()[i];
      var row = grid.element.find("tr[data-uid='" + item.uid + "']");
      var checkBox = row.find(".selectChkbox");
      checkBox.trigger("click");
    }
  }

You will get all rows OF THE CURRENT PAGE selected and checked.

You could also make the grid selectable which will allow you to use .select() and .clearSelection() but then you will also have to synchronize the checkbox state with the row highlight state.

Please note that you will also need to determine how you want to handle server-side paging as your selectAll will only work for the current page...and your users will probably expect a select all operation to check all the rows. This is not trivial.

Edit

http://dojo.telerik.com/@Stephen/EMeZE

Here's a rough-and-dirty of how I implement selectAll/unselectAll on my grids that need it.

I use a Selected backing field on the ViewModel instead of just relying on the checkbox.

I also use 2 buttons to selectAll/unselectAll, 1 to select and 1 to unselect so that you can individually select a few rows, then unselected them all without first have to select them using the header checkbox before you can unselect them...I find it a smoother experience.

I also don't normally add/remove the row highlight and use the checkedIds array but I tried to add them in since that is what you are doing.