Asif.Ali Asif.Ali - 1 year ago 188
Javascript Question

Filter GridView on TextBox's KeyPress event from code behind

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

<asp:TextBox ID="txtSearch" runat="server" OnKeyPressed="txtSearch_KeyPressed()">
</asp:TextBox>

<script>
function txtSearch_KeyPressed()
{
// gvBanquet is an ID of GridView and SearchBanquet method returns a DataTable
gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();
}
</script>


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.

<asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged"
AutoPostBack="True" ></asp:TextBox>

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.



<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<div class="col-lg-4" style="padding-right:0px">
<asp:TextBox ID="txtSearch" Width="100%" CssClass="form-control" placeholder="Search..." runat="server"></asp:TextBox>
<input id="inpHide" type="hidden" runat="server" />
</div>
</div>
<!-- /.col-lg-12 -->

<div class="col-lg-12 table-responsive">
<asp:GridView ID="gvBanquet" CssClass="table table-striped table-bordered table-hover" runat="server"
AutoGenerateColumns="false" OnRowCommand="gvBanquet_RowCommand" AllowPaging="True" PageSize="5"
EmptyDataText="No record found!" OnPageIndexChanging="gvBanquet_PageIndexChanging" ShowHeaderWhenEmpty="true"
>
<Columns>
<asp:TemplateField HeaderText="Banquet Name">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Visible="false" Text='<% #Eval("bqtID") %>'></asp:Label>
<asp:Label ID="lblName" runat="server" Text='<% #Eval("bqtName") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="User Name">
<ItemTemplate>
<asp:Label ID="lblUserName" runat="server" Text='<% #Eval("bqtUserName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Type">
<ItemTemplate>
<asp:Label ID="lblType" runat="server" Text='<% #Eval("bqtType") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Capacity">
<ItemTemplate>
<asp:Label ID="lblCapacity" runat="server" Text='<% #Eval("bqtCapacity") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Password">
<ItemTemplate>
<asp:Label ID="lblPassword" runat="server" Text='<% #Eval("bqtPassword") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server" Text='<% #Eval("bqtEmail") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Phone">
<ItemTemplate>
<asp:Label ID="lblPhone" runat="server" Text='<% #Eval("bqtPhone") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Cell No.">
<ItemTemplate>
<asp:Label ID="lblContactNo" runat="server" Text='<% #Eval("bqtContactNo") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Location">
<ItemTemplate>
<asp:Label ID="lblLocation" runat="server" Text='<% #Eval("bqtLocation") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<center>Events</center>
</HeaderTemplate>
<ItemTemplate>
<asp:Button ID="btnStatus" runat="server" CssClass="btn btn-primary btn-sm" CommandName="Status" Text='<%# Eval("bqtStatus") %>' />
<asp:Button ID="btnEdiit" runat="server" CssClass="btn btn-danger btn-sm" CommandName="EditRow" Text="Edit" />
<asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger btn-sm" CommandName="DeleteRow" Text="DELETE" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#5cb85c" BorderColor="#4CAE4C" ForeColor="White"></HeaderStyle>
<PagerStyle CssClass="pagination-ys" />
</asp:GridView>
<asp:Label ID="lblNoRecords" runat="server" Text="No Record Found!"></asp:Label>
</div>
<!-- /.col-lg-12 -->

</ContentTemplate>
</asp:UpdatePanel>




Answer Source

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

  • Add this script:

    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    
    <script type="text/javascript">
    
        $(document).ready(function () {
            $('#<%=txtSearch.ClientID%>').bind('keyup', function (e) {
                $('#<%=btnInvisible.ClientID%>').click();
            });
        });
    
    </script>
    
  • And in .Aspx code:

    <asp:TextBox ID="txtSearch" placeholder="Search..." runat="server"></asp:TextBox>
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    
            <asp:Button ID="btnInvisible" runat="server" style="display: none" 
                OnClick="btnInvisible_Click" />
    
            // Place GridView here
    
        </ContentTemplate>
    </asp:UpdatePanel>
    
  • And in code-behind:

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

    enter image description here

    enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download