Minimum Width for Grid Columns

[Bjorn]

This seems to be a pretty good example, but unfortunately it doesn't work:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/apply-minimum-width-during-column-resize

Is this deprecated? The binding to the resizable-events doesn't seem to work.

 

[Omid]

Hello all,

I wanted something like that too, But unfortunatelly there is no way to config min-width in grid options. So I determined the exact(optimum) width for each data column in pixels but no any values for command column. Like this:

{
    field: "Text",
    title: "Message Body",
    width: "162px",
},
{
    field: "LinkUrl",
    title: "Attachment Link",
    width: "220px",
},
{
    commands: [...]
}

But instead checked for the minimum screen width which command column become trimmed in that size. So a min-width style assigned to <table> element using css. Like this:

#myGrid.k-grid table {
    min-width: 520px;
}

And result is: In large screens all columns will be seen in assigned widths clearly and commands column will use the extra space, and about smaller screens, again all data columns will be seen in exact assigned size and commands column has the minimum width for full visiblity and user will need to scroll horizontally.

Another efficient solution is to set min-width using forced css for columns in order. Like this :

#myGrid.k-grid table colgroup > col:nth-child(1) {
    min-width: 100px !important;
}

#myGrid.k-grid table colgroup > col:nth-child(2) {
    min-width: 150px !important;
}

#myGrid.k-grid table colgroup > col:nth-child(3) {
    min-width: 50px !important;
}

I would be so happy if you let me know how much this was useful for you

Regards,

Omid RN

[Georgi Denchev]

Hi, Omid,

Thank you for sharing your approach with the community! I'm sure it'll be helpful for other users who face a similar issue.

Best Regards,

Georgi

[Bjorn]

OK nevermind, it works!

[Patrick | Technical Support Engineer, Senior]

Hello Bjorn,

Glad the example is working for you!  

Regards,
Patrick
Telerik by Progress

 

 

[Bjorn]

var minColumnWidth,
            th,
            field,
            column,
            idx,
            grid = $('#grid').data('kendoGrid');

        grid.resizable.bind("start", function(e) {
            th = $(e.currentTarget).data("th");
            field = th.data("field");
            idx = th.index();

            var column = $.grep(grid.columns, function (item) {
                return item.field === field;
            })[0];

            minColumnWidth = parseInt(column.minwidth,10);
        });

        me.kendoGridObject.resizable.bind("resize", function(e) {
            if (th.width() < minColumnWidth) {
                // the next line is ONLY needed if Grid scrolling is enabled
                grid.thead.closest("table").children("colgroup").find("col").eq(idx).width(minColumnWidth);
                grid.tbody.closest("table").children("colgroup").find("col").eq(idx).width(minColumnWidth);
            }
        });

 

This is our solution, maybe this helps somebody. We're now able to configure the minimum column width through

columns: {
    {
        minwidth:"200px"
    }
}

[Cristian]

it's throwing a "me is not defined" error to me

[Richard]

This should work:
{field:'...',
width:"100%;min-width:200px",
 ...
}

[Ivan Zhekov]

Hi, Christian.

The reason for the snippet not working is because it's out of context e.g. the me variable is specific for Bjorn's project.

In his snippet it stands for a cached reference to the grid object, which in our example (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/apply-minimum-width-during-column-resize) we reference by full identifier e.g. $("#grid").data("kendoGrid"). 

Regards,
Ivan Zhekov
Telerik by Progress