Select row by data id and get data-id from selected row

[Michael]

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

[Michael]

<script>

        $(document).ready(function () {

 //Perhaps sample in the zip file is not a convenient way to present a problem. Sorry. Here is the code
var 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>

[Boyan Dimitrov]

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

 

 

[Daniel]

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

[Stefan]

Hello 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