This is a migrated thread and some comments may be shown as answers.

Column Resize - Min Width on Resize

4 Answers 525 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 2
John asked on 25 Feb 2013, 04:40 PM
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-

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 27 Feb 2013, 09:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Garry
Top achievements
Rank 2
Veteran
answered on 20 May 2014, 09:04 AM
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.
0
Dimiter Madjarov
Telerik team
answered on 20 May 2014, 09:39 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Telerik
Top achievements
Rank 1
answered on 18 Mar 2016, 11:53 AM
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!
Tags
Grid
Asked by
John
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Garry
Top achievements
Rank 2
Veteran
Telerik
Top achievements
Rank 1
Share this question
or