Syncfusion Angular Grid Filter Bar not showing expression symbol for greaterThan

[Marcel]

Hi,

I am currently using a grid with the filter bar that contains a column with type number.

And we can do filters by doing ">4500" and it creates a filter with "greaterThan" as specified in the documentation. (Filter bar docs link)

But if I specify that same filter as the default filter, the filter works correctly, but it only shows "4500" on the filter input.

I wanted to show ">4500" in the filter input.

Without the ">" symbol there is no visual indication that the "greaterThan" is being used, and users assume its the "equal" operator.

Also tried to use the grid.filterByColumn but also does the same.

Can I make the filters for "greaterThan" show with the ">" on the filter bar?

Or do I need to setup the default filter differently?

Ex:

Setting the default filter:

this.filterSettings.columns = [

      { field: 'myField', operator: 'greaterThan', value: 4500 }

    ];

And the column config:

{

    field: 'myField',

    headerText: 'My Field',

    width: '110',

    type: "number"

}

Kind Regards,

Marcel

[Rajapandi Ravi]

Hi Marcel, 

Greetings from syncfusion support 

From validating your query, we could see that you like to display the greaterThan sign while performing initial filtering. Based on your query we have prepared a sample and achieve your requirement by using actionComplete event of Grid. Please refer the below code example and sample for more information. 

 

 

export class AppComponent { 

    public data: Object[]; 

    public ddldata: Object[]; 

    public pageOptions: Object; 

    public category: string[]; 

 

    @ViewChild('grid') 

    public grid: GridComponent; 

    public filterOptions: FilterSettingsModel; 

     

    constructor( ) { 

         

    } 

 

    complete(args) { 

      if(args.requestType === "filtering") { 

        (document.getElementsByClassName('e-filtertext')[3] as any).value = ">"+args.currentFilterObject.value;      //set the sign value here 

      } 

    } 

     

    public ngOnInit(): void { 

        this.data = categoryData; 

        this.pageOptions = { pageSize: 10, pageCount: 5 }; 

        this.category = ['All', 'Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals', 

            'Meat/Poultry', 'Produce', 'Seafood']; 

        this.ddldata = this.category; 

        this.filterOptions = { 

            columns: [{ field: 'UnitsInStock', operator: 'greaterThan', value: 17 }] 

        }; 

    }} 

Sample: https://stackblitz.com/edit/angular-juybzc?file=app.component.ts 

Regards,
Rajapandi R