I am nesting a kendo grid inside another kendo grid row as a "detail" template. I'm having this extremely frustrating issue, though; Kendo seems to be auto-generating the columns for the detail grid for me even though I have defined them myself and it's displaying a lot of columns that I don't want to be displayed.
Here is the original grid:
$("#ResellerBillingGrid").kendoGrid({
dataSource: viewModel.resellerDataSource,
editable: false,
groupable: false,
sortable: true,
pageable: true,
scrollable: false,
filterable: {
extra: false,
messages: {
isTrue: "Yes",
isFalse: "No",
info: " "
}
},
filterMenuInit: filterMenuInit,
detailTemplate: kendo.template($("#resellerDetailTemplate").html()),
detailInit: viewModel.detailInit,
columns: [
{ field: "DisplayName", title: "Reseller" }
]
});
And here is my viewmodel along with the grid detail:
var viewModel = new kendo.observable({
resellerDataSource: new kendo.data.DataSource({
transport: {
read: {
url: "/Host/Billing/GetResellers",
dataType: "json",
type: "GET"
}
},
pageSize: 20,
schema: {
model: {
fields: {
DisplayName: { type: "string" },
ResellerOrganizationsDataSource: [
{
Id: { type: "number" },
OrgDisplay: { type: "string" },
UserCount: { type: "number" },
PricingTier: {
Id: { type: "number" },
Name: { type: "string" },
PricePerUser: { type: "number" },
Total: { type: "number" }
}
}
]
}
}
}),
detailInit: function (e) {
var detailRow = e.detailRow;
detailRow.find(".resellerOrgsGrid").kendoGrid({
dataSource: {
data: e.data.ResellerOrganizationsDataSource,
pageSize: 10,
schema: {
model: {
fields: {
Id: { type: "number" },
OrgDisplay: { type: "string" },
UserCount: { type: "number" },
PricingTier: {
Id: { type: "number" },
Name: { type: "string" },
PricePerUser: { type: "number" },
Total: { type: "number" }
}
}
}
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrgDisplay", filterable: { ui: orgFilter }, title: "Name" },
{ field: "PricingTier.Name, title: "Pricing Tier", filterable: { ui: tierFilter } ),
{ field: "PricingTier.PricePerUser", title: "Price Per User", format: "{0:C2}" },
{ field: "UserCount", title: "Total Users" },
{ field: "PricingTier.Total", title: "Total", format: "{0:C2}" }
]
}
});
}
});
Now the crazy part is that even if I remove the column definitions from the detail
grid then all of the "auto-generated" columns are still there.
Here is a screenshot of what I'm getting - notice how all of the columns in the detail for the row are shown even when only 5 are defined:
Has anyone run into this issue before or have any ideas on what could be causing this?