KendoGrid - Adding & Removing the extra row is DUP

2019-09-05 23:58发布

问题:

I wish to add one extra row into the detailRow to show a full description above the rows.

But for some reason, when i click the expand or collapse indicator in the master row, it is generating the unwanted duplicate detail rows. Please suggest how to fix this issue. I am not sure, where i am getting wrong or missing something. Although, both functions are working fine in terms of adding & removing the extra row element. But not sure, why the detail rows are getting added again and again.

During debugging in firebug, i found that function "detailInitfunc" gets the hit every time i click the expand or collapse icons. And i guess this creates the multiple detail rows on every action.

Kendo UI dojo link - dojo.telerik.com/@maximus392/iSiyU

Both functions are present in the end of this post.

  $("#gridAudit").kendoGrid({
                    dataSource: {
                        data: partnergroups,
                        schema: {
                            model: {
                                fields: {
                                    PartnerGroupID : {type: "number"},
                                    PartnerName: { type: "string" },
                                    PartnerDescription: { type: "string" },
                                    AcquisitionPrice: { type: "number" }

                                }
                            }
                        },
                        pageSize: 10,
                        sort: { field: "PartnerName", dir: "asc" }
                    },
                    height: 250,                    
                    scrollable: true,                    
                    sortable: true,
                    filterable: true,                       
                    detailInit: detailInitfunc,
                    detailCollapse: detailCollapsefunc,
                    detailExpand: detailExpandfunc,
                    pageable: {
                        input: true,
                        numeric: true
                    },
                    columns: [
                        { field: "PartnerName", title: "Partner Name", width: "150px" },
                        { field: "PartnerDescription", title: "Partner Desc", width: "150px" },
                        { field: "Units", title: "Units", format:"{0:##,#;(##,#)}", width: "80px" },
                        { field: "AcquisitionPrice", title: "Acquisition Price", format: "{0:c}", width: "120px" }
                    ]
                }); //E.O. "kendoGrid" initialization



  function detailCollapsefunc(e) { $(e.masterRow).parent().find(".trchd").remove();                                
   }

  function detailExpandfunc(e) {          
       $("<tr class='trchd' style='text-align:center;'><td colspan='10'><b>Group History</b></td></tr>").insertBefore(e.detailRow);                
   }

  function detailInitfunc(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: childgroups,
                        filter: { field: "PartnerGroupID", operator: "eq", value: e.data.PartnerGroupID }
                    },
                    scrollable: false,
                    sortable: false,
                    pageable: false,
                    columns: [
                        { field: "PartnerName", title: "Partner Name", width: "150px" },
                        { field: "PartnerDescription", title: "Partner Desc", width: "150px" },
                        { field: "Units", title: "Units", format: "{0:##,#;(##,#)}", width: "80px" },
                        { field: "AcquisitionPrice", title: "Acquisition Price", format: "{0:c}", width: "120px" }       
                    ]                 
                });
            }  //E.O. "detailInitfunc"