RadGrid column alignment in Firefox

[Dan Ware]

Hi

I have always been able to solve issues with RadGrid myself but this one has me stumped.  I am binding the RadGrid using client-side javascript - I have set scrolling and fixed headers.

The columns are not aligning in Firefox but this is not due to any other issues mentioned in the forums, it is due to an inline style on the header div (the one with "rgHeaderDiv" class) being set to "width:100%".  This means that there is no space in the header above the scroll bar which throws off the alignment of the columns (if the scroll bar is displayed, otherwise it lines up nicely).

Using Firebug I can remove this style rule and everything looks fine.  It also works if I don't use "true" client-side binding (the style rule is only output if the page is small enough to not require scrolling), but that's not much of an answer.  In IE it always leaves space for the scroll bar in header rows and item rows, which is much more acceptable behaviour.

Do you have an elegant solution for this scenario?

Many thanks in advance,
Dan

[Dimo]

Hello Dan Ware,

Indeed, this is a known issue when using static headers and client-side binding. We will address it for some of the coming releases of RadControls. In the meantime, you can readjust the RadGrid layout manually (after data binding it) by using the following Javascript method.

gridClientObject._scrolling._initializeDimensions();

If you are using automatic table layout (in your case - no column widths set and no TableLayout="Fixed" set for the MasterTableView), then you will also need the following two lines before calling initializeDimenstion():

gridClientObject.get_masterTableView().get_element().style.tableLayout = "auto";
gridClientObject.get_masterTableViewHeader().get_element().style.tableLayout = "auto";

Greetings,
Dimo
the Telerik team

[Dan Ware]

Hi Dimo,

Thanks for the reply - unfortunately it didn't work for me this time.  I do have the table layout set to fixed and I have explicitly set headerstyle widths to all of the columns.

Here are some steps to reproduce this particular behaviour;

* the page is using similar functionality to the demo in Grid/Examples/Client/DataBinding
* in the (javascript) pageLoad() function, I am hiding the grid using this line:

$find("<%= RadGrid1.ClientID %>").get_element().style.display = 'none';

* when the user enters their filtering options in the search form and clicks the search button, I reveal this grid using this line:

gridUser.get_element().style.display = '';

Otherwise the functionality is very similar to the demo mentioned above.  Naturally the grid is being initialised with the header item being set to "width: 100%" (although it still has the "margin-right: 17px" for the scroll bar space).  I just wanted a quick way to remove that rule.

Regards,
Dan

[Dan Ware]

I guess the initial subject was wrong - this is an issue when toggling visibility "on load" and effects most browsers other than IE (including Firefox, Opera, Chrome and Safari), IE must be handling it incorrectly.

Should I use a different method to hide the grid when the page loads or should I continue trying to find a way to remove the "width: 100%" style rule..?

[Dimo]

Hello Dan,

Well, as you know, you can change any style of any element on the page by using DOM operations.

Javascript size calculations do not work for DOM elements, which are placed inside a container with a display:none style. This may or may not be relevant to your scenario.

Kind regards,
Dimo
the Telerik team

[Dan Ware]

My mistake - although the above steps reproduce the behaviour, but that was not my problem.  My problem is that the scroll height matches the page size if the rows do not contain line breaks.

This can be reproduced very easily, with a page size of 10, set the scroll height to the correct size of 10 rows - then ensure at least one of the datafields contain a "<br />" (or by not adding itemstyle wrap="false" and binding to a very long string).

This is because of the nature of client-side binding - the initial grid container is rendered without scrollbars as it is assumed to be tall enough to fit the records.  However, in IE the gap for the scrollbar remains in the header and data areas regardless, so there is no problem in that browser.

I wanted the scroll bar to appear only if the records were wrapped.

Following your advice, I have added this line after the databind (although I hoped for a better way to reference this element);

$find("<%= RadGrid1.ClientID %>").get_element().getElementsByTagName("*")[0].style.width='';

This only works if the scroll bar is visible, otherwise the columns not aligned again.  Is there a javascript call to determine if the scroll bar is visible?




Thanks for your help so far, Dimo!

[Dan Ware]

As a follow-up (and in case someone else runs into this problem), here is the solution that I used;

  document.getElementById(gridUser.get_id() + '_GridHeader').style.width = '';
  document.getElementById(gridUser.get_id() + '_ctl00').style.width = '718px';

Note that the gridUser variable is the RadGrid itself.  The second element above is the data portion of the grid, and is set to the width of the RadGrid minus the 17 pixels used by the scroll bar.

It's not very elegant, but it behaves just as it does in IE now which is good enough for me!