Movatterモバイル変換


[0]ホーム

URL:


New to Kendo UI for jQuery? Start a free 30-day trial

Select All Rows on All Grid Pages

Environment

ProductProgress® Kendo UI® Grid for jQuery
Product VersionTested up to version 2017.2 621

Description

How can I select all rows on all Kendo UI Grid pages?

Solution

The implementation of this functionality might lead to slow Grid performance.

  1. Set thepersistSelection configuration of the Grid totrue.
  2. Use a jQuery selector to subscribe for theclick event of the master checkbox.
  3. In theclick event handler:
    1. Save the current page size in a global variable by using thepageSize method of the Kendo UI dataSource.
    2. Show all the rows on a single page by using thepageSize method.
    3. Select all the rows by using theselect method of the Kendo UI Grid.
    4. Bring back the old page size by using thepageSize method.
<linkrel="stylesheet"href="https://demos.telerik.com/kendo-ui/content/shared/styles/examples-offline.css"><scriptsrc="https://demos.telerik.com/kendo-ui/content/shared/js/console.js"></script><divid="example"><divid="grid"></div><script>var oldPageSize=0;functiononChange(e){            kendoConsole.log("The selected product ids are: ["+this.selectedKeyNames().join(", ")+"]");};functiononClick(e){var grid=$("#grid").data("kendoGrid");            oldPageSize= grid.dataSource.pageSize();            grid.dataSource.pageSize(grid.dataSource.data().length);if(grid.dataSource.data().length=== grid.select().length){                grid.clearSelection();}else{                grid.select("tr");};            grid.dataSource.pageSize(oldPageSize);};$(document).ready(function(){$("#grid").kendoGrid({dataSource:{pageSize:10,transport:{read:{url:"https://demos.telerik.com/service/v2/core/Products"}},schema:{model:{id:"ProductID"}}},pageable:true,scrollable:false,persistSelection:true,sortable:true,change: onChange,columns:[{selectable:true,width:"50px"},{field:"ProductName",title:"Product Name"},{field:"UnitPrice",title:"Unit Price",format:"{0:c}"},{field:"UnitsInStock",title:"Units In Stock"},{field:"Discontinued"}]});var grid=$("#grid").data("kendoGrid");            grid.thead.on("click",".k-checkbox", onClick);});</script><divclass="box wide"><h4>Console log</h4><divclass="console"></div></div><style>.console div{height:6em;}</style></div>

Notes

The checkbox selectable column is available as of the Kendo UI R2 2017 SP1 release.

See Also


[8]ページ先頭

©2009-2025 Movatter.jp