Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
145174 | Jun 11,2019 09:57 AM UTC | Jul 25,2019 08:44 AM UTC | Angular - EJ 2 | 8 |
![]() |
Tags: Grid |
App.component.html
<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' (actionComplete)="complete($event)" [pageSettings]='pageSettings' [filterSettings]='filterSettings'>
<e-columns>
. . .
</ejs-grid>
App.component.ts
export class AppComponent {
. . .
@ViewChild('grid', {static: true})
public grid: GridComponent;
ngOnInit(): void {
this.data = orderDataSource;
this.dateMask = new MaskedTextBox({ //initializing the maskedinputbox
width: 200,
cssClass:'e-maskalign',
mask: '[0-3][0-9]/[0-1][0-9]/[0-3][0-9][0-9][0-9]',
});
this.numericBox = new NumericTextBox( { //initializing the numericbox
min: 0,
max: 20000,
format: '#',
cssClass:'e-numericalign',
width:210,
});
this.pageSettings = { pageCount: 5 };
this.filterSettings = { type: 'Excel' };
}
complete (args) {
if (args.requestType == 'filterafteropen') {
if (args.columnType === 'number' && args.filterModel && !args.filterModel.dlg.querySelector('.e-numericalign')) {
this.filterModel = args.filterModel; //rendering masked textbox for number column
args.filterModel.sInput.parentElement.remove();
var numericInputElement = document.createElement('INPUT');
args.filterModel.dlg.querySelector('.e-contextmenu-wrapper').appendChild(numericInputElement);
this.numericBox.appendTo(numericInputElement);
this.numericBox.element.classList.add('e-searchinput');
this.numericBox.element.onkeyup = () => this.filterModel.refreshCheckboxes(); //refreshing the checkboxes for each ketstroke
args.filterModel.searchBox = this.numericBox.element.parentElement;
args.filterModel.sInput = this.numericBox.element;
}
if (args.columnType == 'date' && args.filterModel && !args.filterModel.dlg.querySelector('.e-maskedtextbox') ) {
this.filterModel = args.filterModel; //rendering masked textbox for datecolumn
args.filterModel.sInput.parentElement.remove();
var dateInputEle = document.createElement('INPUT');
args.filterModel.dlg.querySelector('.e-contextmenu-wrapper').appendChild(dateInputEle);
this.dateMask.appendTo(dateInputEle);
this.dateMask.element.classList.add('e-searchinput');
args.filterModel.searchBox = this.dateMask.element.parentElement;
args.filterModel.sInput = this.dateMask.element;
this.dateMask.change = () => this.filterModel.refreshCheckboxes();
//refreshing the checkboxes for each ketstroke
}
}
}
} |
export class AppComponent {
. . .
ngOnInit(): void {
this.data = new DataManager({ url: SERVICE_URI + 'api/Orders', adaptor: new WebApiAdaptor });
this.pageSettings = { pageCount: 3 };
this.dateMask = new MaskedTextBox({
width: 200,
created: ()=>{this.dateMask.value = null},
showClearButton: true,
cssClass: 'e-maskalign',
mask: '[0-3][0-9]/[0-1][0-9]/[0-3][0-9][0-9][0-9]',
});
this.numericBox = new NumericTextBox({
min: 0,
max: 20000,
showClearButton: true,
created: ()=>{this.numericBox.value = null},
format: '#',
cssClass: 'e-numericalign',
width: 210,
});
this.pageSettings = { pageCount: 5 };
this.filterSettings = { type: 'Excel' };
}
complete(args) {
if (args.requestType == 'filterafteropen') {
if (args.columnType === 'number' && args.filterModel && !args.filterModel.dlg.querySelector('.e-numericalign')) {
this.filterModel = args.filterModel;
args.filterModel.sInput.parentElement.remove();
var numericInputElement = document.createElement('INPUT');
args.filterModel.dlg.querySelector('.e-contextmenu-wrapper').appendChild(numericInputElement);
this.numericBox.appendTo(numericInputElement);
this.numericBox.element.classList.add('e-searchinput');
this.numericBox.element.onkeyup = () => this.filterModel.refreshCheckboxes();
this.numericBox.element.oninput = this.addFilterParamsOnKeyUp.bind(this, args); // binding oninput event for numericBox
args.filterModel.searchBox = this.numericBox.element.parentElement;
args.filterModel.sInput = this.numericBox.element;
}
if (args.columnType == 'date' && args.filterModel && !args.filterModel.dlg.querySelector('.e-maskedtextbox')) {
this.filterModel = args.filterModel;
args.filterModel.sInput.parentElement.remove();
var dateInputEle = document.createElement('INPUT');
args.filterModel.dlg.querySelector('.e-contextmenu-wrapper').appendChild(dateInputEle);
this.dateMask.appendTo(dateInputEle);
this.dateMask.element.classList.add('e-searchinput');
args.filterModel.searchBox = this.dateMask.element.parentElement;
args.filterModel.sInput = this.dateMask.element;
this.dateMask.change = (args) => {this.filterModel.refreshCheckboxes()};
this.dateMask.element.onkeyup = this.addFilterParamsOnKeyUp.bind(this, args); // binding onkeyup event for maskedBox
}
}
}
public addFilterParamsOnKeyUp(args, args2) {
this.grid.query.addParams("where" + args2.currentTarget.value, args2.currentTarget.value); //here you can add params as per your requirement
console.log(this.grid.query)
}
} |
ngOnInit(): void {
this.data = new DataManager({ url: SERVICE_URI + 'api/Orders', adaptor: new WebApiAdaptor });
this.pageSettings = { pageCount: 3 };
this.dateMask = new MaskedTextBox({
width: 200,
change : (args) => {
if (args.value === '' && args.isInteracted) {
this.dateMask.element.value = '';
this.isRefreshMask = true; //refreshing the checkbox based on while clearing
}
this.filterModel.refreshCheckboxes();
if (this.isRefreshMask) {
this.dateMask.refresh();
this.isRefreshMask = false;
}
},
created: ()=>{this.dateMask.value = null},
showClearButton: true,
cssClass: 'e-maskalign',
mask: '[0-3][0-9]/[0-1][0-9]/[0-3][0-9][0-9][0-9]',
});
this.numericBox = new NumericTextBox({
min: 0,
max: 20000,
showClearButton: true,
change : (args) => {
if (args.value === null && args.isInteracted) {
this.filterModel.refreshCheckboxes();//refreshing the checkbox based on while clearing
}
},
created: ()=>{this.numericBox.value = null},
format: '#',
cssClass: 'e-numericalign',
width: 210,
}); |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.