This is a migrated thread and some comments may be shown as answers.

Rendered HTML has three separate tables.

2 Answers 35 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sheng
Top achievements
Rank 1
Iron
Sheng asked on 13 Sep 2019, 03:24 PM

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!

2 Answers, 1 is accepted

Sort by
0
Accepted
Attila Antal
Telerik team
answered on 18 Sep 2019, 11:26 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Sheng
Top achievements
Rank 1
Iron
answered on 20 Sep 2019, 02:28 PM
Thank you, Attila!
Tags
Grid
Asked by
Sheng
Top achievements
Rank 1
Iron
Answers by
Attila Antal
Telerik team
Sheng
Top achievements
Rank 1
Iron
Share this question
or