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.
|
<button onclick="resetFilter()">Reset Filter</button>
<br/>
<br/>
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").AllowFiltering().Height("400").Columns(col =>
{
col.Field("OrderID").HeaderText("OrderID").Width("120").IsPrimaryKey(true).Add();
col.Field("EmployeeID").HeaderText("EmployeeID").Width("120").Add();
col.Field("CustomerID").HeaderText("FirstName").Width("120").Add();
col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
}).Render()
</div>
<script>
function actionComplete(args) {
if (args.requestType === 'filtering') {
var currentFlColumn = args.currentFilteringColumn;
curFilterCol = this.getColumnByField(args.currentFilteringColumn);
var alreadyFltrEle = this.element.querySelectorAll('.e-col-filtered');
// header indicate color removed
for (var i = 0; i < alreadyFltrEle.length; i++) {
alreadyFltrEle[i].classList.remove('e-col-filtered');
}
// header indicate color added
for (var j =0; j < this.filterSettings.columns.length; j++) {
var flcolFiled = this.filterSettings.columns[j].field;
var fltrColumn = this.getColumnByField(flcolFiled);
var targtEle = this.element.querySelectorAll("[e-mappinguid ='" + fltrColumn.uid + "']")[0].parentElement;
targtEle.classList.add('e-col-filtered');
}
}
}
function resetFilter() {
var gridObj = document.getElementById("Grid")["ej2_instances"][0];
gridObj.clearFiltering();
}
</script>
|
|
[index.js]
export class Filtering extends SampleBase {
constructor() {
super(...arguments);
}
resetFilter() {
this.gridInstance.clearFiltering();
this.gridInstance.refreshHeader();
}
actionComplete(args){
if (args.requestType === 'filtering') {
(args.currentFilteringColumn);
var alreadyFltrEle = this.gridInstance.element.querySelectorAll('.e-col-filtered');
// header indicate color removed
for (var i = 0; i < alreadyFltrEle.length; i++) {
alreadyFltrEle[i].classList.remove('e-col-filtered');
}
// header indicate color added
for (var j =0; j < this.gridInstance.filterSettings.columns.length; j++) {
var flcolFiled = this.gridInstance.filterSettings.columns[j].field;
var fltrColumn = this.gridInstance.getColumnByField(flcolFiled);
var targtEle = this.gridInstance.element.querySelectorAll("[e-mappinguid ='" + fltrColumn.uid + "']")[0].parentElement;
targtEle.classList.add('e-col-filtered');
}
}
}
render() {
return (<div className='control-pane'>
<div className='control-section row'>
<div style={{ padding: '14px 0' }}>
<div className="select-wrap">
<button onClick={this.resetFilter.bind(this)}>Reset Filter</button>
</div>
</div>
<GridComponent dataSource={categoryData} allowPaging={true} ref={grid => this.gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true} actionComplete={this.actionComplete.bind(this)}>
<ColumnsDirective>
. . . .
</ColumnsDirective>
<Inject services={[Filter, Page]}/>
</GridComponent>
</div>
|
