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"