Rendered HTML has three separate tables.

3 posts, 1 answers
  1. Sheng
    Sheng avatar
    6 posts
    Member since:
    Jul 2019

    Posted 13 Sep Link to this post

    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. Answer
    Attila Antal
    Admin
    Attila Antal avatar
    427 posts

    Posted 18 Sep Link to this post

    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.
  3. Sheng
    Sheng avatar
    6 posts
    Member since:
    Jul 2019

    Posted 20 Sep in reply to Attila Antal Link to this post

    Thank you, Attila!
Back to Top