how to bind children to grid

4 posts, 0 answers
  1. Jason
    Jason avatar
    9 posts
    Member since:
    Sep 2013

    Posted 19 Mar 2014 Link to this post

    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


  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 21 Mar 2014 Link to this post

    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:

    Kind Regards,
    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Michael
    Michael avatar
    1 posts
    Member since:
    Dec 2013

    Posted 19 Aug 2014 in reply to Petur Subev Link to this post

    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?
  4. Alex Gyoshev
    Alex Gyoshev avatar
    2497 posts

    Posted 20 Aug 2014 Link to this post

    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>

                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) {

    Alex Gyoshev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top