Filter GridView Records using AJAX Slider Control

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

Download

 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.

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.