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

Problem with real time column resizing and

8 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Waynen12
Top achievements
Rank 1
Waynen12 asked on 05 Dec 2014, 01:00 PM
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

8 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 10 Dec 2014, 07:26 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Waynen12
Top achievements
Rank 1
answered on 10 Dec 2014, 09:18 AM
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>
0
Waynen12
Top achievements
Rank 1
answered on 10 Dec 2014, 09:19 AM
I forgot to mention that changing the ResizeGridOnColumnResize option to false doesn't seem to help. 
0
Venelin
Telerik team
answered on 12 Dec 2014, 07:28 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Waynen12
Top achievements
Rank 1
answered on 12 Dec 2014, 12:53 PM
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







0
Venelin
Telerik team
answered on 17 Dec 2014, 09:55 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Waynen12
Top achievements
Rank 1
answered on 18 Dec 2014, 08:25 AM
Hi Venelin,

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

Wayne.
0
Waynen12
Top achievements
Rank 1
answered on 19 Dec 2014, 09:41 AM
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. 


Tags
Grid
Asked by
Waynen12
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Waynen12
Top achievements
Rank 1
Share this question
or