Created
June 30, 2013 21:03
-
-
Save Vorda/5896879 to your computer and use it in GitHub Desktop.
This example demonstrates how to select grid rows using checkboxes, preserve that selection between pages, get selected item IDs from all pages.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="http://cdn.kendostatic.com/2013.1.514/js/jquery.min.js"></script> | |
| <script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="grid"></div> | |
| <button id="showSelection">Show selected IDs</button> | |
| <script> | |
| $(document).ready(function () { | |
| //DataSource definition | |
| var crudServiceBaseUrl = "http://demos.kendoui.com/service", | |
| dataSource = new kendo.data.DataSource({ | |
| transport: { | |
| read: { | |
| url: crudServiceBaseUrl + "/Products", | |
| dataType: "jsonp" | |
| }, | |
| update: { | |
| url: crudServiceBaseUrl + "/Products/Update", | |
| dataType: "jsonp" | |
| }, | |
| destroy: { | |
| url: crudServiceBaseUrl + "/Products/Destroy", | |
| dataType: "jsonp" | |
| }, | |
| create: { | |
| url: crudServiceBaseUrl + "/Products/Create", | |
| dataType: "jsonp" | |
| }, | |
| parameterMap: function (options, operation) { | |
| if (operation !== "read" && options.models) { | |
| return { | |
| models: kendo.stringify(options.models) | |
| }; | |
| } | |
| } | |
| }, | |
| batch: true, | |
| pageSize: 20, | |
| schema: { | |
| model: { | |
| id: "ProductID", | |
| fields: { | |
| ProductID: { | |
| editable: false, | |
| nullable: true | |
| }, | |
| ProductName: { | |
| validation: { | |
| required: true | |
| } | |
| }, | |
| UnitPrice: { | |
| type: "number", | |
| validation: { | |
| required: true, | |
| min: 1 | |
| } | |
| }, | |
| Discontinued: { | |
| type: "boolean" | |
| }, | |
| UnitsInStock: { | |
| type: "number", | |
| validation: { | |
| min: 0, | |
| required: true | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| //Grid definition | |
| var grid = $("#grid").kendoGrid({ | |
| dataSource: dataSource, | |
| pageable: true, | |
| height: 430, | |
| //define dataBound event handler | |
| dataBound: onDataBound, | |
| toolbar: ["create"], | |
| columns: [ | |
| //define template column with checkbox and attach click event handler | |
| { template: "<input type='checkbox' class='checkbox' />" }, | |
| "ProductName", { | |
| field: "UnitPrice", | |
| title: "Unit Price", | |
| format: "{0:c}", | |
| width: "100px" | |
| }, { | |
| field: "UnitsInStock", | |
| title: "Units In Stock", | |
| width: "100px" | |
| }, { | |
| field: "Discontinued", | |
| width: "100px" | |
| }, { | |
| command: ["edit", "destroy"], | |
| title: " ", | |
| width: "172px" | |
| } | |
| ], | |
| editable: "inline" | |
| }).data("kendoGrid"); | |
| //bind click event to the checkbox | |
| grid.table.on("click", ".checkbox" , selectRow); | |
| $("#showSelection").bind("click", function () { | |
| var checked = []; | |
| for(var i in checkedIds){ | |
| if(checkedIds[i]){ | |
| checked.push(i); | |
| } | |
| } | |
| alert(checked); | |
| }); | |
| }); | |
| var checkedIds = {}; | |
| //on click of the checkbox: | |
| function selectRow() { | |
| var checked = this.checked, | |
| row = $(this).closest("tr"), | |
| grid = $("#grid").data("kendoGrid"), | |
| dataItem = grid.dataItem(row); | |
| checkedIds[dataItem.id] = checked; | |
| if (checked) { | |
| //-select the row | |
| row.addClass("k-state-selected"); | |
| } else { | |
| //-remove selection | |
| row.removeClass("k-state-selected"); | |
| } | |
| } | |
| //on dataBound event restore previous selected rows: | |
| function onDataBound(e) { | |
| var view = this.dataSource.view(); | |
| for(var i = 0; i < view.length;i++){ | |
| if(checkedIds[view[i].id]){ | |
| this.tbody.find("tr[data-uid='" + view[i].uid + "']") | |
| .addClass("k-state-selected") | |
| .find(".checkbox") | |
| .attr("checked","checked"); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
mjmstorm, just make sure that you have grid = $("#grid").data("kendoGrid") out someplace (above 113 seems ok)
This only seems to work with pre-populated rows. What if you are using paging that pulls in data later?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
at line 113 where it's binding the click event to the checkbox, i receive a js error undefined for the .table doesn't seem to be part of the grid object, any ideas?