Grid renders differently from development when in production

[Condorito]

Hi, we have a grid that for some reason renders differently from our PCs when we publish our web application to production.  The grid has static column headers, and we set its width to 100%.  For some reason, when we develop it in our PCs, it displays perfectly, with the content taking up the entire grid.  When we publish the same exact code to our production server (or any other server so that the application is not running locally on our PCs when we access it), and the grid is still set to 100%, but the content doesn't take up the whole grid.  When I run the rendered HTML code through WinDiff, it tells me that the following line renders differently:

In development:

<table cellspacing="0" class="rgMasterTable rgClipCells" border="0" id="Domestic_userControl_rgDomestic_ctl00_Header" style="width:100%;table-layout:fixed;overflow:hidden;text-overflow:ellipsis;empty-cells:show;">

In production:

<table cellspacing="0" class="rgMasterTable rgClipCells" border="0" id="Domestic_userControl_rgDomestic_ctl00_Header" style="table-layout:fixed;overflow:hidden;text-overflow:ellipsis;empty-cells:show;">

Notice how in development it adds "width: 100%".  Both are using the same exact code however:

<telerik:RadGrid runat="server" ID="rgDomestic" AllowFilteringByColumn="true"
                                    AllowSorting="true"  ShowFooter="True" EnableLinqExpressions="false"
                                    AllowPaging="True"  AllowMultiRowSelection="true"
                                    ShowGroupPanel="true" ShowHeader="true"
                                    PageSize="15"

                                 AutoGenerateColumns="false">
                                 <ClientSettings Selecting-AllowRowSelect="true"  ClientEvents-OnGridCreated = "DomesticGridCreated"  AllowDragToGroup="true" AllowGroupExpandCollapse="true"  EnableRowHoverStyle="true" ClientEvents-OnRowDblClick="RowDoubleClick" >
                              <Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="true" FrozenColumnsCount="2"/>
                             </ClientSettings>
                             <GroupingSettings ShowUnGroupButton="true" />
                                   <MasterTableView GroupsDefaultExpanded="false" GroupLoadMode="Client" HierarchyLoadMode="Client" ClientDataKeyNames="DocNum" DataKeyNames="DocNum">
                                            <Columns>

I attached two Screenshots, capture1 of the production result which doesn't seem to render correctly, and capture2 which is the result when we run it locally on our PCs which does seem to render correctly.  Why could this be happening?

Thank you!

[Dimo]

Hi Juan,

The different appearance is caused by IE8 running in different modes when you are looking at the dev and production sites.

I recommend you to set explicit column widths (or MasterTableView width) in order to ensure consistent look in all cases. By the way, I don't see where you have set a 100% width.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Condorito]

What do you mean by IE8 running in different modes?  We are using the same browser with the same settings for both instances.

We are not explicitly setting the width to 100% anywhere, that is the rendered code.  If you compare the first 2 code entries I supplied of the tables, that is the rendered code.  One of them has a settings of 100% and the other does not.

I tried setting the MasterTableView Width to 100% to no effect.  We are already hard coding the widths of each column and we are still getting the same behavoir.

The real problem here is that the Filtering row is all out of alignment  in production.  How do you suggest I fix this?

Thanks.

[Dimo]

Hi Juan,

Here is some more information about IE8 modes:

http://blogs.msdn.com/ie/archive/2008/01/21/compatibility-and-ie8.aspx

(Note that MS decided to make the IE8 standards mode default after publishing the above article.)

So, judging by your screenshots, you have IE8 standards mode triggered when browsing the dev site, and IE7 (IE8 compatibility mode) triggered when browsing the production site.

In either case, the columns are too small to fit their content. Please set some larger column widths, or a larger width for the MasterTableView. In addition, you can use the FilterControlWidth property of each column to set width to the filtering textbox.

When setting column widths, you should be aware that IE8 and IE7 handle them differently - IE7 adds the cell paddings to the column width, so the columns are actually wider than specified. This means you will have to set a little larger column widths, so that the RadGrid looks OK in IE8 (and Firefox).


Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Karl]

I have exactly the same issue. The filter row doesn;t seem to layout correctly. I have attached 3 images.

Image 1 shows the header of my grid in IE8 with compatibility mode turned off.
Image 2 shows the same header in the same browser with compatibility turned on.
Image 3 shows the same setup as image2, but with the FilterControlWidth set to 50px, which is much narrower than the filter icon's required space.

The code for the first column (Customer Reference) is shown here...

Code used to generate Images 1 and 2...

<telerik:GridBoundColumn
        HeaderText="Customer reference"
        DataField="External_Document_No"
        SortExpression="External_Document_No"
        FilterControlWidth="108px"
        FilterListOptions="VaryByDataType"
    >
    <HeaderStyle    HorizontalAlign="Left"      Width="158px" />
    <ItemStyle      HorizontalAlign="Left"      Width="158px" />
</telerik:GridBoundColumn>

code used to generate image 3....

<telerik:GridBoundColumn
        HeaderText="Customer reference"
        DataField="External_Document_No"
        SortExpression="External_Document_No"
        FilterControlWidth="50px"
        FilterListOptions="VaryByDataType"
    >
    <HeaderStyle    HorizontalAlign="Left"      Width="158px" />
    <ItemStyle      HorizontalAlign="Left"      Width="158px" />
</telerik:GridBoundColumn>

It seems that the FilterControlWidth option is only setting the textbox and not the overall width of the filter item (the textbox and the filter button)

Any ideas?

[Pavlina]

Hello Karl,

To overcome this problem you could try setting <nobr> tag around the filter cells. Please examine the attached project which is working as expected and let me know if other questions or problems arise.

All the best,
Pavlina
the Telerik team