strange behavior in IE when adding columns via header menu

[sean]

     There are several differences between IE and Firefox related to adding (or removing) columns to a grid via the header menu.  This Telerik example shows one:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/savinggridsettingsonperuserbasis/defaultcs.aspx

In that example, when columns are removed, in IE, the grid frame stays the original size, but the remaining columns shrink, so they do not occupy the available space correctly.  This does not happen in FF.  The IE behavior definitely looks buggy.

     I'm seeing a similar behavior in an application I am about to ship.  To address it, I am going to try to Postback to the server, but, there is no event that fires when the HeaderMenu is finished its work.  The columnShown and hidden Events seems to fire for every checkbox that is toggled, which is much too often.  Can anyone suggest a way to execute a Postback after the HeaderMenu closes?

     The demo linked above does not have a horizontal scrollbar, and not having one creates some strange behaviors.  But, in my app there is a horizontal scrollbar, and that causes more bad behavior in IE that FF handles differently.

     In that case, with a horizontal scrollbar, when columns are added in IE that cause the grid width to be a lot larger than it was, frequently the RadGrid won't show the last column.  When the user tries to scroll, the scrollbar will bounce back, away from the right-side edge, and the last column will be inaccessible.  This is worse than the IE behavior that can be seen in the link above, but I didn't see any official Telerik examples that had both column selection from the HeaderMenu and a horizontal scrollbar. 

Is this known to not work in IE?

thanks for any help,

Sean

[Pavlina]

Hello Sean,

The described issue under IE is browser specific behavior, caused by table-layout:fixed. Can you please check whether setting TableLayout = Auto helps to resolve the problem?
 
Moreover, you can refer to the online example below which is working properly:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/clientsideapi/defaultcs.aspx

Regarding the horizontal scrollbar issue - can you please verify that you are using latest version in your application?

Regards,
Pavlina
the Telerik team

[sean]

Hi,
     Thanks for the feedback.  I'll try the "TableLayout = Auto " setting.  What element should that be applied to:  the <RadGrid> or the <DIV> that contains it? 

     You also asked about my RadGrid version.  It is the current point release from a few weeks ago.

     But regarding the link to "http://demos.telerik.com/aspnet-ajax/grid/examples/client/clientsideapi/defaultcs.aspx", its really not a fair comparison.  The big difference is that in your link, there is no "right-click" option for manipulating columns.  That feature lets the user add and remove many columns very quickly, with the grid changing in the background in real time, behind the popup-menu.  In all that concurrent real-time action is where the opportunity for the horizontal scrollbar to get confused comes from. 

     In the link you offered, the only way to for the user to add or remove columns is one by one, with a distinct button-click between column choices.  I think the UI tools and behavior in the first link should be reviewed further, especially with a horizontal scrollbar.

     However, I was able to get a satisfactory javascript solution by setting a dirty-flag on the client-side columnShow/columnHide events.  Then on menuMouseOut, I do a postback, which also serves to serialize and save the grid layout.

    

[Pavlina]

Hi Sean,

You should set TableLayout property as shown below:

<MasterTableView TableLayout="Auto">

I hope this helps.

Kind regards,
Pavlina
the Telerik team