how to bind children to grid

[Jason]

Dear Team

I have a application need to read a contract from server, when done with edit, need post back how contract back in one time.

let's say the data structure is :
Contract { contractID : string;
                   contractDate: date;
                  contractDetails[] {
                       contractDetailID: string;
                       contractQuantity: integer
                       }
                  }

now I managed to pull the json data from server by webservice.  but I can't bind to contractDetails to KendoGrid.

what I want is holding the instance of  this model in memory and bind the main data to textbox or combo, then bind the children(ContactDetails) to Kendo Grid 

with obeservable applied, the modified will effect this model in order to post back to server to save.

I know there is a way to use "kendo.bind" to bind to the html tag, but will be lack of convenient and style to use Kendo Grid.And there is a way to add to kendo grid manually. But it will lost the convenient of obeservable method.

Please help me, I am a new to Kendo UI and in evaluating stage.

With best regards

Jason

[Petur Subev]

Hello Jason,

You can simply make your object observable then you can bind the nested array (which will be transformed into observable array) to a Grid widget. After you are done with the changes you can simply use the ToJSON method and turn the observable object into regular object.

Here is an example:

http://trykendoui.telerik.com/ABol

Kind Regards,
Petur Subev
Telerik

 

 

[Michael]

I have a need for this exact situation, but when I click the example it no longer exists.  Can you supply a new code snippet?

[Alex Gyoshev]

Hello Michael,

It must have been a temporary downtime of the Dojo, as it is still available. For your convenience, here is the snippet:

<div data-role="grid" data-sortable="true" data-editable="true" data-columns='["Name", "Price", "UnitsInStock", {"command": "destroy"}]' data-bind="source: gridSource"></div>
<button id="getJSON">Get the JSON representation of the viewmodel</button>

<script>
            var viewModel = kendo.observable({

                
                gridSource: [
                    { Name: "Socks", Price: 18.00, UnitsInStock: 39 },
                    { Name: "Gloves", Price: 19.00, UnitsInStock: 17 },
                    { Name: "Shoes", Price: 97.00, UnitsInStock: 29 }
                ],
                 someName: "some name here"
            });


            kendo.bind($("table"), viewModel);
            $("#getJSON").click(function(e) {
              alert(kendo.stringify(viewModel.toJSON()))
            });
</script>

Regards,
Alex Gyoshev
Telerik