CODEWITHSUNDEEP
jquerykendo-uikendo-grid
ios
ios

Reputation: 165

Change width of Kendo UI Grid Hierarchy?

I have a 13 column grid with 3 column hierarchy.

The issue is hierarchy grid is taking 13 column space evenly to display 3 columns .

Is there a way to set width of hierarchy grid?

Upvotes: 1

Views: 959

Answers (2)

sonyisda1
sonyisda1

Reputation: 434

In order to set smaller width for the hierarchy Grid you can explicitly set the width of the hierarchy Grid component. This can be done via the HtmlAttributes property.

.HtmlAttributes(new {style="width: 500px;" })

Upvotes: 2

Salomon Zhang
Salomon Zhang

Reputation: 1565

I guess this is the answer you are looking for.

function resizeDetailGrid(gridElement) {
    // resize detail column widths to match master column headings
    gridElement.find('.k-detail-cell tbody tr td').each(function (index) {
        var headerCell, detailCell, headerCellSelector, detailCellSelector;
        headerCellSelector = kendo.format('.k-master-row td:nth-child({0})', index + 2);
        detailCellSelector = kendo.format('.k-detail-cell tbody tr td:nth-child({0})', index + 1);
        headerCell = gridElement.find(headerCellSelector).first();
        detailCell = gridElement.find(detailCellSelector);
        detailCell.width(headerCell.width());
    });
}

And initialise the grid

    gridDetailInit: function () {
        resizeDetailGrid($('#grid'));
    }

You could also add a horizontal scroll bar to the grid if you have so many columns.

Hope this info helps.

Upvotes: 0

Related Questions