You must Sign In to post a response.
  • Category: .NET

    How to place the search filter beside the gridview header

    In my application i need to display the search box beside the header column that is beside EmpName but it displays the search box below the employee name.How can i place the search box beside the header of the gridview.The screen shot that had attached shows i am getting the search box below the header EmpName but i should get beside EmpName.How can i do this

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="js/quicksearch.js"></script>
    <script type="text/javascript">
    $(function () {
    $('.search_textbox').each(function (i) {
    $(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
    'testQuery': function (query, txt, row) {
    return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;

    <asp:GridView ID="GridView1" ShowHeader="true" runat="server" AutoGenerateColumns="False" DataKeyNames="EmpId" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDataBound="GridView1_RowDataBound" OnDataBound="GridView1_DataBound" UseAccessibleHeader ="true">
    <AlternatingRowStyle Width="80px" />

    <asp:BoundField DataField="EmpName" HeaderText="EmpName" ReadOnly="true" ItemStyle-Width="100" />
    <asp:BoundField DataField="Designation" HeaderText="Designation" ReadOnly="true" ItemStyle-Width="100" />
    <asp:BoundField DataField="salary" HeaderText="Salary" ReadOnly="true" ItemStyle-Width="100" />
    <asp:BoundField DataField="notes" HeaderText="Notes" ItemStyle-Width="150" />

    <%-- <asp:CommandField ShowEditButton="true" CancelText="" DeleteText="" EditText='<%#Eval("notes").ToString()=="" ? "add" : "edit" %>' UpdateText='<%# Eval("notes")%>' />--%>
    <asp:Button CommandName="Edit" runat="server" Text='<%# (string.IsNullOrEmpty(Eval("notes").ToString())) ? "Add":"Edit"%>' ID="btnAdd" />
    <asp:Button CommandName="Update" Visible="false" runat="server" Text='<%# (string.IsNullOrEmpty(Eval("notes").ToString())) ? "Save":"Update"%>' ID="btnUpdate" />
    <%-- <asp:Button CommandName="Cancel" Visible="false" runat="server" Text="Cancel" ID="btnCancel" />--%>

    protected void GridView1_DataBound(object sender, EventArgs e)
    GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
    //for (int i = 0; i < GridView1.Columns.Count - 1; i++)
    TableHeaderCell cell = new TableHeaderCell();
    TextBox txtSearch = new TextBox();
    txtSearch.Attributes["Search Box"] = GridView1.Columns[1].HeaderText;
    txtSearch.CssClass = "search_textbox";
    GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
  • #768286
    You can use this code snippet to add Gridview Header Filter in
    <asp:TextBox ID="txtCategoryNameHeader" runat="server"

    BorderStyle="None" AutoPostBack="true" BackColor="Transparent"

    OnTextChanged="txtCategoryNameHeader_TextChanged" ></asp:TextBox>
    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"

    TargetControlID="txtCategoryNameHeader" WatermarkText="Category">

    You need to use FilterExpression along with the SelectCommand, using which the records are filtered based on the value entered in the TextBox

    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false" DataSourceID="GridDataSource" AllowPaging="true">
    <asp:BoundField DataField="CName" HeaderText="Name" ItemStyle-Width="150" />
    <asp:BoundField DataField="YourCity" HeaderText="City" ItemStyle-Width="150" />
    <asp:BoundField DataField="YourCountry" HeaderText="Country" ItemStyle-Width="150" />

  • #768293
    I think plain is unable to help you more, even if you provide JQuery or any plugin, I think it will failed
    checkout below links that may help you
    Hope it helps

    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • Sign In to post your comments