Search Box in GridView ASP.NET

I’m working on an ASP.NET WebForms application where I want to add a search box on top of each column header in a grid. The search box is supposed to filter the grid data based on user input.

Here’s what I’ve implemented so far:

• I have placed TextBox controls inside the grid’s header template for each column.

• I am handling the search operation using the OnTextChanged event in the ASPX.CS file and also tried with JavaScript in the ASPX file.

Problem:

The search boxes are displayed on the grid, but I am unable to type into them. They appear to be uneditable, and I’m not sure why the input fields are not working as expected.

$(document).ready(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        var rows1 = $('table#<%= Table1.ClientID %> tr:last').index() + 1;

        if (rows1 > 1) {
            // Initialize DataTable with column-based search functionality
            var table = $("#<%=Table1.ClientID%>").DataTable({
                stateSave: true,
                pagingType: "full_numbers",
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                dom: '<"top"Bfl>rt<"bottom"ip><"clear">',
                buttons: [
                    { extend: 'copy', className: 'btn-sm btn-default' },
                    { extend: 'excel', className: 'btn-sm btn-success', filename: function () { return getExportFileName(); } },
                    { extend: 'print', className: 'btn-sm btn-danger' }
                ],
                responsive: false,
                retrieve: false,
                ordering: false,
            });

            // Apply search on each column
            $("#<%=Table1.ClientID%> thead input.search-column").on('keyup change', function () {
                var colIndex = $(this).closest('th').index();  // Get the index of the column
                table.column(colIndex).search(this.value).draw();  // Perform search
            });
        }
    }

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
        var rows1 = $('table#<%= Table1.ClientID %> tr:last').index() + 1;

        if (rows1 > 1) {
            var table = $("#<%=Table1.ClientID%>").DataTable({
                stateSave: true,
                pagingType: "full_numbers",
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                dom: '<"top"Bfl>rt<"bottom"ip><"clear">',
                buttons: [
                    { extend: 'copy', className: 'btn-sm btn-default' },
                    { extend: 'excel', className: 'btn-sm btn-success', filename: function () { return getExportFileName(); } },
                    { extend: 'print', className: 'btn-sm btn-danger' }
                ],
                responsive: false,
                retrieve: false,
                ordering: false,
            });

            // Apply search on each column on initial load
            $("#<%=Table1.ClientID%> thead input.search-column").on('keyup change', function () {
                var colIndex = $(this).closest('th').index();
                table.column(colIndex).search(this.value).draw();
            });
        }
    });
});