Rendered HTML has three separate tables.

[Sheng]

In my project, on one of the page, the HTML rendered by RadGrid contains three HTML tables (one for header, one for data, and one for footer).

But on another page, the HTML rendered contains only one HTML table.

I can't figure out what settings are affecting the different rendering layout. Please advise.

Thanks!

[Attila Antal]

Hi Sheng,

 

Most likely that Scrolling is enabled together with UseStaticHeader. In order to handle scrolling of data while keeping the Header on the top, RadGrid renders tables separately for the Headers, Data and Pager.

 

Example RadGrid configuration with scrolling and Static Header:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="3" OnNeedDataSource="RadGrid1_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>

 

Rendered HTML:

<div class="RadGrid">
    <div class="rgHeaderWrapper">
        <div class="rgHeaderDiv">
            <%-- Column Header is stored in this Table --%>
            <table>
                <colgroup></colgroup>
                <thead>
                    <tr>
                        <th>ColumnName</th>
                    </tr>
                </thead>
                <tbody style="display: none"></tbody>
            </table>
        </div>
        <div class="rgDataDiv">
            <%-- Cell data stored in this Table --%>
            <table>
                <colgroup></colgroup>
                <thead style="display: none"></thead>
                <tbody>
                    <tr>
                        <td>Cell data</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <%--RadGrid Pager displayed in this Table --%>
        <table></table>
    </div>
</div>

 

RadGrid without hierarchy or Scrolling would only render one HTML Table for everything.

Example of basic RadGrid configuration:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="3" OnNeedDataSource="RadGrid1_NeedDataSource">
</telerik:RadGrid>

 

Rendered HTML:

<div class="RadGrid">
    <table class="rgMasterTable">
        <colgroup></colgroup>
        <%-- RadGrid Header --%>
        <thead></thead>
        <%-- RadGrid Pager --%>
        <tfoot></tfoot>
        <%-- RadGrid Cell Data --%>
        <tbody>
            <tr class="rgRow">
                <td>1</td>
            </tr>
            <tr class="rgAltRow">
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

 

Kind Regards,
Attila Antal
Progress Telerik

[Sheng]

Thank you, Attila!