This walkthrough shows you how to add a FilterColumn at runtime using client side scripts.

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

Manipulate the grid client side to add a FilterColumn at runtime.

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

Bind WebGrid to AccessDataSource.

Place a HTML button in order to invoke a client side function:

JavaScript

Copy Code

function AddFilter()
{
        var grid = ISGetObject("WebGrid1");
        
        var newFilter = new WebGridFilter(); // construct WebGridFilter object
        newFilter.ColumnMember = "ContactTitle"; // assign properties the same way as in server side
        newFilter.FilterType = "EqualTo"; // use the same enumeration as in server side
        newFilter.FilterText = "Owner";
        
        grid.RootTable.FilteredColumns.Add(newFilter); // add new filter column the same way as in server side
        grid.RootTable.UpdateUI(); // update User Interface to reflect changes
        grid.Refresh(); // perform refresh to get the filter applied
        
        alert("ContactTitle Column is now filtered!");
}

In order to filter a column at runtime, developers only have to create a WebGridFilter object. Configure the necessary properties of the WebGridFilter object such as ColumnMember, FilterType and FilterText properties. As soon as the WebGridFilter object is ready, add it to the FilteredColumns object collection from the RootTable object. There are two methods that are important to be invoked. The first one is UpdateUI method which is used to update the grid's user interface in order to reflect the addition of the WebGridFilter object. The other one is Refresh method in order to apply the WebGridFilter object.

Now suppose you have configured a FilterColumn previously at DesignTime. You need to change the FilterText at runtime. Here are the codes:

JavaScript

Copy Code

function ChangeFilter()
{
        var grid = ISGetObject("WebGrid1");
        var contactFilter = grid.RootTable.FilteredColumns.GetNamedItem("ContactTitle");
        
        if (contactFilter == null)
        {
                alert("Please filter by ContactTitle first!");
                return;
        }
        else
        {
                contactFilter.FilterText = "Sales";
                contactFilter.FilterType = "Like";
                contactFilter.SetChanged(); // indicates that an object has been changed and require processing in UpdateUI
                grid.RootTable.UpdateUI(); // update User Interface to reflect changes
                grid.Refresh();
        }
        
        alert("ContactTitle FilterColumn's FilterText now changed to Sales and FilterType changed to Like");
}

Another new method is SetChanged method. The method is used because previously a WebGridFilter object is present and some properties of that object has been modified at runtime.

Intersoft WebGrid Documentation
Walkthrough: Using client side programming to modify FilterText
See Also Send comments on this topic.

Prerequisites

Step-By-Step Instructions

See Also