Filter GridView on TextBox's KeyPress event from code behind

Question

I have a TextBox with KeyPressed event and I want to filter GridView on that event using jquery/javascript.

Note that GridView binding code is from .CS file:

gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();

I don't know how it will work? It should bind on key pressing of TextBox.

Edit: I have find a solution server site OnTextChanged event of TextBox which bind the GridView after pressing Enter instead of pressing a key.



protected void txtSearch_TextChanged(object sender, EventArgs e)
{
    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
    gvBanquet.DataBind();
}

I don't want it with OnTextChanged event but I think it would work on keypressed event using JavaScript or jQuery so I don't know how to do?

Update: I have tried below jQuery code to key pressed in textbox but its also not working.

$(document).ready(function () {

    $('#txtSearch').on("keyup", function () {
        // could bind bind GridView here??
        e.preventDefault();
    })
})

Note: GridView and TextBox both are inside UpdatePanel.

user_8602562 · Answer

I hope this solution would help even though its a bit different than the actual method you used. Do the following carefully and if any change is needed do not hesitate to comment. You need first to use the jquery's CDN library as following in the section:(just in case people did not use it yet)

Create A Button inside the update panel (the same one containing the gridview) and make it invisible using css not from visible attribute used in asp.net like this:

The Button is used to trigger server side code to be able to bind the gridview (pagemethods or webmethods does not allow usage of instance members since it uses shared functions.

Place the Textbox Outside the update panel and remove the autopostback=true(in case you are using it).

At the end of the body use the following code:

the jquery code is used to bind the keyup event ( similiar to the key pressed but after it the key is clicked) to a certain function where you can do whatever code you want. However, $('#InvisButton').click() is used to trigger the server side code of the button with the said ID or its click event handler. which in my case i used simple code, in your case maybe you could use it like this:

protected void InvisButton_Click(object sender, EventArgs e)
{
// place your wanted code here
gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();
}

Note:

Sorry if any function mistakes occur, i tried to convert from vb.net to C# and changing IDs.

user_4800629 · Answer

You can use OnTextChanged instead on OnKeyPressed and also set AutoPostBack="True"on textbox and you can do whatever you want in code behind file it work properly.

C# Code

On Text Changed

public void txtSearch_Changed(object sender, EventArgs e)
{
    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
    gvBanquet.DataBind();
}

Edit

On EveryKeyPress

ASPX

C#

protected void Page_Load(object sender, EventArgs e){
    var ctrlName = Request.Params[Page.postEventSourceID];
    var args = Request.Params[Page.postEventArgumentID];

    if(ctrlName == txtSearch.UniqueID && args == "OnKeyPress"){
        MyTextBox_OnKeyPress(ctrlName, args);
    }
}

private void MyTextBox_OnKeyPress(string ctrlName, string args){
    //your code goes here
}

user_5483580 · Answer

You can use a WebMethod Function to call your filter data Like this

private static int PageSize = 5;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDummyRow();
    }
}

private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerID");
    dummy.Columns.Add("ContactName");
    dummy.Columns.Add("City");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();
}

[WebMethod]
public static string GetCustomers(string searchTerm, int pageIndex)
{
    string query = "[GetCustomers_Pager]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", PageSize);
    cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd, pageIndex).GetXml();
}

private static DataSet GetData(SqlCommand cmd, int pageIndex)
{
    string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                DataTable dt = new DataTable("Pager");
                dt.Columns.Add("PageIndex");
                dt.Columns.Add("PageSize");
                dt.Columns.Add("RecordCount");
                dt.Rows.Add();
                dt.Rows[0]["PageIndex"] = pageIndex;
                dt.Rows[0]["PageSize"] = PageSize;
                dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

Call it from .aspx page

     function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetCustomers",
            data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }

For More Reference: https://www.aspsnippets.com/demos/685/

user_3690846 · Answer

Text changed will be working only when you use AutoPostBack = true

AutoPostBack = true permits control to post back to the server. It is associated with an Event.




protected void txtSearch_TextChanged(object sender, EventArgs e)
{
    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
    gvBanquet.DataBind();
}

Edit:

On EveryKeyPress

ASPX

C#

protected void Page_Load(object sender, EventArgs e){
    var ctrlName = Request.Params[Page.postEventSourceID];
    var args = Request.Params[Page.postEventArgumentID];

    if(args == "OnKeyPress"){
        gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
         gvBanquet.DataBind();
    }
}

user_55860 · Answer

you are missing id selector, replace your sample code with this

$(document).ready(function () {

$('#txtSearch').on("keyup", function () {
    // could bind bind GridView here??
    e.preventDefault();
})

})

user_6556438 · Answer

Replace: OnKeyPressed="txtSearch_KeyPressed()" With: AutoPostBack="true"
View aspx code in design mode (where you see your user interface.)
Double click the textbox.

Add these 2 lines for binding within the automatically created method:

gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();

Basically, every time a character is inserted into the textbox, a PostBack will occur and the new method automatically created by visual studio will execute (which if you've pasted the code will bind the data).

*If you are binding to a database each time, your code will eat memory and be very slow (rather load using Angularjs).

user_7604451 · Answer

You can not filter text box from jQuery, infect .ASPX control could not call .CS code from jQuery/Javascript. You can achieve it by adding UpdatePanel into your .ASPX code and then add tag AutopostBack=True.

user_1773603 · Answer

Used this '#<%=txtSearch.ClientID%>' syntax for asp controls IDs in jQuery instead of '#txtSearch'.

Add this script:

And in .Aspx code:




    

        

        // Place GridView here

And in code-behind:

protected void btnInvisible_Click(object sender, EventArgs e)
{
   gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
   gvBanquet.DataBind();
}

Results are:

Filter GridView on TextBox's KeyPress event from code behind

8 Answers

Note: