CODEWITHSUNDEEP
asp.net-mvcgridviewfilter
pcbabu
pcbabu

Reputation: 2329

How can I add row for filtering in ASP.NET MVC GridView?

I am using ASP.NET GridView to display my data from a webservice call. I need to add one row after header that will contain a textbox to search in the corresponding column. How can I do that?

Upvotes: 0

Views: 584

Answers (1)

Md Rahatur Rahman
Md Rahatur Rahman

Reputation: 3244

There is no GridView in asp.net mvc unless you are using a third party library.

Do you have a GridView rendered? If not then are you considering server side/client side paging?

For both cases consider Html DataTable. With DataTable you can simply write the following code to have a GridView with search functionality:

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );

    var table = $('#example').DataTable( {
        orderCellsTop: true,
        fixedHeader: true
    } );
} );

This will render a grid with a text box for the search functionality.

See the detail implementation here: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Upvotes: 1

Related Questions