We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Want to Achieve menu filter with Side panel filter.

Hello,

 

I want to Achieve Server side filtering with Syncfusion EJ2(Javascript) grid. I want to achieve side panel filtering plus menu type filtering. For menu type I can set filterSettings: {type:'Menu'}, but for side panel filter (Which will be exact same as menu filter but on click of a button it will appear as a bootstrap side

navigation and then user will apply filters) what should be done. I want to show both of them on certain conditions and only one of them on certain

conditions.

 

Please refer the screenshot for side panel filter.



 

Let me know if you don’t understand my question. Basically I want custom filter on the grid which will appear as a side panel and work exactly as menu filter. I want both of them as you can see in the screenshot. 

 

Thanks


3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 3, 2019 01:08 PM UTC

Hi Shweta , 

Greetings from syncfusion support 

Query : I want custom filter on the grid which will appear as a side panel and work exactly as menu filter. 
 
We have analyzed your query and prepared a sample. In the below, we have created a dropdown filter containing all columns. In the dropdown we have given a option like Clear filter which allows you to clear the filtered content in the grid. This was done by clearFiltering() method and the filtering operation was done by filterByColumn() method by giving dropdown selected value as parameter .  Please refer to the code snippet and sample for more reference. 
 
Index.js 

    var OrderID = [                                        // dropdown content for filter menu 
        { id: '10248', type: '10248' }, 
        { id: '10249', type: '10249' }, 
        { id: '10250', type: '10250' }, 
        { id: '10251', type: '10251' }, 
        { id: 'clear', type: 'Clear Filter' }, 
    ]; 
        var CustomerID = [ 
        { id: 'VINET', type: 'VINET' }, 
        { id: 'ALFKI', type: 'ALFKI' }, 
        { id: 'HANAR', type: 'HANAR' }, 
        { id: 'BOLID', type: 'BOLID' }, 
        { id: 'clear', type: 'Clear Filter' }, 
    ]; 
            var ShipCountry = [ 
        { id: 'France', type: 'France' }, 
        { id: 'Germany', type: 'Germany'}, 
        { id: 'Brazil', type: 'Brazil' }, 
        { id: 'clear', type: 'Clear Filter' }, 
    ]; 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        width:950, 
        allowPaging: true, 
        allowFiltering: true, 
        filterSettings: { type: 'Menu' }, 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Center' }, 
            { field: 'CustomerID', headerText: 'Customer Name', width: 150,textAlign: 'Center' }, 
            { field: 'ShipCountry', headerText: 'Ship Country' ,width: 120, textAlign: 'Center' } 
        ], 
        pageSettings: { pageCount: 5 } 
    }); 
    grid.appendTo('#Grid'); 

    var dropDownFilterType = new ej.dropdowns.DropDownList({ 
        dataSource: OrderID, 
        fields: { text: 'type', value: 'id' }, 
        value: 'Menu', 
        change: function (e) { 
            var dropSelectedValue = e.value; 
            if(dropSelectedValue == "clear"){                     // this will perform when clear filter is selected 
                 grid.clearFiltering();                                        // clearfiltering method calling 
            } 
            else{ 
            var data = parseInt(dropSelectedValue);                // convert the OrderID integer value 
            grid.filterByColumn("OrderID", "equal", data);    // filter the selected value 
            } 
        } 
    }); 
    dropDownFilterType.appendTo('#OrderID'); 

     var dropDownFilterType = new ej.dropdowns.DropDownList({ 
        dataSource: CustomerID, 
                     
    }); 
    dropDownFilterType.appendTo('#CustomerID'); 

     var dropDownFilterType = new ej.dropdowns.DropDownList({ 
        dataSource: ShipCountry, 
                    
    dropDownFilterType.appendTo('#ShipCountry'); 




Please get back to us if you need further assistance 

Regards, 
Seeni Sakthi Kumar S 



SH shweta December 5, 2019 02:16 PM UTC

Hi,

Thanks! But your code does not work without filterSettings: { type: 'Menu' }, As I said I have three Conditions:

1) Only Panel Filter with a true/False Flag

2) Only menu Filter with a true/false flag

3) Both the filters when both are true

Also Panel Filter functionality is to be achieved on click of "apply filter"(one query should be created containing all filter values) button.

Also one of the fields can be a datepicker too. This whole thing needs to by dynamic if one column contains date then datepicker should be available, with that particular column title on top.
then if another column value is a string then dropdown should be available with search in dropdown functionality with that particular column title on top.
then if another column value is number then default dropdown should be available with that particular column title on top.
then if column vale is alphanumeric then multiselect dropdown should be available with that particular column title on top.

now a query should be generated containing all filter values and should be sent to backend then result should appear. Its a combine thing. this can be achieved using
HTML form.

on click of "clear button" whole form should get reset (grid data should reset).

Thanks




SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 9, 2019 01:23 PM UTC

Hi Shweta , 

Greetings from syncfusion support 

We have analyzed your query and prepared a sample according to that. Please refer the below code snippet and sample for more details 

Query : Dynamically set the column type for Panel filter 

Here we have set the Datepicker type for the columns contains Date, and dropdown list for the columns contains string. You customize the columns to any type by the following method. 

Index.js 

var len = grid.columns.length; 
for(var i=0; i<len; i++){ 
    if(grid.columns[i].type == "number" ){                                                      // Check the column type as “number”, “Date” 
      var dropDownFilterType1 = new ej.dropdowns.DropDownList({       // Dropdown for Number type columns 
      dataSource: OrderID, 
      fields: { text: 'type', value: 'id' }, 
}); 
dropDownFilterType1.appendTo('#OrderID'); 
    if(grid.columns[i].type == "string" ){ 
        var dropDownFilterType2 = new ej.dropdowns.DropDownList({       // Dropdown for String type columns 
      dataSource: OrderID 
        dataSource: CustomerID, 
        fields: { text: 'type', value: 'id' }, 
}); 
dropDownFilterType2.appendTo('#CustomerID'); 
   if(grid.columns[i].type == "date" ){ 
      var datefilter = new ej.calendars.DatePicker();                                        // DatePicker for Date type columns 
      dataSource: OrderID, 
      datefilter.appendTo('#OrderDate'); 
    } 
  } 


Query : Only Menu for one condition and Panel for another and both for another 

Here we have used the button click to show Panel, Menu filter and for both of them.  And a button like “Apply filter ” is used to initialize the filter operation and another like “Clear filter ” is used to clear the filtering

Index.js 

var grid = document.getElementById("Grid").ej2_instances[0]; 

   var clear = new ej.buttons.Button({}, '#clear');                       // for clear button the datasource is binded  
   clear.element.onclick = function(){ 
     grid.dataSource = data; 
   }; 

    var mon = document.getElementById("shows");              
    mon.hidden = true;                                                                   // initially the panel is in hidden state 
    var showpanel = new ej.buttons.Button({},'#showpanel'); 
    showpanel.element.onclick = function(){                                 
    grid.refreshColumns()                                                              // columns is refreshed to exit the previous actions 
    grid.allowFiltering = false;                                                       //  allowfiltering is false for panel filtering 
     mon.hidden = false;                                                                //  Panel is now showned 
   }; 

    var showfilter = new ej.buttons.Button({},'#showfilter'); 
    showfilter.element.onclick = function(){ 
        grid.allowFiltering = true;                                                   // This will make the allow filtering to true 
        mon.hidden = true;                                                              // This again make the panel to hide  
   }; 

    var showboth = new ej.buttons.Button({},'#showboth'); 
    showboth.element.onclick = function(){ 
        grid.allowFiltering = true;                                                    // This will make the allow filtering to true  
        mon.hidden = false;                                                              // This again make the panel to hide 
    }; 
    var applyfilter = new ej.buttons.Button({},'#applyfilter'); 
    applyfilter.element.onclick = function(){ 
        var id = dropDownFilterType1.value;                                 //get the values selected in OrderID Dropdown 
        var cust_id = dropDownFilterType2.value;                        //get the values selected in CustomerID Dropdown 
        var orderdate = datefilter.value;                                         //get the values selected in Datepicker 
        var less =  orderdate.setDate(orderdate.getDate()-1); 
        var more =  orderdate.setDate(orderdate.getDate()+2);  
        var predicate = new ej.data.Predicate('OrderID', 'equal', id);       // Selected OrderID value is searched in the grid  
              predicate = predicate.and('CustomerID', 'equal', cust_id);      // Selected CustomerID value is searched in the grid 
              predicate = predicate.and('OrderDate', 'greaterthan',less), 
                                   predicate.and('OrderDate', 'lessthan', more);      
        var predicate = new ej.data.Predicate('OrderDate', 'greaterthan',new Date(less)); 
                                  predicate = predicate.and('OrderDate', 'lessthan', new Date(more));            // Selected Date is searched in the grid 
            new ej.data.DataManager(data).executeQuery(new ej.data.Query().where(predicate)) 
    .then((e) => { 
            grid.dataSource = e.result;                                     // Then the filtered result is append to grid datasource 
        }); 
      }; 


HTML file is showed below for more reference 

Index.html 

<html><head><script src="//ej2.syncfusion.com/javascript/demos/grid/filter-menu/datasource.js" type="text/javascript"></script> 
    <div id="container">                               
        <button id="showpanel" class="e-flat">Show Panel</button>             // Button for Panel Show 
        <div id="Grid"></div>         
    </div> 

    <div id="container"> 
        <button id="showfilter" class="e-flat">Show Filter</button>                  // Button for Filter  
        <div id="Grid"></div>         
    </div> 

    <div id="container"> 
        <button id="showboth" class="e-flat">Show both</button>                  // Button for Both  
        <div id="Grid"></div>         
    </div> 

<div id="shows"> 
    <div id="container"> 
        <button id="clear" class="e-flat">Clear Filter</button>                         // Button for Clear filtering 
        <div id="Grid"></div>         
    </div> 

    <div id="container"> 
        <button id="applyfilter" class="e-flat">apply Filter</button>               // Button for Apply filtering 
        <div id="Grid"></div>         
    </div> 

<div class="col-lg-3 property-section"> 





Please get back to us if you need further assistance 


Regards,
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon