Set Grid UID to datasource primary ID

6 posts, 0 answers
  1. Stephen Parker
    Stephen Parker avatar
    5 posts
    Member since:
    Oct 2006

    Posted 04 Feb 2013 Link to this post

    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
  2. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 04 Feb 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Joe
    Joe avatar
    5 posts
    Member since:
    May 2013

    Posted 25 Dec 2013 Link to this post

    bump..

    Any Answer to this?
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Hugo
    Hugo avatar
    28 posts
    Member since:
    May 2011

    Posted 27 Dec 2013 Link to this post

    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.
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready