Problem with real time column resizing and

[Waynen12]

Hi,

I'm having an issue with real time column resizing on a rad grid. 
I can actually reproduce the issue on your demo page here:

http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/column-row-resize-reorder/defaultcs.aspx

Choose the No wrap for cell content and allow resize to fit options. 

Resize the postal code and address columns by moving them right so that the browser window horizontal scroll bar appears (screenshot 1).
Scroll the window completely to the right. 
Attempt to resize the postal code column to the left. 
The left hand side of the grid shoots to the right very quickly. 
In some cases like in  screenshot 2, the address column is lost. 
Sometimes the columns get reordered. 
 
I've seen it in all browsers.
 
 I know that in the grid on your demo it does not make sense to make the grid this wide. But in our own grids we have a lot more content so resizing to this type of width is necessary. 
 
 Would you have any suggestions to eliminate this issue?
 
 Thanks

[Venelin]

Hello Waynen,

A possible workaround is to enable the scroll bar of the grid, and set ClientSettings-Resizing-ResizeGridOnColumnResize="false". Thus, RadGrid won't cause the page's scroll to appear and rather use the grid's scroll.

Regards,
Venelin
Telerik

 

 

[Waynen12]

Hi Venelin,

Thanks for the reply. 
On our own grids we actually use the grid's scrolling instead of the page's and the problem still occurs. 
This is the Skin we use for most of our Radgrids.

<telerik:RadToolbar runat="server" Width="100%"  />

<telerik:RadGrid runat="server" AllowPaging="True" GridLines="None"
                 PageSize="15" AllowSorting="True" AllowMultiRowSelection="false"
                 AutoGenerateColumns="false" EnableLinqExpressions="false" GroupingEnabled="False">
    <FilterMenu EnableAjaxSkinRendering="true" />
    <GroupingSettings ShowUnGroupButton="True" CaseSensitive="false" />
    <ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True"
                    ReorderColumnsOnClient="False" EnableRowHoverStyle="True" >
        <ClientEvents OnRowClick="RowClick" />
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="true" />
        <Resizing AllowColumnResize="true"  ClipCellContentOnResize="True" ResizeGridOnColumnResize="True" AllowResizeToFit="True" EnableRealTimeResize="True" />
    </ClientSettings>
    <MasterTableView TableLayout="Fixed" Width="100%" >
    </MasterTableView>
</telerik:RadGrid>

[Waynen12]

I forgot to mention that changing the ResizeGridOnColumnResize option to false doesn't seem to help. 

[Venelin]

Hello Wayne,

On my side the grid works as expected, i.e. the width is fixed and the resizing causes a horizontal scroll bar to appear whenever the content overflows. Therefore I have captured a short video and attached the sample project to this post. Please check them and try to see which are the relevant differences with respect to your real project that may cause the described behavior.

Note: I have tested with latest version of the controls.

Regards,
Venelin
Telerik

 

 

[Waynen12]

Hi Venelin,  

I took your demo application and tried it out with the
latest version of the controls. I'm able to reproduce the issue there too.
Looking at your screen cast, you scroll the grid to the right but then move it
back to the left before trying to reduce the column width. If you leave it at
the right the issue occurs.
I also added a few more columns to the grid which show the
issue more clearly.  

If you move columns 4 - 5 to the right. Then scroll the grid over to the right. reducing the size of the column 4 causes column 3 to shoot to the right and go missing. 
I don't have screen capture software set up a the moment but I can get it if it will make it a little clearer. 

Thanks,

Wayne

[Venelin]

Hi Wayne,

Thank you for clarifying the situation, I am able to reproduce the described behavior however it is imposed by the browser and rather expected. The browser tries to compensate the scroll width first (when scrolled to right) giving the impression that the resizing is from "left to right". What you can try to do in this case is to set min with or cancel the resizing event before to column becomes too small.

Regards,
Venelin
Telerik

 

 

[Waynen12]

Hi Venelin,

Thanks for the explanation.
I'll try both of those options and see if they help. 

Wayne.

[Waynen12]

I found that setting a min-width for the columns and setting AllowColumnsReorder to false pretty much prevents this issue. 

We'll need to decide if this is a big enough issue to justify turning off column reordering. 

thanks.