Selecting Rows Programmatically

[Matt]

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]

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

 

 

[Matt]

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.

[Alexander Valchev]

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

 

 

 

[Matt]

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]

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]

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