Header Item Misalignment

[Justin Blanchard]

v.2010.3.1317.40

I am using the grid client side databinding with vertical scrolling and static headers. I initially set the page size to 50 so the scrolling takes affect when the grid is bound. On the gui when i change the page size or filter the grid so that the scroll bar becomes unnecessary the grid header and item rows become misaligned. This misalignment happens on IE9/IE9 Compatibility, Chrome, FireFox, and Opera. The grid is in a div width 950px. I have also tried removing all header widths and div width and the misalignment still happens. I am not using ItemStyle-Widths or GridLine properties. Here is the grid and the type of client side databinding. Also i have attached the images of what is happening.

How do i get the header and item rows to align when I change the page size or filter?

I did just see something interesting happen as i was entering this post and retesting the grid. I was using IE9 with the menu bar hidden. I then changed the page size and the grid misaligned. I then clicked alt to show the menu and the grid aligned itself. If i could make the grid do this when after databinding thing would be great.

<telerik:RadGrid ID="gProducts" runat="server" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" PageSize="50"
           AllowMultiRowSelection="true" Width="100%">
           <ItemStyle Font-Size="8pt" Height="10px" />
           <AlternatingItemStyle Font-Size="8pt" Height="10px" />
           <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
           <ClientSettings>
               <Scrolling AllowScroll="true" ScrollHeight="100%" UseStaticHeaders="true" />
               <ClientEvents OnCommand="gProducts_Command" />
               <Selecting AllowRowSelect="true" />
           </ClientSettings>
           <MasterTableView ClientDataKeyNames="StockingListItemID" CommandItemDisplay="Top" TableLayout="Auto">
               <CommandItemTemplate>
                   <div style="height: 30px; text-align: right;">
                       <asp:Button ID="imgCancelChanges" runat="server" Text="Cancel" ToolTip="Cancel changes" Height="24px" Style="cursor: pointer;
                           margin: 2px 5px 0px 0px;" OnClientClick="CancelChanges(); return false;" />
                       <asp:Button ID="imgProcessChanges" runat="server" Text="Save" ToolTip="Save changes" Height="24px" Style="cursor: pointer;
                           margin: 2px 5px 0px 0px;" OnClientClick="ProcessChanges(); return false;" />
                       <asp:Button ID="btnEditMarkup" runat="server" Text="Edit Selected Rows" Height="24px" Style="cursor: pointer; margin: 2px 5px 0px 0px;"
                           OnClientClick="OpenWindow(); return false;" />
                   </div>
               </CommandItemTemplate>
               <Columns>
                   <telerik:GridBoundColumn UniqueName="SKU" DataField="SKU" HeaderText="Product #" ReadOnly="True" HeaderStyle-Width="80px" />
                   <telerik:GridBoundColumn UniqueName="ProductName" DataField="ProductName" HeaderText="Product Name" ReadOnly="True" HeaderStyle-Width="200px" />
                   <telerik:GridBoundColumn UniqueName="ManufacturerPartNumber" DataField="ManufacturerPartNumber" HeaderText="Mfg #" ReadOnly="True"
                       HeaderStyle-Width="85px" />
                   <telerik:GridBoundColumn UniqueName="ManufacturerName" DataField="ManufacturerName" HeaderText="Mfg Name" ReadOnly="True"
                       HeaderStyle-Width="155px" />
                   <telerik:GridBoundColumn UniqueName="Cost" SortExpression="" DataField="Cost" HeaderText="" DataFormatString="{0:c}" ReadOnly="True"
                       HeaderStyle-Width="60px" />
                   <telerik:GridTemplateColumn UniqueName="Markup" HeaderText="Markup" SortExpression="Markup" HeaderStyle-Width="80px">
                       <ItemTemplate>
                           <telerik:RadNumericTextBox ID="txtMarkup" ShowSpinButtons="true" IncrementSettings-InterceptArrowKeys="true" IncrementSettings-InterceptMouseWheel="true"
                               runat="server" MinValue="0" MaxValue="100" Type="Percent" Width="75px" Height="10px">
                               <ClientEvents OnValueChanged="markupChanged" />
                           </telerik:RadNumericTextBox>
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
                   <telerik:GridBoundColumn UniqueName="GlobalMarkup" DataField="GlobalMarkup" HeaderText="Gl Markup" DataFormatString="{0:p}"
                       HeaderTooltip="Global Markup" ReadOnly="True" HeaderStyle-Width="75px" />
                   <telerik:GridBoundColumn UniqueName="Price" SortExpression="" DataField="Price" HeaderText="Price" DataFormatString="{0:c}"
                       ReadOnly="True" HeaderStyle-Width="60px" />
               </Columns>
           </MasterTableView>
       </telerik:RadGrid>

function updateGrid(result) {
 tableView.set_dataSource(result.d);
 tableView.dataBind();
}

[Pavlina]

Hello Justin Blanchard,

I followed your scenario and I was able to replicate the described problem. However, to be able to resolve it you should call the repaint() method manually via Javascript as shown below:

<ClientEvents  OnDataBound="DataBound" />

function DataBound(sender, args) {
                  var grid = $find("<%= RadGrid1.ClientID %>")
                  grid.repaint();
              }

Moreover, attached to this message is the project that I used for testing. Check it out and let me know if other questions or problems arise.

Regards,
Pavlina
the Telerik team

[Justin Blanchard]

Thank you that did it.

[Manoj]

Hi,

I am getting the formatting problem in RADGRID. the header columns are not getting aligned with the code.

Kindly, see the below code and suggest a solution:


 <rad:radgrid id="rgvCRSummary" runat="server" gridlines="both" height="115px" isdynamic="False"
                                                    skin="Master" skinspath="~/App_Themes/MasterTheme/Skins" width="100%">
 <HeaderStyle CssClass="Grid_headerHP" />
 <ItemStyle CssClass="Grid_ItemHP"  />
<AlternatingItemStyle CssClass="Grid_ItemHP"  /> 
<SelectedItemStyle  CssClass="Grid_SelectedHP" /> 
<MasterTableView EnableColumnsViewState="true" TableLayout="Fixed" Width="100%">
<Columns>
<rad:GridBoundColumn DataField="heading" UniqueName="heading" DataFormatString = "<nobr>{0}</nobr>"><HeaderStyle Width="30%" /></rad:GridBoundColumn>
<rad:GridBoundColumn DataField="sales_pos" HeaderText="<nobr>Sales Position</nobr>" UniqueName="sales_pos" DataFormatString = "<nobr>{0}</nobr>"></rad:GridBoundColumn>
<rad:GridBoundColumn DataField="Geo" HeaderText="Geography" UniqueName="Geo" DataFormatString = "<nobr>{0}</nobr>"></rad:GridBoundColumn>
<rad:GridBoundColumn DataField="Acc" HeaderText="Account" UniqueName="Acc" DataFormatString = "<nobr>{0}</nobr>"></rad:GridBoundColumn>
<rad:GridBoundColumn DataField="Presc" HeaderText="Prescriber" UniqueName="Presc" DataFormatString = "<nobr>{0}</nobr>"></rad:GridBoundColumn>
</Columns>
</MasterTableView>
</rad:radgrid>

Please find the attached file as my web page having RadGrid.
I am using the  radgrid version 5.1.1.0 and IE8 as my web browser.
Please suggest me how can we resolve with this misalignment of column with this version.

Thanks,
Manoj Singh