headerFilter : booleanDefault: object

If set to true, add filters for each column

Examples

Remote DataSource

    
 <table id="grid"></table>
 <script>
     $('#grid').grid({
         dataSource: '/Players/Get',
         headerFilter: true,
         columns: [ { field: 'ID', width: 56, filterable: false }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
     });
 </script>

Local DataSource

    
 <table id="grid"></table>
 <script>
     var data = [
         { 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
         { 'ID': 2, 'Name': 'Ronaldo Luís Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
         { 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' },
         { 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany' },
         { 'ID': 5, 'Name': 'James Rodríguez', 'PlaceOfBirth': 'Cúcuta, Colombia' },
         { 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria' }
     ];
     $('#grid').grid({
         dataSource: data,
         headerFilter: true,
         columns: [
             { field: 'ID', width: 56, filterable: false },
             { field: 'Name' },
             { field: 'PlaceOfBirth' }
         ],
         pager: { limit: 5 }
     });
 </script>