CODEWITHSUNDEEP
c#asp.net
AJ17
AJ17

Reputation: 308

Filter records in gridview

I wrote a small program to filter records in a grid view, filter by what is entered into a text box by the user. the problem with this are, the user cannot type fast,gridview takes time to display. I want to make it faster so the user doesn't notice a delay. any suggestion to make this work better?

   <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs"    Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     <html xmlns="http://www.w3.org/1999/xhtml">

          <script type="text/javascript">
             function runPostback() {
             document.forms["form1"].submit();
             document.getElementById("TextBox1").focus();


         }
 function getFocus(){
     var text = document.getElementById("TextBox1");
     if (text != null && text.value.length > 0) {
         if (text.createTextRange) {
             var FieldRange = text.createTextRange();
             FieldRange.moveStart('character', text.value.length); 
             FieldRange.collapse();
        FieldRange.select(); } }
        }
           function TriggerPostBack(control, arg){


      __doPostBack(control, arg);
         }

           function SetDelay() {
             // setTimeout("runPostback()",3000);
           }




</script>

 <head runat="server">
 <title>Untitled Page</title>
</head>
 <body onload="getFocus()">

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

      <div> <asp:TextBox ID="TextBox1" runat="server" Width="312px" OnTextChanged="Code_TextChanged" onkeyup="TriggerPostBack('control', 'arg')" ></asp:TextBox>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TextBox1" />
    </Triggers>
      <ContentTemplate>

          <br />
          <asp:GridView ID="GridView1" runat="server">
          </asp:GridView>

      </ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

------------------------------ SERVER SIDE CODE ---------------------------------------

   public partial class _Default : System.Web.UI.Page 
     {
            DataTable myDataTable = new DataTable();

protected void Page_Load(object sender, EventArgs e)
{
    //TextBox1.Attributes.Add("onkeyup", "Code_TextChanged");

 if (!IsPostBack)
    {
        GridView1.DataSource = generateDATATABLE();
        GridView1.DataBind();
    }


}


public void RaisePostBackEvent(string eventArgument) 
    {
        BindgrdView();
    }


public DataTable generateDATATABLE()
{






    DataColumn myDataColumn;

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "ID";
    myDataTable.Columns.Add(myDataColumn);

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "Link";
    myDataTable.Columns.Add(myDataColumn);



    myDataTable.Rows.Add("01", "G Powder");
    myDataTable.Rows.Add("02", "G Eye Drops");
    myDataTable.Rows.Add("03qq", "G Syrup");
    myDataTable.Rows.Add("0333", "G Syrup");
    myDataTable.Rows.Add("0453", "G Syrup");
    myDataTable.Rows.Add("0333", "G Syrup");
    myDataTable.Rows.Add("03666", "G Syrup");
    myDataTable.Rows.Add("0333", "G Syrup");
    myDataTable.Rows.Add("0453", "G Syrup");
    myDataTable.Rows.Add("033w8883", "G Syrup");
    myDataTable.Rows.Add("03666", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("0322666", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("0322666", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");




    return myDataTable;


}

protected void Code_TextChanged(object sender, EventArgs e)
{


    myDataTable = generateDATATABLE();


    if (myDataTable.Rows.Count > 0)
    {
        if (myDataTable.Rows.Count > 0)
        {


            string filterExp = "ID >= "+"'"+TextBox1.Text+"'";
            DataRow[] temp= myDataTable.Select(filterExp);
            GridView1.DataSource = convertTODT(temp);
            GridView1.DataBind();
        }
    }
}


public DataTable convertTODT(DataRow[] temp)
{
    DataTable DT = new DataTable();
    DataColumn myDataColumn;

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "ID";
    DT.Columns.Add(myDataColumn);

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "Link";
    DT.Columns.Add(myDataColumn);


    foreach(DataRow dr in temp)
    {
        DT.ImportRow(dr);
    }


    return DT;
}
   public void BindgrdView()
 {

    myDataTable = generateDATATABLE();
     if (myDataTable.Rows.Count > 0)
    {
      GridView1.DataSource = myDataTable.Select("ID like" + "'" +      TextBox1.Text.ToString() + "'");
       GridView1.DataBind();
     }
  }

}

Upvotes: 0

Views: 3517

Answers (2)

Waqas
Waqas

Reputation: 6812

As Ujjwal said, instead of using post backs use client side to filter the records of GridView. A very nice article/sample is given here: Javascript Table filter

And code snippet from mentioned article:

function filter2 (phrase, _id){
    var words = phrase.value.toLowerCase().split(" ");
    var table = document.getElementById(_id);
    var ele;
    for (var r = 1; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
            var displayStyle = 'none';
            for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])>=0)
            displayStyle = '';
            else {
            displayStyle = 'none';
            break;
            }
            }
        table.rows[r].style.display = displayStyle;
    }
}

This filter2 method takes two parameters a phrase to search for and an id of table. Here is how to use in aspx:

<!-- A text box for entering search phrase and GridView1.ClientID returns the client id of gridview -->
<input name="txtTerm" onkeyup="filter2(this, '<%=GridView1%>')" type="text">

Upvotes: 2

Ujjwal Manandhar
Ujjwal Manandhar

Reputation: 2244

If your all data displays in GridView at a time then you can use the client side scripting to filter out the row.

Server side will obviously be slower as you have to postback and re-render the gridview

Upvotes: 0

Related Questions