Setting a minimum width on column

[Joakim Nilsson]

Hi,

I have a radgrid that is flexible in width. All columns except one has a defined headerstyle-width. The column without width is supposed to claim all width that is available depending on how wide the screen of the user is.

My problem is that if the user resizes his/hers window to small the column without width specified gets the width 0 and is not visible to the user. I want to set a minimum width of that column.

How do I go about doing this?

/Joakim

[Dimo]

Hello Joakim,

Unfortunately table columns do not support minimum width, so it will be easier for you to set a min-width CSS style to the RadGrid control.

Sincerely yours,
Dimo
the Telerik team

[Joakim Nilsson]

Could you give an example?

Thanks!

/Joakim

[Dimo]

<telerik:RadGrid  style="min-width:800px"  />

Note that the min-width style is not supported by IE6. If you must support this browser as well, then you can subscribe to the browser window resize event, get the RadGrid width (gridClientObject.get_element().offsetWidth) and set a larger one if needed with

(Javascript)

gridClientObject.get_element().style.width = "800px";
gridClientObject.repaint(); // if you are using scrolling with static headers

http://www.telerik.com/help/aspnet-ajax/grdgettingradgridclientobject.html


Regards,
Dimo
the Telerik team

[John]

We need to set a minimum width on each column since if a user resizes the column too small, it cannot be recovered without a full refresh.  Is there some way to set the minimum width of each column somehow?

[Shinu]

Hello John,

Check the following demo.
Grid / Column/Row Resize/Reorder

-Shinu.

[John]

Setting a minimum width on the grid as a whole does nothing to prevent the userfrom making a column disappear by dragging the column size bar too far.  What is needed is a minimum width on the column.

[John]

I cannot get that demo to actually allow resizing of the columns.  We do want the columns to be resizable, but not to zero width.

[Galin]

Hi John,

You can achieve this with the following JavaScript function

function ColumnResizing(sender, args)
{
    if (args.get_gridColumn()._columnResizer._currentWidth < 200)
    {
        args.set_cancel(true);
    }
}

I hope this helps.

All the best,
Galin
the Telerik team

[Xavier]

Could you please give the TypeScript version of this code?

When I tried your code, I get TypeScript error

"

Types of property 'columnResize' are incompatible.
    Type '(sender: any, args: any) => void' is not assignable to type '(e: GridColumnResizeEvent) => void'

"

[Galin]

Hi Xavier,

Attached to this post you can find a sample web page demonstrating the suggested approach. Please examine it and let me know how it goes.

Regards,
Galin
Telerik

 

 

[Xavier]

Cool, thanks.

My mistake. I am using Kendo UI grid so I will post a separate question on it.