Intersoft Support Center

Customize Column Type

This walkthrough shows you how to use numerous column types available in WebGrid to display richer content data presentation.

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

  • Use numerous column type like Text(default), Image, ImageAndText, CheckBox, Button and Custom.
  • Use AccessDataSource control.
  • Use WebGrid's InitializeRow to set the row in WebGrid.

 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 and use numerous column types

  1. Bind WebGrid to AccessDataSource.
  2. In WebGrid Designer - Advanced tab, expand RootTable and select Columns.
  3. Add a new column and set its properties like following:
    Property Value
    ColumnType Button
    ButtonText Edit
    Width 50px
    Bound False

  4. Add another new column and set its properties like following:
    Property Value
    ColumnType Image
    CellImage /CommonLibrary/Images/Order-Details.gif
    Width 20px
    Bound False

  5. Add a new column and set its properties like following:
    Property Value
    ColumnType CheckBox
    Width 20px
    Bound False

  6. Add another new column and set its properties like following:
    Property Value
    ColumnType Custom
    Width 150px
    Bound False

  7. Now, select LayoutSettings node and set RowHeightDefault to 25px. Then, expand ButtonStyle node and set its properties like following:
    Property Value
    BackColor LighSteelBlue
    BorderColor Navy
    BorderStyle Solid
    BorderWidth 1px

  8. Set WebGrid's width to 800px from its properties.
  9. Now, switch to HTML view and add OnInitializeRow="WebGrid1_InitRow" in the WebGrid tag.
  10. Switch back to code behind and add the following codes:

    C# Copy ImageCopy Code
    protected void WebGrid1_InitRow(object sender ISNet.WebUI.WebGrid.RowEventArgs e)
    {
      if (e.Row.Type == RowType.Record)
      {
        WebGridCellCollection cells = e.Row.Cells;
        cells.GetNamedItem("Custom").Text = "<b>Custom<b>";
      }
    }

  11. Compile and run the WebForm. The WebGrid will look like following.

Previous Next