Column Alignment

[Robert]

Here's the layout code for a simple RadGrid I've put in my web page:

<telerik:RadGrid ID="radGridSummary" runat="server" AutoGenerateColumns="false" BorderColor="Gray" BorderStyle="Solid" BorderWidth="1" Width="587px"
                 CellPadding="0" GridLines="Both" Font-Size="11px" OnItemDataBound="radGridSummary_ItemDataBound" OnItemCommand="radGridSummary_ItemCommand">
  <HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGridRB" />
  <ItemStyle CssClass="radGridItem" />
  <AlternatingItemStyle CssClass="radGridAltItem" />
  <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" Scrolling-UseStaticHeaders="true" Scrolling-AllowScroll="true" Scrolling-ScrollHeight="200px" />

  <MasterTableView BorderWidth="0" DataKeyNames="TaskID, TaskLevel, TaskActivity">
    <Columns>
      <telerik:GridBoundColumn DataField="TaskDescription" HeaderText="Description" SortExpression="TaskDescription">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Left" />
      </telerik:GridBoundColumn>

      <telerik:GridTemplateColumn HeaderText="Level">
        <HeaderStyle HorizontalAlign="Center" Width="70px" />
        <ItemStyle HorizontalAlign="Center" />
        <ItemTemplate>
          <%-- Note: This needs to remain as a Label, as it's accessed by code in 'IndicateRowDeletion' --%>
          <asp:Label ID="labelLevelName" runat="server" Text='<%# GetLevelDescription(Convert.ToInt32(Eval("TaskLevel"))) %>' />
        </ItemTemplate>
      </telerik:GridTemplateColumn>

      <telerik:GridBoundColumn DataField="ActivityMajTask" HeaderText="Activity" SortExpression="ActivityMajTask">
        <HeaderStyle HorizontalAlign="Center"  />  <%-- Note: Removed Width restriction to allow this one to expand as needed --%>
        <ItemStyle HorizontalAlign="Center" />
      </telerik:GridBoundColumn>

      <telerik:GridBoundColumn DataField="TaskStdHours" HeaderText="Std Hours" SortExpression="TaskStdHours" DataFormatString="{0:F2}">
        <HeaderStyle HorizontalAlign="Center" Width="70px" />
        <ItemStyle HorizontalAlign="Right" CssClass="indentRight20" />
      </telerik:GridBoundColumn>

      <telerik:GridTemplateColumn HeaderText="Completed">
        <HeaderStyle HorizontalAlign="Center" Width="70px" />
        <ItemStyle HorizontalAlign="Center" />
        <ItemTemplate>
          <%-- Note: This needs to remain as a Label, as it's accessed by code in 'IndicateRowDeletion' --%>
          <asp:Label ID="labelCompleted" runat="server" Text='<%# Convert.ToBoolean(Eval("TaskStatus")) ? "Yes" : "No" %>' />
        </ItemTemplate>
      </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
</telerik:RadGrid>

The alignment seemed to be working fine until I enabled AutoScrolling.  Now, as you can see, the alignment is all messed up.

If you could tell me what to do with the Level and Activity columns then I think I could figure out the others.

Robert

[Robert]

In a different forum posting I received some assistance from Galin of Telerik Support, which eventually lead me to the solution for it.  Indirectly, it also helped me better see the problem for this thread.  Please take a look at the enclosed screenshot, which now shows vertical gridlines.

The culprit in all of this is this ClientSettings property:   Scrolling-AllowScroll="true"
If that is absent or set to false then the columns properly align between the header and the data.  I assume this is a bug in the RadGrid but I'm wondering if there's a temporary workaround until the bug is fixed?

My latest layout code is shown below.

Robert

<telerik:RadGrid ID="radGridSummary" runat="server" AutoGenerateColumns="false" EnableEmbeddedSkins="false" Width="587px" GridLines="Both" Font-Size="11px"
                 OnItemDataBound="radGridSummary_ItemDataBound" OnItemCommand="radGridSummary_ItemCommand">
  <HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGridRB" />
  <ItemStyle CssClass="radGridItem" />
  <AlternatingItemStyle CssClass="radGridAltItem" />
  <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" Scrolling-UseStaticHeaders="true" Scrolling-AllowScroll="true" Scrolling-ScrollHeight="200px" />

  <MasterTableView DataKeyNames="TaskID, TaskLevel, TaskActivity">
    <Columns>
      <telerik:GridBoundColumn DataField="TaskDescription" HeaderText="Description" SortExpression="TaskDescription">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Left" />
      </telerik:GridBoundColumn>

      <telerik:GridTemplateColumn HeaderText="Level">
        <HeaderStyle HorizontalAlign="Center" Width="70px" />
        <ItemStyle HorizontalAlign="Center" />
        <ItemTemplate>
          <%-- Note: This needs to remain as a Label, as it's accessed by code in 'IndicateRowDeletion' --%>
          <asp:Label ID="labelLevelName" runat="server" Text='<%# GetLevelDescription(Convert.ToInt32(Eval("TaskLevel"))) %>' />
        </ItemTemplate>
      </telerik:GridTemplateColumn>

      <telerik:GridBoundColumn DataField="ActivityMajTask" HeaderText="Activity" SortExpression="ActivityMajTask">
        <HeaderStyle HorizontalAlign="Center" />  <%-- Note: Removed Width restriction to allow this one to expand as needed --%>
        <ItemStyle HorizontalAlign="Center" />
      </telerik:GridBoundColumn>

      <telerik:GridBoundColumn DataField="TaskStdHours" HeaderText="Std Hours" SortExpression="TaskStdHours" DataFormatString="{0:F2}">
        <HeaderStyle HorizontalAlign="Center" Width="70px" />
        <ItemStyle HorizontalAlign="Right" CssClass="indentRight20" />
      </telerik:GridBoundColumn>

      <telerik:GridTemplateColumn HeaderText="Completed">
        <HeaderStyle HorizontalAlign="Center" Width="70px" />
        <ItemStyle HorizontalAlign="Center" />
        <ItemTemplate>
          <%-- Note: This needs to remain as a Label, as it's accessed by code in 'IndicateRowDeletion' --%>
          <asp:Label ID="labelCompleted" runat="server" Text='<%# Convert.ToBoolean(Eval("TaskStatus")) ? "Yes" : "No" %>' />
        </ItemTemplate>
      </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
</telerik:RadGrid>

[Galin]

Hello Robert,

This is a known issue in IE7 and it is already fixed in the internal build , which you can download from here.

Also, you can waiting for the next stable version - SP1, which will be released in the beginning of this month.

In the meantime, you can use the following JS workaround

function onGridCreated(sender)
{
        if ($telerik.isIE7)
        {
                var masterTable = sender.get_masterTableView().get_element();
                masterTable.removeChild(masterTable.tHead);
        }
}

I hope this helps.

All the best,
Galin
the Telerik team

[Robert]

Thanks for your feedback, Galin.

I have the scroll working correctly via a parent DIV.  The only real advantage of letting your RadGrid handle the scrolling is that the header row could remain in place.

If a future version handles everything correctly then I may drop the DIV in favour of using just your control.