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.
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
|
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');
|
|
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');
}
} |
|
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
});
}; |
|
|
|
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">
|
