Not null, Null, Empty, Not empty are not working with - Filter template
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids'
import { MultiSelectModule, CheckBoxSelectionService,DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule,
MultiSelectModule,
DropDownListAllModule,
CheckBoxModule
],
providers: [FilterService, PageService,CheckBoxSelectionService],
standalone: true,
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100>
<ng-template #filterTemplate let-data>
<input
autocomplete="off"
class="e-input e-control"
type="text"
placeholder="Enter Order id"
value="{{ data?.value }}"
/>
</ng-template>
</e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMd' width=100></e-column>
<e-column field='Verified' headerText='Verified' [displayAsCheckBox]= 'true' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data?: object[];
public filterOptions?: FilterSettingsModel;
ngOnInit(): void {
this.data = data;
this.filterOptions = {
type: 'Menu',
};
}
}
I am using latest version ejs grid. when I try to use filter template and filter with null, not null, empty and not empty
It throws an error and could not continue further
SIGN IN To post a reply.
15 Replies
It throws run time error when click on filter icon here is the error
Noticed below issues
- When I select empty/not empty from its not clear already given input in text/field used for fitler
- When i use as <ejs-datepicker
filter template , its not disabling field when select empty/non empty from filter dropdown list
- Is there any event to listen filter option change event. I mean is it possible to listen the change of highlighted dropdown below
Please help me to fix these issues
Hi Syncfusion ,
Thanks for the support.
Facing one more issue in updated version I have tried in versions 26.2.10 to 26.2.12
I have added below properties to grid
Frozen column works but when try to scroll horizontally, header is not scrolling correctly. It fixed and not scrolling along with values
Please help me to fix this
Note: I have tried isFrozen="true" and freeze="Left" too.
HI Syncfusion team,
In you above sample code, I have just added hide columns in databound as below
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './data';
import {
PageService,
SortService,
FilterService,
ToolbarService,
EditService,
GridModule,
ResizeService,
GridComponent,
} from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [
PageService,
SortService,
FilterService,
ToolbarService,
EditService,
ResizeService,
],
standalone: true,
imports: [GridModule],
})
export class AppComponent {
@ViewChild('grid') grid: GridComponent;
public data: Object[];
public pageSettings: Object;
public filterSettings: Object;
public toolbar: string[];
public editSettings: Object;
public orderidrules: Object;
public customeridrules: Object;
public freightrules: Object;
public sortSettings: Object;
ngOnInit(): void {
this.data = data.slice(0, 10);
this.pageSettings = { pageCount: 5 };
this.filterSettings = { type: 'Excel' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
};
this.orderidrules = { required: true, number: true };
this.customeridrules = { required: true, minLength: 5 };
this.freightrules = { required: true, min: 0 };
this.sortSettings = {
columns: [{ field: 'CustomerName', direction: 'Descending' }],
};
}
databound(): void {
this.grid.hideColumns('Order Date');
}
}
and in html just added below change
Now the scroll is not working as expected
Thanks
Sivasakthi N
SIGN IN To post a reply.
