Binding the grid to a complex objet collection

[Pierre]

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?

[Pierre]

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

[Alexander Valchev]

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

[Pierre]

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?

[Alexander Valchev]

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

[Pierre]

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)

[Pierre]

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