AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 GridView Filter using ICallbackEventHandler
Posted by Moderator1 on 11/14/2009 2:16:50 AM Category: Asp.Net 2.0
Total Views : 73871
Add to my favorites
Email to friend
  
One Interface:
ICallbackEventHandler is an interface that can be implemented in a Asp.Net web page in order to invoke a server side code from the client script. This avoids repeated callback to the server or re-creating of controls to output in the client browser. While implementing ICallbackEventHandler, we must implement its two main server side method such as RaiseCallbackEvent and GetCallbackResult and there must be atleast three client script functions, which are explained below with ease.
Two server-side methods:

RaiseCallbackEvent: This method will be called to perform the callback on the server. Inputs from the client are passed are arguments for processing.

GetCallbackResult: This method will return the callback result as string to the client browser for output display.

Three client-side JavaScript functions:

1. A caller function that is used to call the helper function
2. A callback function to receive the output as string and display it in the browser.
3. A helper function that performs actual request to the server. This function is created from Asp.Net code-behind page using GetCallbackEventReference method.
Program Demonstration and Design

For the purpose of demonstration, we are going to display some customer information in a GridView control and perform filtering those records based on Customer Name and Customer City.

Controls to be added in Aspx page

1. Add a <div /> tag inside the <form /> tag of your aspx and set its Id as “divGridView”.
2. Place a GridView control inside the <div /> tag and set its EmptyDataText property as “No Records Found”.
3. Add two HTML TextBox controls, above the GridView control but outside the <div /> tag, set its Id property as “txtCusName” and “txtCusCity”.
4. Add two HTML button controls, besides the TextBoxes set its Id property as “btnFilter” and “btnShowAll”, then set its value property as “Filter” and “Show All” respectively. The complete html source will look like below

<input id="txtCusName" type="text" />
<input id="txtCusCity" type="text" />
<input id="btnFilter" type="button" value="Filter" />
<input id="btnShowAll" type="button" value="Show All" />

<div id="divGridView"><asp:GridView ID="GridView1" runat="server" EmptyDataText="No Records Found."></asp:GridView></div>
Implementation and Code-behind

Step 1: Add necessary namespace and declare a private string variable at page scope to hold the result that needs to be send to the client-side.

using System.Data.SqlClient;
using System.IO;

private string strOutput;

Step 2: Add the ICallbackEventHandler interface to implement into the web page at the class declaration section as follows,

public partial class _Default : System.Web.UI.Page, ICallbackEventHandler

Step 3: Add two web methods such as RaiseCallbackEvent and GetCallbackResult. Whenever ICallbackEventHandler is implemented, then it is mandatory to implement these two methods.

public void RaiseCallbackEvent(String clientArgs)
{

}

public string GetCallbackResult()
{
  return strOutput;
}

Step 4: Create the helper function using the GetCallbackEventReference in the Page_Load event within the IsPostBack block as follows,

if (!IsPostBack)
{
  ClientScriptManager csm = Page.ClientScript; 
  String callbackRef = csm.GetCallbackEventReference(this, "arg", "fnGetOutputFromServer", ""); 
  String callbackScript = "function fnCallServerMethod(arg, context) {" + callbackRef + "; }"; 
  csm.RegisterClientScriptBlock(this.GetType(), "fnCallServerMethod", callbackScript, true);
}

The above code uses GetCallbackEventReference method to define the callback function “fnGetOutputFromServer” to receive the output from the server. Then we create the helper function called “fnCallServerMethod”, which performs actual request to the server. This function is registered to the client side by the RegisterClientScriptBlock method.

The work flow is, the client function fnCallServerMethod calls the server method RaiseCallbackEvent, which process the request, sends the output to another server method GetCallbackResult, which in turn sends the output as string to the client function fnGetOutputFromServer, to display the output in the browser.


Step 5: Bind the GridView control with a private method as follows,

private DataTable BindGrid()
{
  string sql = "Select * from Customers"; 
  SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()); 
  DataTable dt = new DataTable(); 
  da.Fill(dt); 
  this.ViewState["Table"] = dt; 
  return dt;
}

The above method returns a DataTable with all records from the Customers table. Meanwhile we also save the DataTable in a ViewState variable, this is to avoid repeated access to the database on every filter. Call this method from the Page_Load event to bind with the GridView control. The below code must be also placed within the IsPostBack block.


GridView1.DataSource = BindGrid();
GridView1.DataBind();

Now you can execute this page to view the GridView populated with Customers data.

Step 6: Write server side method “FilterGrid” to perform filtering the records based on Customer Name and City.
private void FilterGrid(string CusName, string CusCity)
{
  DataTable dt = (DataTable)this.ViewState["Table"]; 
  DataView dv = dt.DefaultView; 
  if (SearchText != "") 
    dv.RowFilter = "Cus_Name Like '%" + CusName + "%' And Cus_City Like '%" + CusCity + "%'"; 
 
  GridView1.DataSource = dv; 
  GridView1.DataBind(); 

  using (StringWriter sw = new StringWriter()) 
  { 
    using (HtmlTextWriter htw = new HtmlTextWriter(sw)) 
    { 
      GridView1.RenderControl(htw); 
      htw.Flush(); 
      strOutput = sw.ToString(); 
    } 
  }
}
 The above method uses the data that is stored in the ViewState. DataView’s RowFilter property will filter the records using the “Like” operator and we re-bind the GridView control with the resultset of the DataView object. The important logic to be noted is, we need to display the filtered record same as the original format of the GridView control. For this we use, GridView’s RenderControl method to frame the output in an html GridView format that needs to send to the browser. The final html string is assigned to the page scope output variable “strOutput”.

Step 7: Re-write the code in the RaiseCallbackEvent and GetCallbackResult method to call the “FilterGrid” method and output the result as follows,

public void RaiseCallbackEvent(String clientArgs)
{
  string[] str = clientArgs.Split('|'); 
  FilterGrid(str[0], str[1]);
}


RaiseCallbackEvent takes only one argument “clientArgs”, but our program needs to process two arguments such as Customer Name and City, so we will send argument joined together seperated by a delimeter "|" from the client JavaScript function, which will be split in this method and then passed to the FilterGrid method.

public string GetCallbackResult()
{
  return strOutput;
}


As we have already assigned the value for strOutput in the FilterGrid method, nothing to change in GetCallbackResult method.

Step 8: Write two JavaScript functions to call the server methods to perform data filter and to output the result.

function fnSearchGrid()
{
  var param1 = document.getElementById('txtCusName').value; 
  var param2 = document.getElementById('txtCusCity').value; 
  var inputarg = param1+"|"+param2; 
  fnCallServerMethod(inputarg,'');
}


The above JavaScript function “fnSearchGrid”, takes the input from the txtCusName and txtCusCity textboxes and concats them with “|” delimeter and call the fnCallServerMethod by passing the final input argument.


function fnGetOutputFromServer(strOutput)
{
  document.getElementById('divGridView').innerHTML = strOutput;
}


The above JavaScript function “fnGetOutputFromServer” receives the output as string argument. The strOutput argument will have html string in a GridView format and there is a tag “divGridView”, which contains the original GridView control, we can easily replace it with the output string using the above function.

Step 9: Write a JavaScript function to reset the GridView control. 

function fnShowAll()
{
  document.getElementById('txtCusName').value=""; 
  document.getElementById('txtCusCity').value=""; 
  fnSearchGrid();
}


The above JavaScript function clears the values of the textboxes and calls the fnSearchGrid function. As we are using “Like” operator in “FilterGrid” method and no value is passed, the result will be all records, which will be displayed in the GridView control.

Step 10: Add the above JavaScript functions “fnSearchGrid” and “fnShowAll” to the button’s “btnFilter” and “btnShowAll” onclick event respectively as follows, 

<input id="btnFilter" type="button" value="Filter" onclick="fnSearchGrid()" />
<input id="btnShowAll" type="button" value="Show All" onclick="fnShowAll()" />


It’s Done. Now save your codes and hit “F5” key. The web page loads with Customer Data in the GridView control, input any letter or word in the Customer Name and City Textboxes and click “Filter” button, in a few seconds you can see the Magic of ICallbackEventHandler doing the trick of filtering the records in the GridView control. You can also bring all the records again by clicking the “Show All” button.

Click here to View Live Demo of “GridView Filter using ICallbackEventHandler”
You need to Login or Register to download Source Code.
 
Viewer's Comments
Posted by test on 1/29/2010 9:37:59 AM
good one
 
Posted by anil on 5/12/2010 3:48:38 PM
very nice , helpful and easy to understand
 
Posted by Shankar on 9/17/2010 5:01:36 AM
excellent code
 
Posted by Mohan on 7/7/2012 1:50:09 AM
thank you sir, very nice , helpful and easy to understand
 
Posted by vishal on 12/27/2012 3:21:13 AM
Excellent
 
Posted by nagendra tiwari on 4/10/2013 8:34:17 AM
nice one...
 
Posted by developer rupak on 3/5/2014 5:10:57 AM
nice but db are here for using this demo
 
Posted by subhash on 5/29/2015 10:26:23 AM
i have done with 1 textbox but its not working . can help me out ??
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
One plus Thirty Equals To
 
Sponsored by
Backup and Recovery Best Practices for Microsoft SQL Server 2005
Website Magazine
Run Your Own Web Server Using Linux & Apache - Free 191 Page Preview