We are using the kendoGrid detailTemplate to display a sub grid of data. This is working well.
However, the first column in the grid that contains the right pointer icon has a wide width. the online examples show a narrow width.
How can we control the width of the first column that contains the right pointer icon?
$("#mygrid-grid").kendoGrid({
.....
detailTemplate: kendo.template($("#template-details").html()),
detailInit: detailInit,
....
columns: [
{ field: "eventStart", title: "Event Start", format: "{0:MM/dd/yyyy}", width: "6%" },
......
2 Answers, 1 is accepted
Hello Jerry,
By design, the width of the expand/collapse column is 32px. This, however, can be modified with a custom CSS rule. Do you have any custom styles applied?
Nevertheless, you can use the following to adjust the width of the expand/collapse column:
<style>
.k-grid .k-hierarchy-col {
width: 110px;
}
</style>Dojo demo: https://dojo.telerik.com/AQOSAtIR
Let me know if you have any questions.
Regards,
Nikolay
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Iron
I found the problem.
The width of the expand/collapse column in the grid was because the grids columns was using percentages for the width and the percentages did not add up to 100%.
Once I correct the width, the expand/collapse column appeared smaller as wanted.
These widths must equal 100%. Otherwise the expand/collapse will appear to wide. columns: [
{ field: "eventStart", title: "Event Start", format: "{0:MM/dd/yyyy}", width: "12%" },
{ field: "companyName", title: "Company", width: "10%" },
{ field: "createdBy", title: "Created By", width: "7%" },
{ field: "eventType", title: "Type", width: "15%" },
{ field: "total", title: "Total", width: "6%", template: "#: kendo.toString(total,'0.00') # " },
{ field: "description", title: "Description", width: "50%" }
],
Hi Jerry,
Thank you for sharing the root of the problem and its resolution. I believe it will be helpful to others facing the same scenario.
Regards,
Nikolay