1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Filter bar template with custom component - Remote DataSource

Filter bar template with custom component - Remote DataSource

Hi,

I need to use custom filtering in JavaScript Grid. For one column, I would like to keep as SearchBox as dropdown (all other columns as free text). I've found the option (https://ej2.syncfusion.com/javascript/documentation/grid/filtering/#filter-bar-template-with-custom-component) to set as Dropdown but the datasource was static. We need to bind the field value to the dropdown instead of static data.


 var data = new ej.data.DataManager({
        url: 'url',
        adaptor: new ej.data.WebApiAdaptor(),
        crossDomain: true
    });
    
    ej.grids.Grid.Inject(ej.grids.Page, ej.grids.ExcelExport, ej.grids.Toolbar, ej.grids.Filter);
        var grid = new ej.grids.Grid({
            dataSource: data,
            allowGrouping: true,
            allowSorting: true,
            allowResizing: true,
            allowReordering: true,
            allowFiltering: true,         
            allowExcelExport: true,
            allowPaging: true,
            toolbar: ['Search', 'ExcelExport'],
            groupSettings: { showGroupedColumn: true },         
            showColumnMenu: true,
            columns: [
                
                { field: 'Col1', headerText: 'Column 1', width: 130, filter: { type: 'CheckBox' } },
                { field: 'Col2', headerText: 'Column 2', width: 130},
                { field: 'Col3', headerText: 'Column 3' width: 130 }
                ],
            queryCellInfo: tooltip,
            queryCellInfo: function (args) {             
                $(args.cell).attr({
                    "data-toggle": "tooltip",
                    "data-container": "body",
                    "title": args.data[args.column.field]
                });
            },
            dataBound: function () {             
                this.element.addEventListener('mouseover', function (args) {  

                    if (args.target.classList.contains('e-headercell') && args.target.innerText) {   /

                        var tooltip = new ej.popups.Tooltip({

                            content: args.target.innerText

                        }, args.target)     

                    }

                })
            }

        });
        

        grid.appendTo('#Grid');



Thanks & Regards,
Arul Kumar Ponnusamy

7 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team February 27, 2020 11:57 AM UTC

Hi Arul, 
 
Greetings From Syncfusion Support 
 
Query#: We need to bind the field value to the dropdown instead of static data. 
 
Based on your requirement we have prepared a sample of Grid with WebAPI Adaptor and bind the dynamic dataSource to the dropdown which was rendered as FilterBar template for the EmployeeID column.  
 
Please refer the below code example and sample for more information.  
 
Index.cshtml 
 
  <div id="Grid"> 
    </div> 
 
<script type="text/javascript"> 
    $(function () { 
        var data = new ej.data.DataManager({ 
            url: '/api/Orders', 
            adaptor: new ej.data.WebApiAdaptor(), 
            crossDomain: true 
        }); 
        var elem; 
        var gridObj; 
        var grid = new ej.grids.Grid({ 
            dataSource: data, 
            allowPaging: true, 
            allowFiltering: true, 
            pageSettings: { pageSize: 15 }, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, isPrimaryKey: true }, 
                { 
                    field: 'EmployeeID', filterBarTemplate: { 
                create: function(args) { 
                          elem = document.createElement('input'); 
                            return elem; 
                }, 
                        write: function (args) { 
                            gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
                            var dropdown = new ej.dropdowns.DropDownList({ 
                                dataSource: data, 
                                fields: { text: 'EmployeeID', value: 'EmployeeID' },   //it helps to bind the EmployeeID value to the dropdown 
                                change: function (args) { 
                                   gridObj.filterByColumn('EmployeeID', 'equal', args.value); 
                                } 
                            }); 
                            dropdown.appendTo(args.element); 
                }, 
            }, 
                    width: 140, headerText: 'Employee ID' 
                }, 
                { field: 'ShipCountry', headerText: 'Ship Country', width: 140 } 
            ] 
        }); 
 
        grid.appendTo('#Grid'); 
    }); 
</script> 
 
 
Regards, 
Prasanna Kumar N.S.V 
 


AK Arul Kumar March 2, 2020 07:35 AM UTC

Hi Prasanna,

Thanks for the support. Dropdown filtering works fine with the below code. But We're not able to clear the selected option in the dropdown. Is there any way to clear the selected option in the Dropdown filter.


Thanks & Regards,
Arul Kumar Ponnusamy

TS Thiyagu Subramani Syncfusion Team March 2, 2020 01:30 PM UTC

Hi Arul, 

Thanks for your update. 

Query : Is there any way to clear the selected option in the Dropdown filter. 
 
Yes, we have the default property called showClearButton to achieve this requirement. 

By default showClearButton value as false. when it as true we able to clear the dropdown value using clear icon. If dropdown value as null, using clearFiltering method you can clear the grid filter. Please refer to the below updated code in write function. 

write: function (args) { 
       gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        var dropdown = new ej.dropdowns.DropDownList({ 
              dataSource: data, 
              fields: { text: 'EmployeeID', value: 'EmployeeID' }, 
              showClearButton : true, 
              change: function (args) { 
                  if (args.value === null) { 
                     gridObj.clearFiltering(); 
                  } else { 
                 gridObj.filterByColumn('EmployeeID', 'equal', args.value); 
              }  
. . . . . 
            }, 
 

 

                           : https://ej2.syncfusion.com/documentation/api/grid/#clearfiltering 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S. 


AK Arul Kumar March 17, 2020 11:41 AM UTC

Hi Thiyagu,

The below example works fine. But the Dropdown filter has duplicate values (It's actually a Text Filed and not unique).  Is there any possibility to bind only distinct values to the filtering dropdown?




Thanks & Regards,
Arul Kumar Ponnusamy

TS Thiyagu Subramani Syncfusion Team March 18, 2020 10:33 AM UTC

Hi Arul Kumar, 

Thanks for your update. 

To achieve your requirement, we suggest you to use Distinct method for the dropdown data. Please refer the below code. 

[OrdersControllers.cs] 
. . . . .  
if (queryString.Keys.Contains("$inlinecount")) 
            {  // for grid 
                return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 
            } 
            else 
            {  // for dropdown 
                return new { Items = data.Select(O => O.EmployeeID).Distinct().ToList(), Count = data.Select(O => O.EmployeeID).Distinct().Count() }; 
            } 


Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S. 


AK Arul Kumar March 18, 2020 01:31 PM UTC

Hi Thiyagu,

Thanks for the response. The above solution brings the unique values and gets bonded in the Filter dropdown. But now the Clear Filter  button was not shown in the dropdown.


Thanks  & Regards,
Arul Kumar Ponnusamy

TS Thiyagu Subramani Syncfusion Team March 18, 2020 01:50 PM UTC

Hi Arul, 

Thanks for your update. 

Your reported issue will not be reproduced our side. Please find the below code in your application. it’s working fine. 

write: function (args) { 
 .. .  
var dropdown = new ej.dropdowns.DropDownList({ 
           dataSource: data, 
            fields: { text: 'EmployeeID', value: 'EmployeeID' }, 
             showClearButton : true, 
            change: function (args) { 
             if (args.value === null) { 
             gridObj.clearFiltering(); 
                  } else { 
         gridObj.filterByColumn('EmployeeID', 'equal', args.value); 
         }  
             } 
}); 
 dropdown.appendTo(args.element); 
} 

Screenshot: 

 


Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Loader.
Up arrow icon