Minimum Width for Grid Columns

4 Answers 2866 Views
Grid
Bjorn
Top achievements
Rank 1
Bjorn asked on 14 Sep 2016, 01:49 PM

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.

 

4 Answers, 1 is accepted

Sort by
0
Bjorn
Top achievements
Rank 1
answered on 14 Sep 2016, 01:53 PM
OK nevermind, it works!
Patrick | Technical Support Engineer, Senior
Telerik team
commented on 14 Sep 2016, 02:00 PM

Hello Bjorn,

Glad the example is working for you!  

Regards,
Patrick
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Bjorn
Top achievements
Rank 1
answered on 14 Sep 2016, 02:23 PM
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
Top achievements
Rank 1
commented on 04 May 2017, 01:36 PM

it's throwing a "me is not defined" error to me
0
Ivan Zhekov
Telerik team
answered on 08 May 2017, 06:13 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Omid
Top achievements
Rank 1
Iron
answered on 31 Dec 2021, 09:57 PM

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
Telerik team
commented on 04 Jan 2022, 09:33 AM

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

Tags
Grid
Asked by
Bjorn
Top achievements
Rank 1
Answers by
Bjorn
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Omid
Top achievements
Rank 1
Iron
Share this question
or