Column Resize - Min Width on Resize

[John]

I am trying to prevent a user from resizing a column too small:

In the demo, if you sort, then resize the sorted column, you can't see the sort arrow or the title

http://demos.kendoui.com/web/grid/column-resizing.html

Is there a way to dynamically set the columnWidth?

I have tried to connect to the columnResize event and check if the newWidth is less than x then set it to y.
However, the setting of the $el.column.width does not actually redraw it.

Any suggestions?  Maybe I need to do a refresh after I reset it?  I'd prefer them to not be able to drag past a minimum.

I also tried setting min-width on all sorts of css:
.k-grid-header, .k-header, .k-header > a

-me-

[Dimiter Madjarov]

Hello John,

You are right, that you should bind to the columnResize event of the grid. In the handler, you should check if the width of some <col> element is below the specified value.
E.g.

.Events(e => e.ColumnResize("columnResize"))

function columnResize(e) {
    $("#Grid colgroup col").each(function () {
        if ($(this).width() < 90) {
            $(this).css("width", "90px");
        }
    })
}

You could also use the same approach only for a single column if needed
E.g.

function columnResize(e){
    $("#Grid colgroup").each(function() {
            if($(this).width() < 90){
                $(this).find(":nth-child(1)").css("width","90px");
            }
        }
    )
}

  All the best,
Dimiter Madjarov
the Telerik team

[Garry]

This is an incomplete answer - where do I add the [.Events(e => e.ColumnResize("columnResize"))] code you mentioned above?
I am using client-side KendoUI and Javascript so the solution needs to fit with the KendoUI philosophy.

G.

[Dimiter Madjarov]

Hello Garry,


You could take a look at the following documentation page about the columnResize event. It also includes an example demonstrating how to bind to the event in the Kendo UI Web Grid.

Regards,
Dimiter Madjarov
Telerik

 

 

[Telerik]

Hi

I have been working on some javascript code that will help achieve this functionality. The motivation behind this was to provide a way in which a command column can be prevented from having its size changed. 

In one regard, this does act as a minimum size for a column, but if the grid were to increase in size, the original size is enforced. This allows for other grid cells to increase in size by a larger amount.

Anyway here is a link to a dojo that shows this code in action: http://dojo.telerik.com/@telerik/ikIyU/9

Note that all columns are required to have a width specified (this effectively becomes a minimum width).

The browser resize event is used to trigger the size recalculation of the grids.

This function supports client detail and grouping.

I have not considered column resizing at this point.

If you have any ideas for improvements then go for it!