netui-data:gridStyle Tag

<netui-data:gridStyle> Tag

A tag that allows parameterization of the style components of the HTML table rendered by a <netui-data:grid> tag.

Syntax

<netui-data:gridStyle
[styleClassPrefix="string_styleClassPrefix"] />

Description

A tag that allows parameterization of the style components of the HTML table rendered by a <netui-data:grid> tag. Styles are rendered in several locations in the HTML table. See the <netui-data:grid> tag description for the structure of the table rendered by the <netui-data:grid> tag. The styles defined here are mapped to these regions as follows:

Grid Region Name	HTML Element	Style Attribute
Table	<table>	tableClass
Header	<tr>	headerClass
Data Row	<tr>	rowClass
Footer	<tr>	footerClass

Attributes

styleClassPrefix

Set the style class prefix that is used to render table cell style information for the header, data, and footer cells of this HTML table column. The styleClassPrefix will be used in conjunction with a suffix to create style class names that are rendered inside of the <td> tags for each cell in this column.

Assuming the value of this property is foo, the style class names rendered for each part of the column are shown in the table below.

Column Region Style class

Header foo-td-header

Data foo-td-data

Footer foo-td-footer

Required	Supports runtime expression evaluation	Data bindable
No	No	No

Sample

This sample shows a <netui-data:gridStyle> tag used to define styles in a rendered HTML table. The styleClassPrefix attribute is set to "gridStyle", which means the generated style class names would be:

gridStyle-table

gridStyle-tr-header

gridStyle-tr-data

gridStyle-tr-footer

    <netui-data:grid dataSource="{pageFlow.allRows}" name="{pageFlow.gridName}">
        <netui-data:gridStyle styleClassPrefix="gridStyle"/>
        <netui-data:pager renderInHeader="true" action="pageAction" renderInFooter="true"/>
            <netui-data:columns filterAction="begin" sortAction="begin">
                <netui-data:anchorColumn action="detailsItems" addRowId="true" title="Details"/>
                <netui-data:anchorColumn action="updateItems" addRowId="true" title="Edit"/>
                <netui-data:basicColumn filterable="true" title="Itemnumber" sortable="true" name="itemnumber"/>
            </netui-data:columns>
    </netui-data:grid>

Code Sample