@Html.Telerik().Grid column problems.Telerik Extensions for ASP.NET MVC 2011.Q3.1115

Question

I have 14 columns in grid.

Totally it takes 1600 pixel of grid width..it is too big width for browser to show. I cant set width of column by my self.

columns.Bound(o => o.Code).Width(80);

Width property not worked I tried other ways too. Any suggestions?

Answer 1

You can opt for any of two solution below to maintain your grid layout.

You could wrap your whole kendo grid inside a div and set the div width to 100% and overflow to auto. This will make sure the grid doesn't overflow to right. You will see a scroll bar in bottom upon scroll to right you could see your hidden column.

HTML

<div id="divGrid" class="overflow-scroll" >
    @(Html.Kendo().Grid(Model).Columns(columns =>
    {
        ...
        ...
        ...
    }))
</div>

CSS

.overflow-scroll {
    width: 100%;
    overflow: auto;
}

Else you could set fixed width to each and every column by adding css class in HeaderHtmlAttributes property.

HTML

columns.Bound(o => o.Code).HeaderHtmlAttributes(new { @class = "set-width" });

CSS

.set-width {
    min-width: 90px;
    width: 90px;
}

Answer 2

Now you cannot get much help because this version is not supported anymore. Use

columns.Bound(o => o.Code).HeaderHtmlAttributes(new { @style = "max-width: 40px;" });

If the column width is bigger, set the max width, that means you want to reduce the column size.

If it is smaller set the min width, that means you want to increase the column width.