How to control width in kendoGrid detailTemplate column 1

[Jerry]

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%" },
......

 

 

[Nikolay]

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

[Jerry]

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%" }
        ],

[Nikolay]

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