How to bind value in ng-model in hierarchical children grid.

4 posts, 0 answers
  1. Dhara
    Dhara avatar
    5 posts
    Member since:
    Aug 2017

    Posted 06 Nov 2017 Link to this post

    I can not able to bind value in detailInit function in coloumn template: "<input ng-model='data.itemId' />", title: "item Id". data.itemId not working in children grid

     vm.gridOptions1 = {
                dataSource: {
                    batch: true,
                    data: [{
                        id: 1,
                        name: "Abra",
                        items: [{
                            itemId: 10,
                            sku: "ABC123"
                        }, {
                            itemId: 11,
                            sku: "DEF567"
                        }]
                    }, {
                        id: 2,
                        name: "Kadabra",
                        items: [{
                            itemId: 20,
                            sku: "ABC678"
                        }, {
                            itemId: 21,
                            sku: "GHI567"
                        }]
                    }]
                },
                detailInit: vm.detailInit,
                editable:true,                      
                navigatable:true,     
                columns: [{
                    field: "id",
                }, {
                    // field: "name",
                    template: "<input type='text' ng-model='dataItem.name' />", title: "name"
                }, ]
            }

            function detailInit(e) {
                var dataTest = e.data.items;
                var grid = this;
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: dataTest,
                    editable: true,
                    columns: [{
                        // field: "itemId"
                         template: "<input ng-model='data.itemId' />", title: "item Id"
                    }, {
                        field: "sku"
                          // template: "<input ng-model='dataItem.sku' />", title: "sku"
                    } ],
                    save: function() {
                        grid.one("dataBinding", function(e) {
                            e.preventDefault();
                        });
                    }
                });
            }

     

  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 08 Nov 2017 Link to this post

    Hello, Dhara,

    I made an example with hierarchical Grid, used the provided template on the parent and the child Grids and both are bound:

    http://dojo.telerik.com/eFOqIl

    Please advise if I missed an important detail.
     
    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dhara
    Dhara avatar
    5 posts
    Member since:
    Aug 2017

    Posted 08 Nov 2017 Link to this post

    Hi Stefan

    I am using single transport read method and I added my hierarchical table information in items key check my json. I can not able to access sub child table  items value in template in ng-model. I am using detailInit function for hierarchical table. Can you explain me how i will create with single transport read method with in single grid. In your example you are using two different gird and two different transport read method.  

    dataSource: {

                    batch: true,
                    data: [{
                        id: 1,
                        name: "Abra",
                        items: [{
                            itemId: 10,
                            sku: "ABC123"
                        }, {
                            itemId: 11,
                            sku: "DEF567"
                        }]
                    }, {
                        id: 2,
                        name: "Kadabra",
                        items: [{
                            itemId: 20,
                            sku: "ABC678"
                        }, {
                            itemId: 21,
                            sku: "GHI567"
                        }]
                    }]
                }

  4. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 10 Nov 2017 Link to this post

    Hello, Dhara,

    Thank you for providing the data structure.

    I made an example using the provided data and it is bound as expected:

    http://dojo.telerik.com/eFOqIl/2

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top