ASP.NET DataGrid Control

About Us

Articles

Products

Downloads

Purchase

Support

ComboBox	Menu
DataGrid	Rating
Include	TreeView

The collection of ASP.NET controls that assists you to build feature-rich, stable web applications in the shortest possible time. MORE

We use Share-it! to handle our electronic purchases, to ensure that your online purchase is secure and easy to use.

License Agreement

License Types

License Key

Subscription

Time-Limited License

Questions (FAQs)

Documentation

Contacts

The APNSoft Menu will only work on JavaScript enabled browsers.

About Us Articles Products Downloads Purchase Support

DataGrid

Controls Suite 4.5

Overview

Features

Reference Book

Component Parts

Deployment

Binding to Data

Appearance Customization

Templates

Edit Form

Client-side API

Server-side API

Live Demos

The APNSoft TreeView will only work on JavaScript enabled browsers.

Overview Features Component Parts Deployment Binding to Data Appearance Customization Templates Edit Form Client-side API Server-side API [img src='~/Images/NewWindow.gif' border=0 width=13 height=13 hspace=2 vspace=0 align=absmiddle]Data Binding Dynamically populating Large data source Width Sorting Header Text Line Numbers Data Formatting CSS Formatting Fixed columns HTML Template XSL Template ASCX Template Row uniqueness Alternating rows Hovered row CSS Formatting Client-side selection Server-side selection Filtering Exporting Insert/Update/Delete Cell editing Fixed (Summary) row Skins Width and Height Page Size Running Mode Context Menu Custom AJAX call Auto-resizing Template Custom Buttons Client-side events Enabled/Disabled Master/Detail Grids CheckBoxes DropDowns Images Update Panel

APNSoft > Products > DataGrid > Reference Book > Templates

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.