Services
Support
Store
©2015 Intersoft Solutions. All rights reserved.
Intersoft Support Center

Implement Custom Cell Template

This walkthrough shows you how to configuring a WebGridColumn to use Templated Cell.

During this walkthrough, you will learn how to do the following :

  • Change the WebGridColumn's ColumnType to Template using WebGrid.NET Designer.

 Prerequisites

In order to complete this walkthrough, you will need the following:

  • Access to the Microsoft Access Northwind database.
  • Visual Studio 2005/2008/2010 Application.

 Step-By-Step Instructions

To create new web application, configure ContactName to use Label and create a new Column and configure it to use HTML Button.

  1. Bind WebGrid to AccessDataSource.
  2. Set WebGrid's properties AllowEdit to True.
  3. Open WebGrid Designer - Roots - Columns.
  4. Search for ContactName then set the ColumnType to Template.
  5. Click the "Add" button to add a new column and move it become first column.
  6. Set this new column's Name to Column11, then set ColumnType to Template.


  7. Right click on WebGrid instance and choose Edit Template - Columns.


  8. Drag and drop Label to the ContactName column.
  9. Drag and drop HTML Button to the Column11 column.


  10. Clear the Label's Text and set Font - Italic to True, ForeColor to Red. 
  11. Go to HTML and set the Label's text to "<%# Bind("ContactName") %>".

    eg. <asp:Label ID="Label1" runat="server" Text='<%# Bind("ContactName") %>' ForeColor="Red" Font-  Italic="true" />

  12. Add Client Side event (to retrieve row's KeyValue) to this button.

    JavaScript Copy ImageCopy Code 
    function Button1_onclick() 
{    
   var grid = ISGetObject("WebGrid1");    
   var selObj = grid.GetSelectedObject();    
   var rowObj = selObj.ToRowObject();    
   alert("This row's KeyValue : " + rowObj.KeyValue);
}

  13. Here is the result.

Getting Started

Binding to Server DataSource

Displaying Data

Visualizing Data

Customizing Data Display and Styles

Improving Performance

Customizing WebGrid User Interface

Sorting Data

Grouping Data

Filtering Data

WebGrid's Layout Mode

Paging Data with VirtualLoad Mode

Inline Data Editing

Working with Client-Side Binding

Batch Data Editing

Using Editing Controls

Validating Input

Exporting Data

Advanced Client-Server Interaction

Programming with Server-side API

Programming with Client-side API

Extending Client-Side Binding

Previous Next