Set Grid UID to datasource primary ID

[Stephen Parker]

Hello


I am trying to find a way to set the Grid data-uid to the primary key in my datasource so that i can find the row programmatically.

I do not require users to select rows in the grid, it needs to be done via script.

I have looked though the grid datasource documentation and there seems to be no way to set it.


Thanks

[OnaBai]

Can we rephrase your problem to you need to select a row known its primary ID? If so, you can use datasource.get for getting an item given its id.  

So, it can be something like:

var dataSource = new kendo.data.DataSource({

    data    : [

        {"ID": 2, "Name": "Jane" },

        {"ID": 3, "Name": "Sam" },

        {"ID": 4, "Name": "Charles" },

        {"ID": 1, "Name": "John" },

        {"ID": 5, "Name": "Paul" },

        {"ID": 6, "Name": "Josh" },

        {"ID": 7, "Name": "Daniel" }

    ],

    schema  : {

        model: {

            id: "ID"

        }

    },

    pageSize: 8

});

 

 

var grid = $("#kendogrid").kendoGrid({

    dataSource: dataSource,

    selectable: true,

    columns   : [

        { field: "ID" },

        { field: "uid" },

        { field: "Name" }

    ]

}).data("kendoGrid");

 

 

function selectElementGivenItsId (id) {

    var item = grid.dataSource.get(id);

    var tr = $("[data-uid='" + item.uid + "']", grid.tbody);

    grid.select(tr);

});

If you invoke selectElementGivenItsId function, you select it.

[Joe]

bump..

Any Answer to this?

[Alexander Popov]

Hello Joe,

Basically the data-uid attribute is internally set and cannot be assigned to the dataSource ID field. Each item in the dataSource however, has a uid property, which is the same as the data-uid attribute of its corresponding row. You can take advantage of that as OnaBai suggested:   

function selectElementGivenItsId (id) {
    var item = grid.dataSource.get(id); //get the dataItem by its ID
    var tr = $("[data-uid='" + item.uid + "']", grid.tbody); //use the dataItem's uid to find its corresponding row
    grid.select(tr);
});

Regards,
Alexander Popov
Telerik

[Hugo]

Besides selecting the row, which the function selectElementGivenItsId works perfectly, I have a pageable grid which I would like to go to the selected row page.
I am using this code on dataBound:

grid.dataSource.page(2)

But it gives me this error: 
Uncaught RangeError: Maximum call stack size exceeded

It looks like pagesize is not finished. I also would to know how to get the page where is the selected item.

[Alexander Popov]

Hello Hugo,

This happens because changing the page triggers the dataBound event, which creates and infinite loop. I would recommend you to attach a handler to the dataBound event using the one method, for example:  

grid.one("dataBound", function(){
  this.dataSource.page(2);
});

Regards,
Alexander Popov
Telerik