Selecting Rows Programmatically

1 Answer 1705 Views
Grid
Matt
Top achievements
Rank 1
Matt asked on 19 Jun 2015, 09:49 PM

I'm displaying data in two different formats (grid with details and on a map based on location).  I'm trying to make it so when you click on an object on the map then the corresponding row in the grid will get selected.  I'm able to get the data of the object to use when clicking on it on the map, but I'm having trouble using it to select the row in the grid.

Here's the grid creation:

$("#grid").kendoGrid({
                dataSource: {
                    data: myData
                },
                height: 400,
                filterable: true,
                sortable: true,
                resizable: true,
                pageable: false,
                selectable: true,
                schema: {
                    model: {
                        id: "MyId"
                    }
                },
                columns: [
                    {
                        field: "MyId",
                        hidden:true
                    },
                    {
                        field: "Name",
                        title: "Name",
                        filterable: false, width: 100
                    },
                    {
                        field: "Foo",
                        title: "Foo", width: 160
                    },
                    {
                        field: "Bar",
                        title: "Bar", width: 110
                    }
                ]
            });

 And here's the shapeClick event for the map:

var el = $("#grid"),
    grid = el.data("kendoGrid"),
    row = el.find("tbody>tr[data-id="+e.shape.dataItem.MyId+"]");
grid.select(row);

 

Using alerts I'm able to verify that I've got MyId correctly, and el, grid, and row are all objects, so I would assume it's getting the right things, but it's not selecting the row on the grid like it should be.

Anyone have any ideas?

 

 

 

 

Alexander Valchev
Telerik team
commented on 23 Jun 2015, 10:15 AM

Hello Matt,

The shapeClick event handler implementation looks OK. Did you checked the console for any JavaScript errors that might give us a clue what is going wrong? Did you checked if the row element is found?

var el = $("#grid"),
grid = el.data("kendoGrid"),
row = el.find("tbody>tr[data-id="+e.shape.dataItem.MyId+"]");
alert(row.length); //check if the row is found
grid.select(row);


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Matt
Top achievements
Rank 1
commented on 23 Jun 2015, 04:27 PM

I'd done alert(row); before, but not alert(row.length);  That's giving me a 0.  I'm guessing that means it's not actually finding the row, but I don't see why.

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 25 Jun 2015, 04:06 PM
Hi Matt,

By default grid rows does not have data-id attribute. They do have data-uid attribute which is an auto generated guid number attached to the model.

Please try the following:

row = el.find("tbody>tr[data-uid="+e.shape.dataItem.uid+"]");


Please test the suggested approach and verify the row.length

It should be equal to 1, zero means that no rows were selected.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
 
Matt
Top achievements
Rank 1
commented on 25 Jun 2015, 07:24 PM

var el = $("#BlocksGrid"),
                    grid = el.data("kendoGrid"),
                    row = el.find("tbody>tr[data-uid=" + e.shape.dataItem.MyId + "]");
                alert(row.length);
It's still giving me 0.

 

 

 

 

Matt
Top achievements
Rank 1
commented on 25 Jun 2015, 07:39 PM

I tried it with uid as well.

 

var el = $("#BlocksGrid"),
                    grid = el.data("kendoGrid"),
                    row = el.find("tbody>tr[data-uid=" + e.shape.dataItem.uid + "]");
                alert(row.length);

Still 0.

Vladimir Iliev
Telerik team
commented on 29 Jun 2015, 01:39 PM

Hello,

From the provided information it seems that the dataitems are not containing the "uid" field, however currently it's not clear for us what is the exact reason for this behavior. Could you please provide runable example where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.
 
Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or