This is a migrated thread and some comments may be shown as answers.

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

4 Answers 2056 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 20 Jan 2016, 04:44 AM

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

Sort by
0
Michael
Top achievements
Rank 1
answered on 20 Jan 2016, 01:20 PM

<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>
 

0
Boyan Dimitrov
Telerik team
answered on 21 Jan 2016, 03:42 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Daniel
Top achievements
Rank 1
answered on 31 May 2017, 08:53 AM

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

0
Stefan
Telerik team
answered on 02 Jun 2017, 06:55 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Daniel
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or