Filter GridView Records using AJAX Slider Control

Abhijit Jana
Posted by in ASP.NET AJAX category on for Beginner level | Views : 30214 red flag
Rating: 3.8 out of 5  
 5 vote(s)

This article describes how to filter GridView Records using AJAX Slider Control.


 Download source code for Filter GridView Records using AJAX Slider Control

Introduction
This is very simple example of use Ajax Slide Control to filter data in a grid view.  Sometimes we need to filter the gridview data based on some range value. On that case we can use AJAX Slider control to provide scrollable Filter functionality with gridview control.





To discuss about the implementation,  lets break down the project into three part
  1. Data Source
  2. ASPX Page
  3. Use of Codebehind

Data Source

Data source is used to bind the data with grid view.  It may be an XML, or Data Set or From Database. In this example I have used XML as data source.  Which loads as a dataset to bind with grid view.  Below is the structure of the XML File that I have used for this application.
<students>

  <student>

    <roll>1</roll>

    <name>A</name>

    <address>Kolkata</address>

    <marks>88</marks>

  </student>

  <student>

    <roll>2</roll>

    <name>B</name>

    <address>Pune</address>

    <marks>77</marks>

  </student>

     .

     .

     .

</students>

we can use some different data source also like  Database or anything else as per the requirements.


ASPX Page Implementation
In the aspx page we have used on Update Panel that contain the gridview. Data source of the gridview has been defined from Codebehind code as Data going to be chage while filtering. We have also used one AJAX Slider control to filter the data on slider change.
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"

                    Width="222px">

                    <RowStyle BackColor="#EFF3FB" />

                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />

                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

                    <EditRowStyle BackColor="#2461BF" />

                    <AlternatingRowStyle BackColor="White" />

                </asp:GridView>

            </ContentTemplate>

        </asp:UpdatePanel>

    </div>

    <cc1:SliderExtender ID="SliderExtender1" runat="server" BoundControlID="lbl"

        Decimals="0" Minimum="1" Maximum="9"  TargetControlID="TextBox1"

        EnableHandleAnimation="true" TooltipText="{0}">

    </cc1:SliderExtender>


    <p>

        <asp:TextBox ID="TextBox1" AutoPostBack="true"
runat="server"
OnTextChanged="txtSlider_TextChanged"></asp:TextBox>

        <asp:Label ID="lbl"></asp:Label>

    </p>

We have one textBox that sets as TargetControlID of SilderControl. So, what ever the value will change in Slider will reflect in textbox and whenever we have change value in textbox, txtSlider_TextChanged event will fire which will do the filter from codebehind.

Lets have a look what we have to do in Server side code.

Use of Codebehind
During the page load, first we need to load all the data from XML File, like below
protected void Page_Load(object sender, EventArgs e)
    {
       //Check For Post back or not
        if (!Page.IsPostBack)
        {
           Ds.ReadXml(Server.MapPath("Result.xml"));
           GridView1.DataSource = Ds;
           GridView1.DataBind();
        }
    }
This will load all the data form XML To Gridview.

Now, lets have look into the txtSlider_TextChanged which will call automatically on slider change.
protected void txtSlider_TextChanged(object sender, EventArgs e)
    {
        // Filter based on Rool
        string query = "roll >= " + TextBox1.Text;
        Ds.ReadXml(Server.MapPath("Result.xml"));
        DataTable dt1 = Ds.Tables[0];
        //Apply Select Query
        var v =dt1.Select(query);
        DataTable dt = new DataTable("Customers");
        // Add columns in DataTable
        dt.Columns.Add("Roll", typeof(string));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Address", typeof(string));
        dt.Columns.Add("Marks", typeof(string));
        foreach (DataRow dRow in v)
        {
           DataRow dr = dt.NewRow();
            dr["Roll"] = dRow["roll"];
            dr["Name"] = dRow["name"];
            dr["Address"] = dRow["address"];
           dr["Marks"] = dRow["marks"];
            dt.Rows.Add(dr);
        }
        GridView1.DataSource = dt;
            GridView1.DataBind();
    }

Some Filtered Records

Here you can check we have filter the data based on Roll Number.
        string query = "roll >= " + TextBox1.Text;
        var v =dt1.Select(query);
You can change the condition of filter as per your requirement.

Conclusion
This is a very simple article which shows you how to use Slider Control to Filter Data in GridView. You can use any data source like database or XML for the same. Please feel free to download the sample from above and use it wherever you like. I will write one more article on how to filter data using AJAX MultiSlider soon.  Please provide your valuable suggestion and feedback.
Page copy protected against web site content infringement by Copyscape

About the Author

Abhijit Jana
Full Name: Abhijit Jana
Member Level: Bronze
Member Status: Member,MVP
Member Since: 12/24/2008 11:28:35 PM
Country: India
Cheers ! Abhijit
http://abhijitjana.net
He has done Master Degree in Computer Application and currently working as a Sr. S/W Developer in a US based MNC and having more than 3 years exp. He has worked with all the .NET framework and good exposer in Web and Windows based development using Microsoft Technology . Currently he working with C# 3.5, ASP.NET 3.5, Enterprise Library 4.1 and SDL Tridion also Exploring VS 2010 with .NET 4.0.

Login to vote for this post.

Comments or Responses

Posted by: Abhi2434 on: 3/12/2010
This is amazing work dude...

Cheers. Keep up...
Posted by: Kunal2383 on: 3/12/2010
Nice one dude...
Posted by: Chvrsri on: 12/7/2010 | Points: 25
Nice Concept ...

Login to post response

Comment using Facebook(Author doesn't get notification)