I have a Kendo grid.Each parent row consists of two row and child row has a div. but now expand collapse not showing and command button in grid also not showing.
What I have tried:
$("#grid").kendoGrid({
dataSource: { data: items, pageSize: 10 },
noRecords: {
template: "No Records Found."
},
pageable: {
alwaysVisible: true,
pageSizes: [5, 10, 20, 100]
},
selectable: "single",
resizable: true,
persistSelection: true,
groupable: true,
dataBinding: onDataBinding,
scrollable: false,
sortable: true,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
rowTemplate: kendo.template($("#rowTemplate").html()),
detailExpand: function (e) {
debugger;
var item = this.dataItem(e.masterRow);
var partName = e.masterRow[0].childNodes[4].textContent;
setCookie("part", partName, 1);
e.sender.tbody.find('.k-detail-row').each(function (idx, item) {
if (item !== e.detailRow[0] && $(item).prev().length > 0) {
e.sender.collapseRow($(item).prev());
}
})
},
height: 550,
width: 600,
columns: [
//{ field: "id", title: "#", width: 75 },
{ field: "manufacture", title: "MFG", width: 75 },
{ field: "year", title: "Year", width: 110 },
{ field: "parts", title: "Part#", width: 110 },
{ field: "oem", title: "OEM", width: 130 },
{ field: "pname", title: "Part", width: 110 },
//{ field: "origin", title: "Origin", width: 75 },
{ field: "oldPrice", title: "Old Price", width: 110 },
{ field: "oePrice", title: "OE Price", width: 110 },
{ command: { name: "addToCart", text: " Cart", click: showDetails, title: " ", width: "75px", iconClass: "fa fa-shopping-cart" } }
],
editable: false
});