This is a migrated thread and some comments may be shown as answers.

how to bind children to grid

3 Answers 365 Views
Hierarchical Data Source
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 19 Mar 2014, 04:41 PM
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

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 21 Mar 2014, 12:51 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 19 Aug 2014, 06:25 PM
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?
0
Alex Gyoshev
Telerik team
answered on 20 Aug 2014, 07:22 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Hierarchical Data Source
Asked by
Jason
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Michael
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or