Kendo Grid初始列大小

Question

I am trying to get my initial column widths correct for my Kendo Grid. This is driving me crazy!

My grid is like the following...

<table class="MyTableClass">
    <thead>
        <tr>
            <th>
                @(Html.Kendo().Grid(Model.MyModel).Name("myGrid").HtmlAttributes(new { @class = "shadow", style = "height:40%;width:100%" })
                    .Extra(false)
                    .Operators(...)
                    .Resizable(resize => resize.Columns(true))
                    .Sortable().Scrollable().Pageable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
                    .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(25))
                    .Columns(columns =>
                        columns.Bound(p => p.Property1).Title("MyProperty1").ClientTemplate("...");
                        columns.Bound(p => p.Property2).Title("MyProperty2").ClientTemplate("...").Width(100);
                        columns.Bound(p => p.Property3).Title("MyProperty3").ClientTemplate("...");
                        columns.Bound(p => p.Property4).Title("MyProperty4").ClientTemplate("...").Width(100);

...

as you can see I have set widths for all but two of the columns which I want to take up the rest of whatever the width is. This works great except when the width is small the two columns without the explicit width setting are basically zero width and therefore seems missing.

I am trying to set a minimum width on the columns (that don't have the width explicit) where if it is less than 100 then it sets the width to 100.

I've tried everything I can think of and got close with calling the following on document load...

function setColumnMinimumWidths() {
    $("#myGrid colgroup col").each(function () {
        if ($(this).width() < 100) {
            $(this).css("width", "100px");
        }
    })
}

this does the trick but then after resizing the window all the other columns now resize evenly (ignoring the explicit widths).

any kendo or javascript experts out there that have any ideas?

Answer 1

If you have in your grid some columns that have fixed grid and some doesn't, columns with width property will have provided width and rest of the columns will take rest of the place divided equally.

The simplest thing you can do is set minimum width of the grid in css:

#grid{
    min-width: 400px;
}

Check this example: http://dojo.telerik.com/OHOku