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

5 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Jan 2016

    Posted 19 Jan 2016 Link to this post

    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

  2. Michael
    Michael avatar
    3 posts
    Member since:
    Jan 2016

    Posted 20 Jan 2016 Link to this post

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

  3. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 21 Jan 2016 Link to this post

    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!
     
  4. Daniel
    Daniel avatar
    18 posts
    Member since:
    Jan 2014

    Posted 31 May 2017 Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 02 Jun 2017 Link to this post

    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 visualization (charts) and form elements.
Back to Top