I can't figure out how to:
select row by data id
and
get data-id from selected row.
Attached is an short example (zipped file of index.html and support files with kendo ui) of what I do.
I'll appreciate review of the attached example and an advise on how to proceed with row selection and extracting data-id from selected row
4 Answers, 1 is accepted
Rank 1
<script> $(document).ready(function () { //Perhaps sample in the zip file is not a convenient way to present a problem. Sorry. Here is the codevar data = [ { Item1: 'Michael', Item2: 'Chicago', Item3: 'IL' }, { Item1: 'Rachel', Item2: 'New York', Item3: 'NY' }, { Item1: 'Daniel', Item2: 'Atlanta', Item3: 'GE' } ]; $('#kGrid').kendoGrid({ dataSource: { data: data, pageSize: 10, schema: { model: { id: 'Item1' } } }, selectable: 'row', scrollable: true, sortable: true, pageable: true, resizable: true, columns: [ { field: "Item1", title: "Name", width: "50px", attributes: { style: "font-size:10px" } }, { field: "Item2", title: "City", width: "50px", attributes: { style: "font-size:10px" } }, { field: "Item3", title: "State", width: "50px", attributes: { style: "font-size:10px" } } ] });// in "autocomplete" callback I am trying two things - get data-id of the selected row and change selection in grid to a new row. $('#tEntry').autocomplete({ source: function (request, clb) { var s = request.term.toLowerCase(); var ifound = -1; for (var i = 0; i < data.length; ++i) if (data[i].Item1.toLowerCase().indexOf(s, 0) >= 0) { ifound = i; break; } var grid = $('#kGrid'); var griddata = grid.data('kendoGrid'); // how to find data-id of currently selected row? var rows = griddata.select(); if (rows.length > 0) { var row = rows[0]; } // how to programmatically select the row in the grid if (ifound !== -1) { var rw = griddata.tbody.find('tr[data-id="' + data[ifound].Item1 + '"]'); rw = griddata.tbody.find('tr[data-uid="' + data[ifound].Item1 + '"]'); griddata.select(rw); // does not work } }, minLength: 3, delay: 2 }); }); </script> 
Hello Michael,
I prepared a sample http://dojo.telerik.com/EfAjA example to show how to achieve the desired functionality:
1. The select method of the Kendo UI Grid returns the selected row/rows (jQuery object).
2. The dataItem method of the Kendo UI Grid returns the data item associated with this table row and access the data id.
3. Since the data-id value is not applied to the table row element you have to iterate through the data in the DataSource.
4. Get the uid value from the model and find the table row with same uid value.
Regards,
Boyan Dimitrov
Telerik
Rank 1
Hi Telerik,
it is year 2017. Why we need to use these four steps for simply selecting a row by id (or by many ids).
Why Telerik doesn't provide a simple method like selectById([id1, id2, id3, ....]) and hide all the necessaries internal steps?
Many people have problem with such a "simple" task:
https://www.google.de/search?q=kendo+grid+select+by+id&oq=kendo+grid+select+by+id&aqs=chrome.0.69i59j0l5.1815j0j7&sourceid=chrome&ie=UTF-8
Regards,
Daniel
If the IDs of the selected rows have to be returned, I can suggest using the selectedKeyNames method of the Grid:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-selectedKeyNames
Also, the select method can select multiple elements by string, DOM elements or jQuery objects:
http://dojo.telerik.com/IrupI
Still, if this does not meet the expected requirements, I can suggest submitting a feature request in our feedback portal and based on its popularity we may implement it in a future release:
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/category/170280-grid
All suggestions are highly appreciated, as this is helping us to deliver a more complete and reliable product.
Regards,
Stefan
Progress Telerik