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

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

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.NET 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 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.