Binding the grid to a complex objet collection

7 posts, 1 answers
  1. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 11 Jun 2013 Link to this post

    hi expert,

    I am new to Kendo component. In our project, we do not use the MVVM model because we adapt an existing application. We do a kind of face-lift with Kendo control. We have no problem to provide data to Combobox, calendar and some smaller control. But with the grid we hit a wall! ;-)


    All object are quite complex with setter and getter and got several link to other object. I am not the "object part" programmer and I can't talk much on that. The point is that when I do:

    $elem.kendoGrid({
        dataSource: {
            data: obj[acteurParam['prop']]  //return my collection
        },
    });


    The JS start a big big non stop loop. If I break the process and check in the stack windows of me firebug, I can see that KendoGrid try to do many many "Wrap" again the object. I think Kendo read the custom object and try to wrap it to Observable or something like that. Than Kenfo follow link to other objet and loop indefenitly.


    Do I have a way to block that? Can I define manually with object to link. Example: Obj1.Title to column 1 and obj1.Name to column 2 ?


    Any suggestion?
  2. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 11 Jun 2013 Link to this post

    Ok, i found why Kendo start a loop. In my object I try to bind, i got an Obj1.father pointing to the father object. Kendo do a loop try to wrap the .father (obj A->objB->objA and so on), if I remove the .father properties all work ok.

    It is possible to tell KendoGrid or DataSource to not "wrap" the .father propertie?

    Thanks
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 13 Jun 2013 Link to this post

    Hi Pierre,

    I am afraid that what you would like to achieve is not supported. By design the DataSource is designed to operate with flat data structure. Many of the features which the component offers, such as filtering, sorting, grouping and etc. does not work with complex objects. Disabling the Observable's wrap method is not possible either - even though that you does not use MVVM, it is used internally by the framework logic/components.

    If possible please try to transform the data into array of not nested objects. For example:
    [
        { foo: "foo 1", bar: "bar 1" },
        { foo: "foo 2", bar: "bar 2" }
    ]

    I hope this information will help.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 14 Jun 2013 Link to this post

    Thanks for reply,
    i do that and find a working solution.

    Small question, my grid is in batch editing. I hook on the Save event to get the event when a user change something and leave the cell.

    In the save event, I got the e.values containing the object of the cell changed like: Test=123.
    I can do: myRealObject['test'] = e.values['test'] to save de change.
    But in my case all the grid is created dynamically, I do not know the name of the protertie 'test'. I try to extract it with something like: 

    for( var propertyname in e.values){
        myRealObject[propertyname] = e.values[propertyname];
    }

    But propertyname is always undefined.
    Any suggestion?

  6. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 Jun 2013 Link to this post

    Hello Pierre,

    My suggestion is to hook up to the change event of the DataSource and listen for "itemchange" action. From the event parameters you can retrieve the name of changed field.
    onChange: function(e) {
        if(e.action === "itemchange") {
            e.field //the field name
            e.items //changed items (array)
        }
    }

    I hope this approach will fit in your scenario.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 20 Jun 2013 Link to this post

    When I hook to the change (not onChange) event of the DataSource, you code work well. But I need to get some object store in the Grid itselft by 
    var objV7 = e.sender.element.data("objet");
    But like the sender is the dataSource and not the grid, I can't. Do I have a way to go up to the grid? My dataSource is not global and "integreted" in the grid. Or mayby I can add custom objet into the dataSource ?

    Just for information, in the onChange event of the grid, the e.values is "PropertyNotEnumerable".
    we need this to retreive name information:
    Object.getOwnPropertyNames(e.values)
  8. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 21 Jun 2013 Link to this post

    Ok, I found how to add custom property to a data source:

    you add it like:

    var dataSource = new kendo.data.DataSource({
        ObjV7: objV7,


    and use it like:
    e.sender.options.ObjV7
Back to Top
Kendo UI is VS 2017 Ready