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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid filter formatting

Thread ID:





144486 May 8,2019 04:23 PM UTC May 13,2019 05:06 AM UTC Angular - EJ 2 3
Tags: Grid
Julio Cezar Mendonca
Asked On May 8, 2019 04:23 PM UTC

Good afternoon,

I need the grid filter (filter type = menu) to have a limitation of values (0% to 100%) and at the same time understand that 18% is 18 and not 0.18.

Grid column code:

<e-column field = 'Aliquot' headerText = 'Aliquot' [filter] = "{type: 'Menu'}" format = 'P2' textAlign = 'Left' width = '12% '> </ e-column>

The following image is an example.

I'm waiting and grateful for the attention,

Júlio Cézar Mendonça

Attachment: Aliquot_e4381d63.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 10, 2019 01:45 PM UTC

Hi Julio, 
Greetings from Syncfusion support. 
We have checked your query and you can achieve your requirement by using the format property of Numeric textbox. Please refer the below code snippet, sample link and documentation link. 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    providers: [FilterService] 
export class AppComponent { 
    public data: Object[]; 
     public filter: any; 
     public dropInstance: NumericTextBox; 
    public grid: GridComponent; 
   public filterOptions: FilterSettingsModel; 
    ngOnInit(): void { 
        this.data =[ . . . . 
        this.filterOptions = { 
           type: 'Menu' 
    this.filter = { 
            ui: { 
                create: (args: { target: Element, column: object }) => { 
                    const flValInput: HTMLElement = createElement('input', { className: 'flm-input' }); 
                    this.dropInstance = new NumericTextBox({ 
                        format: "###'%'" 
                write: (args: { 
                    column: object, target: Element, parent: any, 
                    filteredValue: number 
                }) => { 
                    this.dropInstance.value = args.filteredValue; 
                read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => { 
                    args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value); 

Please get back to us for further assistance. 
Thavasianand S. 

Julio Cezar Mendonca
Replied On May 10, 2019 04:12 PM UTC

Worked perfectly. Thank you for your help.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 13, 2019 05:06 AM UTC

Hi Julio, 
We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S.


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon