Some developers want to create a customized feature for each user. For example they want to customize the filter area of WebGrid, since some users prefer to for example directly show the list of customers' name starting with the word "A". So Every time the page is first loaded, it will check whether a cookie for that page exist. If the cookie exists, then the cookie value will be captured and a filter will be added to a column based on the cookie value
During this walkthrough, you will learn how to do the following:
- Using Cookie.
- Using JavaScript function.
- Save FilterRow values
- Use WebGrid's InitializePostBack event to save cookie OnTheFly.
- Use WebGrid's Page_Load event to check whether the cookie exist or not.
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
To Use Cookie to Save Filter Row values
- Launch Visual Studio.NET 2005.
- Click on File menu, then select New and click Web Site.
- Select ASP.NET Web Site in the Template box and set Location to HTTP.
- Named the Web Site and click OK.
- Right-click on Project's name and select Add New Item.
- Select Intersoft AppForm in the My Templates box and named it as Walkthrough.aspx.
- Drag WebGrid instance from ToolBar to WebForm.
- In the Solution Explorer, right-click on App_Data and select Add Existing Item.
- Browse and add NorthWind.mdb in C:\Program Files\Intersoft Solutions\Data (Default installation folder).
- Click the SmartTag on the upper right of the WebGrid.
- In ChooseDataSource field, choose <New data source...>.
- In DataSourceConfigurationWizard, choose AccessDatabase and click OK.
- Browse and select the database in App_Data (NorthWind.mdb) and click Next.
- Select the table that you want to use and click Next.
- In this step, you can view the table's database using Test Query button. Otherwise, click Finish to proceed to the next step.
- Finally, choose Retrieve Structure action in Connected to Data Source Control Wizard and click OK to apply all settings.
- Set the AllowFilter Property to Yes.
- Create a HTML button with it's onClick attribute set to the name of your JavaScript function for example
<INPUT type="button" value="SaveFilterCookie" onclick="SaveFilterCookie();"> - Insert this javaScript function on the head area of your HTML .
JavaScript Copy Code <script language="javascript" type="text/javascript"> function SaveFilterCookie() { var webGrid = ISGetObject("WebGrid1"); var rowFilter = webGrid.Tables["Customers"].FilteredColumns; var CustomerIDFilter; if(rowFilter.GetNamedItem("CustomerID") != null) { CustomerIDFilter = rowFilter.GetNamedItem("CustomerID").FilterText; } else { CustomerIDFilter = ""; } webGrid.AddInput("CustomerIDFilter", CustomerIDFilter); webGrid.SendCustomRequest(); } </script>
- On the InitializePostBack event handler of the grid, you write code to save cookie on the fly.
C# Copy Code private void WebGrid1_InitializePostBack(object sender, ISNet.WebUI.WebGrid.PostbackEventArgs e) { if (e.Action == PostBackAction.Custom) { //request the CustomerIDFilter and store it in a cookie called UserPreference String CustomerIDFilter = Request["CustomerIDFilter"]; HttpCookie myCookie = new HttpCookie("UserPreference"); myCookie["CustomerIDFilter"] = CustomerIDFilter; myCookie.Expires = DateTime.Now.AddDays(2); Response.Cookies.Add(myCookie); } }
- On the PageLoad event handler of the Page, write codes to check whether the cookie exist or not. If it does exist then the cookie value will be taken and used as a filter.
C# Copy Code private void Page_Load(object sender, System.EventArgs e) { if(!IsPostBack) { if (Request.Cookies["UserPreference"] != null) { string columnMember = "CustomerID"; string filterText = Request.Cookies["UserPreference"]["CustomerIDFilter"]; ISNet.WebUI.WebGrid.WebGridFilter filter = new ISNet.WebUI.WebGrid.WebGridFilter(columnMember,ISNet.WebUI.WebGrid.ColumnFilterType.Like,filterText); this.WebGrid1.RootTable.FilteredColumns.Add(filter); } } }
Tasks
Walkthrough: Applying custom filtering in WebGrid
Walkthrough: Using DropDownList in Filter Row
Walkthrough: Applying custom sorting in WebGrid
How-to: Perform filtering data and hide Filter Bar in WebGrid
References
AllowFilter Property
InitializePostBack Event
Other Resources
Walkthrough Topics
How-to Topics