Intersoft WebGrid Documentation
Walkthrough: Modifying ColumnFooters style using client side programming
See Also Send comments on this topic.

Glossary Item Box

This walkthrough shows you how to modify ColumnFooters style.

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

 Prerequisites

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

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

 Step-By-Step Instructions

  1. Bind WebGrid to AccessDataSource. 
  2. Right click WebGrid and choose WebGrid Designer.
  3. Go to Advanced tab, click See All Properties.
  4. Go to RootTable and set ColumnFooters property to Yes.
  5. Go to appropriate column in WebGrid RootTable and set the AggregateFunction property to 'Count'.

    Aggregate

  6. Place a HTML button in order to invoke a client side function.

    JavaScript Copy ImageCopy Code 
    function DoClick()
{       
    var grid = ISGetObject("WebGrid1");       
    var colFooterCell = grid.RootTable.GetElement(WG40.COLFOOTER, WG40.HTMLTABLE).cells[8];
    colFooterCell.style.color = "red";
    return true;
}

  7. First of all, try to obtain the root table's WebGridTable object by using grid.RootTable. Next, we need to obtain the table's element of the root table's column footer, by utilizing GetElement method.
  8. After the column footer is obtained, delve into the specific cell (TD) object. Finally, we can change the color style of the text using style.color attribute.

See Also

©2012 Intersoft Solutions Corp. All Rights Reserved.