Telerik UI for Windows 8 HTML

This article will show and explain the HTML output and CSS classes of RadGrid in a basic scenario, without any features enabled.

Basic HTML Output

The HTML output of a simple RadGrid control without any client features is the following (some HTML attributes have been removed for simplicity):

HTML Copy imageCopy
<div class="t-table-view" data-win-control="Telerik.UI.RadGrid">
    <div class="k-grid k-widget">
        <div class="k-grid-header">
            <div class="k-grid-header-wrap">
                <table>
                    <colgroup>
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="k-header">Header 1</th>
                            <th class="k-header">Header 2</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- .k-grid-header-wrap -->
        </div>
        <!-- .k-grid-header -->
        <div class="k-grid-content">
            <table>
                <colgroup>
                    <col>
                    <col>
                </colgroup>
                <tbody>
                    <tr>
                        <td>Column 1 Row 1</td>
                        <td>Column 2 Row 1</td>
                    </tr>
                    <tr class="k-alt">
                        <td>Column 1 Row 2</td>
                        <td>Column 2 Row 2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- .k-grid-content -->
    </div>
    <!-- .k-grid .k-widget -->
</div>
<!-- .t-table-view -->

Class/selector name

Description

.t-table-view

The RadGrid wrapper element (the one that is passed in the control's constructor).

.k-grid.k-widget

The wrapper of the grid widget.

.k-grid-header .k-grid-header-wrap

The wrapper elements of the grid header row. It has overflow: hidden applied to prevent the header from going beyond the grid boundaries.

.k-grid-header-wrap > table

The control's header data container which holds a number of column headers according to the datasource or control configuration. The header contains a <thead> element with the header row, and a <colgroup> element with <cols>, which may define column widths and visibility. table-layout is set to fixed, which causes the non-fitting cell content to be clipped, otherwise it would overflow to the next column.

.k-grid-content

Wrapper element of the grid content. It has overflow: hidden applied to prevent grid content from going out of the grid boundaries.

.k-grid-content > table

The control's data container with a number of columns and rows, according to the datasource or control configuration. It contains a <tbody> element with the data rows and a <colgroup> element with <cols>, which may define column widths and visibility. table-layout is set to fixed, which causes the non-fitting cell content to be clipped, otherwise it would overflow to the next column.

.k-grid-header .k-header

A column header cell.

.k-grid tr, . k-grid .k-alt

The two most common types of data rows: the normal and alternating row.