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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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" />
    <Columns>

    <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:TemplateField>
    <ItemTemplate>
    <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" />--%>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>

    </asp:GridView>
    });
    });
    </script>
    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";
    cell.Controls.Add(txtSearch);
    row.Controls.Add(cell);
    //}
    GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
    }
  • #768286
    You can use this code snippet to add Gridview Header Filter in ASP.net
    <HeaderTemplate>
    <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">
    </asp:TextBoxWatermarkExtender>
    </HeaderTemplate>

    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">
    <Columns>
    <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" />
    </Columns>
    </asp:GridView>

  • #768293
    I think plain asp.net 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
    http://www.codeproject.com/Tips/876630/Searchable-Gridview-using-Jquery-Easiest-Way
    http://js-grid.com/
    http://stackoverflow.com/questions/4163616/gridview-filtering-using-textbox-in-asp-net
    Hope it helps

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


Sign In to post your comments