The HTML output of a simple RadGrid control without any client features is the following:
(some HTML attributes have been removed for simplicity)
<div class="RadGrid RadGrid_Default">
<input type="hidden" name="RadGrid1_ClientState" id="RadGrid1_ClientState" autocomplete="off"></div>
div.RadGrid.RadGrid_SkinName - the control's wrapper, which holds the skin name. Normally it is a block-level element with a border, so setting 100% width to the control is both unnecessary and causes content overflow by amount of the left and right border widths.
table.rgMasterTable - the control's data container with a number of columns and rows, according to the datasource or control configuration. It contains a <thead> element with the header row, a <tbody> element with the data rows and a <colgroup> element with <cols> which may define column widths and visibility. If the MasterTableView's TableLayout is set to "Fixed", the table gets one more CSS class - rgClipCells, which causes the non-fitting cell content to be clipped, otherwise it would overflow to the next column.
th.rgHeader - a column header cell. Note that by default table headers are centered, but in RadGrid they are left aligned. You can override this.
tr.rgRow and tr.rgAltRow - the two most common types of data rows - the normal and alternating row. If you set EnableAlternatingRows="false" in ClientSettings, all data rows will have a rgRow CSS class.
RadGrid HTML output with some features are enabled:
When sorting is enabled, the header text is enclosed inside an <a> element and the sorting indicators appears as <input type="button" /> elements after it. Also, the header and data cells from the sorted column receive a rgSorted CSS class (unless you have set ClientSettings.EnableSkinSortStyles="false").
When filtering is enabled, a filtering row (tr.rgFilterRow) appears below the header row. The filter row contains filtering controls (textboxes, date pickers, etc) and filtering buttons which are input.rgFilter elements (styled push buttons).
When paging is enabled, a pager row (tr.rgPager) appears below all other rows (or above the header row if PagerStyle.Position is set accordingly). Depending on the PagerStyle.Mode property, the pager can contain different controls - styled LinkButtons, PushButtons, RadNumericTextbox, RadComboBox, RadSlider and labels. All these are wrapped in several <div>s with a rgWrap CSS class and a second CSS class which identifies the wrapper type - e.g. rgNumPart is for the numeric LinkButtons, rgInfoPart is for the pager label, rgArrPart1 is for the First and Previous buttons, while rgArrPart2 is for the Next and Last buttons. These <div>s are floated, so you cannot control the overall layout of the pager by using the PagerStyle.HorizontalAlign property. A possible alternative option is to override the skin and float the <div>s to the opposite direction, or use a pager template.
When the command item row is enabled, it is rendered as a tr.rgCommandRow element with a single child node - td.rgCommandCell, which in turn contains a table.rgCommandTable with two table cells. One cell contains the Add New Record button (input.rgAdd) and the other contains the Refresh button (input.rgRefresh) and the export buttons (input.rgExpXLS, input.rgExpPDF, input.rgExpCSV, input.rgExpDOC).
When grouping is enabled, a group panel (table.rgGroupPanel) is rendered as the top-most element inside the outer wrapper div.RadGrid. For each group expression, a th.rgGroupItem element is placed inside the group panel. The group item contains the column header text and an input.rgSortAsc or input.rgSortDesc element (depending on the group sort order). Each group in the RadGrid data area starts with a group header row (tr.rgGroupHeader). The table cells that belong to the GroupSplitterColumn (which holds the group expand/collapse buttons), have a rgGroupCol CSS class.
When hierarchy is used, each nested tableview is a table.rgDetailTable element. It can have its own pager and command rows. Each detail table is "indented" and the parent tableview has a GridExpandColumn. The cells from this column have a rgExpandCol CSS class and the expand/collapse buttons have rgExpand / rgCollapse CSS class.