How to add custom filter in gridview header.

Question

I need a custom filter for gridview header, as well as when i search any grid's data my total record count shoud be change.

Ali Benchaaban · Answer

Hello Ranjender, To achieve yout goal, please try this code below Column 1 Column 2 Create an input element for each column header where you want to provide filtering. Write JavaScript functions to handle the filtering based on user input. document.getElementById('filterColumn1').addEventListener('keyup', function () { // add your logic here }); document.getElementById('filterColumn2').addEventListener('keyup', function () { // add your logic here }); Update Total Record Count function updateTotalRecordCount(searchCriteria) { $.ajax({ url: 'api-endpoint-url', type: 'GET', data: { criteria: searchCriteria }, success: function (data) { document.getElementById('totalRecordCount').textContent = data.totalCount; }, error: function (error) { console.error('Error updating total record count:', error); } }); } Display Total Record Count Total Record Count: 0 Finally, an example of C# method you can use it to update the total record [HttpGet] public IHttpActionResult UpdateTotalRecordCount(string criteria) { try { // Implement your logic to query the database with the search criteria // Here, 'YourEntity' represents the data entity in your database IQueryable query = db.YourEntities; if (!string.IsNullOrEmpty(criteria)) { query = query.Where(entity => entity.ColumnName.Contains(criteria)); } int totalCount = query.Count(); var result = new { totalCount }; return Ok(result); } catch (Exception ex) { return InternalServerError(ex); } }

Prasad Raveendran · Answer

To implement a custom filter for each column in a GridView in ASP.NET Web Forms, you can add filter controls (e.g., TextBoxes or DropdownLists) for each column and use them to filter the data accordingly. Here's a step-by-step guide on how to achieve this: Create Your ASP.NET Web Forms Page : Start by creating an ASP.NET Web Forms page with a GridView control. Add filter controls for each column in the GridView header. 2. Code-Behind : In your code-behind file (e.g., YourPage.aspx.cs ), handle the logic to apply the custom filters when filter controls change. using System; using System.Data; using System.Data.SqlClient; using System.Web.UI.WebControls; public partial class YourPage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGridView(); } } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { // Set the filter controls' Text properties to their respective filter values ((TextBox)e.Row.FindControl("NameFilter")).Text = NameFilterValue; // Set filter values for other filter controls as needed } } protected void ApplyFilters(object sender, EventArgs e) { // Rebind the GridView when filter controls change BindGridView(); } private string NameFilterValue { get { return NameFilter.Text.Trim(); } set { NameFilter.Text = value; } } private void BindGridView() { // Define your connection string string connectionString = "YourConnectionString"; using (SqlConnection conn = new SqlConnection(connectionString)) { conn.Open(); // Define your SQL query with filtering string query = "SELECT * FROM YourTable WHERE 1=1"; SqlCommand cmd = new SqlCommand(query, conn); // Apply filters based on filter control values if (!string.IsNullOrWhiteSpace(NameFilterValue)) { query += " AND Name LIKE @Name"; cmd.Parameters.AddWithValue("@Name", "%" + NameFilterValue + "%"); } // Customize query and parameters for other columns as needed cmd.CommandText = query; using (SqlDataAdapter adapter = new SqlDataAdapter(cmd)) { DataTable dt = new DataTable(); adapter.Fill(dt); // Bind the filtered data to the GridView GridView1.DataSource = dt; GridView1.DataBind(); } } } } In this example, we added filter controls (TextBoxes) for the "Name" column. You can add similar filter controls for other columns as needed and adjust the filtering logic accordingly in the BindGridView method. The OnTextChanged event of the filter controls triggers the ApplyFilters method, which rebinds the GridView with the filtered data. The GridView1_RowDataBound event ensures that the filter controls' values are maintained when the GridView is reloaded.

Cr Bhargavi · Answer

To add a custom filter to a GridView header in ASP.NET, you can create a custom template for the header cell and include your filter controls inside that template. Additionally, you can update the record count when you search the grid's data.