Grid with 3 editable detailRows

[Peter]

Hi,
I need help with a grid with 3 detail rows each editable and with own datasources - like this http://jsbin.com/epocid/1/
When I hook this up to my datasources, while the read fires and data is returned for all datasources, only the Master and first detailRow gets populated. Thanks in advance for help.
Pete

[Vladimir Iliev]

Hi Peter,

In current example the third tab is not loaded initially because it's not activated - to achieve the desired behavior you should add the "k-state-active" CSS class to the third "li" element in the tabstrip tabs definition:

<li class="k-state-active">
    Supplied Pears
</li>

For convenience I updated the provided jsBin example - http://jsbin.com/epocid/8/edit. Kind Regards,
Vladimir Iliev
the Telerik team

[Peter]

Thanks for reply Vladimir I guess I did not make clear what the issue is, 

1. Cans Kendoui work with more than two editable detail rows? Specifically, why does the following code not work

        function detailInit(e) {

            var detailRow = e.detailRow;

         

            //var model = e.data;

            detailRow.find(".tabstrip").kendoTabStrip({

                animation: {

                    open: { effects: "fadeIn" }

                }

            });

               

            detailRow.find('.productions').kendoGrid({

                dataSource: {

                    type: "json",

                    transport: {

                        read: "/backoffice/productionsbyfilename",

                        destroy: "/backoffice/delproductionsbyfilename"

                    },

                    pageSize:6,

                    filter: { field: "FileName", operator: "eq", value: e.data.FileName }

                },

                scrollable: false,

                sortable: true,

                pageable: true,

                columns: [

                    { field: "ProdCounter", width: 70 },

                    { field: "ProductionCode", title: "Abbey Production Code", width: 100 },

{ field: "MainTitle", title: "Title", width:200}

                     { command: ["destroy" ], title: " ", width: "80px" }

                ],

                editable: { destroy: "true",

                confirmation: "Are you sure you want to delete this item?"

                }

            });

         

             

            detailRow.find('.people-details').kendoGrid({

                dataSource: {

                     

                     

                    schema: {

                        model: {

                            id: "PersonId",

                            fields: {

                                PersonId: {},

                                ArchiveItemId: {},

                                Surname: {},

                                Forenames: {},

                                DateofBirth: {}

                            }

                        }

                    },

                  //  batch: true,

                    type: "json",

                    transport: {

                        read: "/backoffice/peoplebyfilename",

                       // destroy: "/backoffice/delpeoplebyfilename"

                    },

                    pageSize:6,

                    filter: { field: "FileName", operator: "eq", value: e.data.FileName }

                },

                scrollable: true,

                sortable: true,

                pageable: true,

                columns: [

                    { field: "PersonId", width: 70 },

                    {field:  "ArchieItemId", width: 70},

                    { field: "Surname", title:"Surname", width: 150 },

                    { field: "Forenames", title: "Forename(s)", width: 150 },

                    { field: "DateofBirth", title:"Birth Date" },

                   // { command: ["destroy" ], title: " ", width: "80px" }

                ],

                editable: { destroy: "true", confirmation: "Are you sure you want to kill this person?" }

            });

             

            detailRow.find('.play-details').kendoGrid({

                dataSource: {

                    type: "json",

                    transport: {

                        read: "/backoffice/playsbyfilename",

                //        destroy: "/backoffice/delplaysbyfilename"

                    },

                    pageSize:6,

                    filter: { field: "FileName", operator: "eq", value: e.data.FileName }

                },

                scrollable: true,

                sortable: true,

                pageable: true,

                columns: [

                    { field: "PlayId", title:"PlayId", width: 70 },

                    { field: "MainTitle", title:"Play Title", width: 200 },

                  // { command: ["destroy" ], title: " ", width: "80px" }

                ],

                 editable: { destroy: "true", confirmation: "Are you sure you want to delete the tag for this play ?" }

            });

[Vladimir Iliev]

Hi Peter,

 
From the provided information it's not clear for us what is the exact reason for this behavior - please provide runable example where the issue is reproduced - this would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
the Telerik team