How to add custom filter in gridview header.

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:

1. 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.

    
        
            
                
                
            
            
                <%# Eval("Name") %>
            
        
        
    

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.

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.

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);
        }
    }