|
| 1 | +--- |
| 2 | +title: Dynamically Select a Row on Any Page in the Grid |
| 3 | +description: An example on how to select a row that may be placed on a different page in the Grid. |
| 4 | +type: how-to |
| 5 | +page_title: Dynamically Select Row in Pageable Grid | Kendo UI Grid |
| 6 | +slug: grid-select-row-on-different-page |
| 7 | +tags: grid, selection, paging |
| 8 | +ticketid: 1408857 |
| 9 | +res_type: kb |
| 10 | +component: grid |
| 11 | +--- |
| 12 | + |
| 13 | +## Environment |
| 14 | + |
| 15 | +<table> |
| 16 | + <tr> |
| 17 | + <td>Product</td> |
| 18 | + <td>Progress Kendo UI Grid</td> |
| 19 | + </tr> |
| 20 | +</table> |
| 21 | + |
| 22 | + |
| 23 | +## Description |
| 24 | + |
| 25 | +I want to be able to select a row in the Grid dynamically, regardless of the row position in the Grid data. How can I select a row if it is on a different page of the Grid? |
| 26 | + |
| 27 | +## Solution |
| 28 | + |
| 29 | +1. Find the row index in the Grid DataSource and use it to determine the page containing the row. |
| 30 | +1. Navigate the Grid to the page containing the row. |
| 31 | +1. Select the row. |
| 32 | +1. Scroll the Grid to the position of the row to ensure it is visible. |
| 33 | + |
| 34 | +> This approach works only when the Grid uses client-side operations (paging, sorting, filtering). With server operations, the data from pages different than the current one is not available on the client, so you cannot search for the row index. |
| 35 | +
|
| 36 | +The following example demonstrates how to select a row on any page of a client-side paged Grid. |
| 37 | + |
| 38 | +```dojo |
| 39 | + Select row with ID = <input id="numeric" /> (1-78) |
| 40 | + <button id="searchBtn" class="k-button">Go</button> |
| 41 | + <div id="grid"></div> |
| 42 | + <script> |
| 43 | + function selectGridRow(searchedId, grid, idField){ |
| 44 | + var dataSource = grid.dataSource; |
| 45 | + var filters = dataSource.filter() || {}; |
| 46 | + var sort = dataSource.sort() || {}; |
| 47 | + var models = dataSource.data(); |
| 48 | + // We are using a Query object to get a sorted and filtered representation of the data, without paging applied, so we can search for the row on all pages |
| 49 | + var query = new kendo.data.Query(models); |
| 50 | + var rowNum = 0; |
| 51 | + var modelToSelect = null; |
| 52 | +
|
| 53 | + models = query.filter(filters).sort(sort).data; |
| 54 | +
|
| 55 | + // Now that we have an accurate representation of data, let's get the item position |
| 56 | + for (var i = 0; i < models.length; ++i) { |
| 57 | + var model = models[i]; |
| 58 | + if (model[idField] == searchedId) { |
| 59 | + modelToSelect = model; |
| 60 | + rowNum = i; |
| 61 | + break; |
| 62 | + } |
| 63 | + } |
| 64 | +
|
| 65 | + // If you have persistSelection = true and want to clear all existing selections first, uncomment the next line |
| 66 | + // grid._selectedIds = {}; |
| 67 | +
|
| 68 | + // Now go to the page holding the record and select the row |
| 69 | + var currentPageSize = grid.dataSource.pageSize(); |
| 70 | + var pageWithRow = parseInt((rowNum / currentPageSize)) + 1; // pages are one-based |
| 71 | + grid.dataSource.page(pageWithRow); |
| 72 | +
|
| 73 | + var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']"); |
| 74 | + if (row.length > 0) { |
| 75 | + grid.select(row); |
| 76 | +
|
| 77 | + // Scroll to the item to ensure it is visible |
| 78 | + grid.content.scrollTop(grid.select().position().top); |
| 79 | + } |
| 80 | + } |
| 81 | +
|
| 82 | + $(document).ready(function () { |
| 83 | +
|
| 84 | + $("#searchBtn").click(function(){ |
| 85 | + var grid = $("#grid").data("kendoGrid"); |
| 86 | + var searchedId = $("#numeric").data("kendoNumericTextBox").value(); |
| 87 | +
|
| 88 | + selectGridRow(searchedId, grid, "ProductID"); |
| 89 | + }); |
| 90 | +
|
| 91 | + $("#numeric").kendoNumericTextBox({ |
| 92 | + min: 1, |
| 93 | + max: 78, |
| 94 | + format: "n0" |
| 95 | + }); |
| 96 | +
|
| 97 | + $("#grid").kendoGrid({ |
| 98 | + dataSource: { |
| 99 | + type: "odata", |
| 100 | + transport: { |
| 101 | + read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" |
| 102 | + }, |
| 103 | + schema: { |
| 104 | + model: { |
| 105 | + id: "ProductID", |
| 106 | + fields: { |
| 107 | + ProductID: { type: "number" }, |
| 108 | + UnitPrice: { type: "number" }, |
| 109 | + UnitsInStock: { type: "number" } |
| 110 | + } |
| 111 | + } |
| 112 | + }, |
| 113 | + pageSize: 10 |
| 114 | + }, |
| 115 | + height: 350, |
| 116 | + sortable: true, |
| 117 | + filterable: true, |
| 118 | + selectable: "row", |
| 119 | + pageable: { |
| 120 | + refresh: true, |
| 121 | + pageSizes: true |
| 122 | + }, |
| 123 | + columns: [ |
| 124 | + { |
| 125 | + field: "ProductID", |
| 126 | + title: "ID", |
| 127 | + width: 100 |
| 128 | + },{ |
| 129 | + field: "ProductName", |
| 130 | + title: "Product Name", |
| 131 | + width: 180 |
| 132 | + }, { |
| 133 | + field: "UnitPrice", |
| 134 | + title: "Unit Price" |
| 135 | + }, { |
| 136 | + field: "UnitsInStock", |
| 137 | + title: "Units in Stock" |
| 138 | + }, { |
| 139 | + field: "Discontinued", |
| 140 | + width: 150 |
| 141 | + }] |
| 142 | + }); |
| 143 | + }); |
| 144 | + </script> |
| 145 | +``` |
| 146 | + |
| 147 | +## See Also |
| 148 | + |
| 149 | +* [kendo.data.Query](/api/javascript/data/query) |
| 150 | +* [Grid API reference](ui/api/javascript/ui/grid) |
0 commit comments