ASP.NET DataGrid Control

Various parts of the DataGrid can be configured by using templates. Templates are easy to use powerful tools, which allow changing component's appearance and behaviour flexibly on developer's demand.

Templates applied to columns.

HTML template
HTML Template is a regular text file with HTML elements: tables, images, controls, etc. Template can include variables, instead of which data is inserted. Available variables:
- $ComponentID$ - displays a unique Grid's identifier.
- $RowID$ - displays a unique row's identifier.
- $CellValue$ - displays the value of the current cell.
- $ColumnName$ - displays the name of the current column.
- $CustomerID$ - displays data from the column "CustomerID". The column can have any name.
Also, template can include user-defined variables. This allow developers to use external parameters for templates. The GridColumn.SetTemplateVariable() method is used to set custom variables.

XSL Template

XSL Template is more flexible than HTML template, because it includes XSL elements. XSL Template allows comparing/modifying data without a loss in performance. For example, under conditional formatting you must first analyze values of fields and then apply the formatting.

XSL Template must include two key elements: the <xsl:call-template name="Main" /> and the <xsl:template name="Main">. The code below analyzes values in the "Quantity" column and fills them with red color if value is more than 20:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" version="1.0" indent="no" omit-xml-declaration="yes" />

    <xsl:template match="/">
        <xsl:call-template name="Main" />
    </xsl:template>

    <xsl:template name="Main">
        <xsl:choose>
            <xsl:when test="$Quantity$ &gt; 20">
                <font color="red">$Quantity$</font>
            </xsl:when>
            <xsl:otherwise>$Quantity$</xsl:otherwise>
        </xsl:choose>
    </xsl:template>

</xsl:stylesheet>

ASCX Template (User Control)
ASCX Template is most flexible because it allows developer to organize and format column data by using the preferred programming language (C# or VB.NET). ASCX Template can include the fields GridRow and GridColumn which must be declared as public. You can use these fields to have access to the Row/Column in Template's code.

[C#]
```
public APNSoft.WebControls.GridColumn GridColumn = null;
public APNSoft.WebControls.GridRow GridRow = null;
            
```
[VB.NET]
```
Public GridColumn As APNSoft.WebControls.GridColumn = Nothing
Public GridRow As APNSoft.WebControls.GridRow = Nothing
            
```
DataGrid automatically identifies the type of applicable template. To apply template to the column, use the GridColumn.Template property.

Template applied to Bottom Bar.

This template is an XML file, which defines the structure and the layout of elements on Bottom Bar. Available elements:

<BottomBar /> - the root element. Includes buttons, separators, etc.

<Button /> - places the button for a certain action. Available standard buttons:

<Button Action="PageFirst" Title="First Page" />
<Button Action="PagePrev" Title="Previous Page" />
<Button Action="PageNext" Title="Next Page" />
<Button Action="PageLast" Title="Last Page" />
<Button Action="RowNew" Title="New Row" />
<Button Action="RowFilter" 
    TitleNoFilter="There is no current filter." 
    TitleFilterON="Filter is switched ON. Click to switch OFF the filter." 
    TitleFilterOFF="Filter is switched OFF. Click to switch ON the last saved filter." 
/>
<Button Action="ExportToExcel" Title="Export to Excel" />
<Button Action="ExportToHTML" Title="Export to HTML" />

Also you can extend Bottom Bar with custom buttons, which make DataGrid more relevant to users. You can use custom buttons for Export or for launching a client-side code:

<Button Action="Custom" Title="..." ClientCode="..." Icon="..." IconOver="..." />
<Button Action="ExportCustom" Title="..." Parameter="..." Icon="..." IconOver="..." />

The Icon and IconOver attributes specify images for a button. Image files must be located in the Skin Folder.

Buttons support the click and double-click events by using the EventType attribute:

<Button Action="..." EventType="Click" />
<Button Action="..." EventType="DoubleClick" />

<Info /> - displays the information panel to show, for example, the page number. Available panels:

<Info Data="Pages" Title="Pages">Page $PageNumber$ of $PagesInTotal$.</Info>
<Info Data="Rows" Title="Rows">Rows $ItemFirst$ to $ItemLast$ of $ItemsInTotal$.</Info>

<StatusBar /> - displays the status bar. Example:
```
<StatusBar Title="Status Bar" />
```
<Separator /> - displays a vertical line.
<Spacer /> - sets the blank space in pixels. Example:
```
<Spacer Width="2" />
```

Template is applied to a Bottom Bar by using the GridBottomBar.Template property.

Template applied to Context Menu.

This template is an XML file with items and separators. Available elements:

<ContextMenu /> - the root element for entire template. Does not include attributes.
<item /> - one menu item element. Available attributes:
- id - specifies a unique identifier for the element.
- title - specifies the text (caption) displayed for the item.
- onclick - specifies the client-side code to be launched when the item is clicked.
- icon - specifies the name of item's icon image. The icon image displayed at the left side of the item and must be located in the Skin Folder.
<separator /> - element for separator. Available attributes:
- id - specifies a unique identifier for the element.

Template for Context Menu can include variables, instead of which data is inserted. Available variables:

$ComponentID$ - displays a unique Grid's identifier.
$RowID$ - displays a unique row's identifier.
$ColumnIndex$ - displays the current column index.
$ColumnName$ - displays the current column name.
$CellValue$ - displays the content of the current cell.
$CellValueText$ - displays the text of the current cell.
$CellValueTextShort$ - displays the short text (12 symbols with "...") of the current cell.
$CellValueEncoded$ - displays the encoded text of the current cell. This value can be used as a parameter for JavaScript function. To decode this value, use the dg.DecodeCellValue(CellValue) client-side procedure.

Use the GridContextMenuHeader.Template and GridContextMenuRow.Template properties to apply a template for Context Menu.