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

Grid with 3 editable detailRows

3 Answers 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 24 Jan 2013, 02:59 PM
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

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 28 Jan 2013, 01:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Peter
Top achievements
Rank 1
answered on 28 Jan 2013, 01:48 PM
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 ?" }
            });

0
Vladimir Iliev
Telerik team
answered on 30 Jan 2013, 08:25 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Peter
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Peter
Top achievements
Rank 1
Share this question
or