Hirarchialy editable grids

2 posts, 0 answers
  1. Sagi
    Sagi avatar
    1 posts
    Member since:
    Feb 2016

    Posted 18 Feb 2016 Link to this post

    Hi!

    I wish to create a grid that each row has grid inside it.

    Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone. 

    Can you please help with this issue?

    Thanks!

    outer grid:

    var outerDataSource= new kendo.data.DataSource({
                schema: {
                    model: {
                        field1: { type: "string", validation: { required: true } },
                        field2: { type: "boolean", validation: { required: true } },
                        field3: { type: "string", validation: { required: true } }
                    }
                }
            });

    $("#outerGrid").kendoGrid({
            dataSource: ,
            detailInit: onExpansion,
            toolbar: ["create"],
            columns: [
                { field: "field1", title: "field1" },
                { field: "field2", title: "field2" },
                { field: "field3", title: "field3" },
                { command: ["destroy"], title: " " }],
            editable: true
        });

    onExpansion:

        function onExpansion(e) {
            var insideDataSource= new kendo.data.DataSource({
                schema: {
                    model: {
                        in1: { type: "string", validation: { required: true } },
                        in2: { type: "string", validation: { required: true } }
                    }
                },
                data: [{
                    in1: "Click to edit",
                    in2: "Click to edit"
                }]
            });
           
            var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: insideDataSource,
                width: 90,
                toolbar: ["create"],
                editable: true,
                columns: [
                  { field: "in1" },
                  { field: "in2" },
                  { command: ["destroy"], title: "&nbsp;" }]
            });
        };

     

     

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 22 Feb 2016 Link to this post

    Hello Sagi,

    Please note that operations like paging, sorting, filtering and editing cause the Grid to rebind and reevaluate all templates inside it (including the details). That why in order to preserve the child Grid data between rebinds you should either save it to remove service (link to documentation here) or add it as navigation property collection to the parent Grid model (demo is available here). 

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top