Grid filter formatting

[Julio Cezar Mendonca]

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]

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. 

 

[app.component.ts] 

@Component({ 

    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; 

    @ViewChild('grid') 

    public grid: GridComponent; 

   public filterOptions: FilterSettingsModel; 

 

    ngOnInit(): void { 

        this.data =[ . . . . 

]; 

        this.filterOptions = { 

           type: 'Menu' 

        };         

    } 

    constructor(){ 

    this.filter = { 

            ui: { 

                create: (args: { target: Element, column: object }) => { 

                    const flValInput: HTMLElement = createElement('input', { className: 'flm-input' }); 

                    args.target.appendChild(flValInput); 

                    this.dropInstance = new NumericTextBox({ 

                        format: "###'%'" 

                    }); 

                    this.dropInstance.appendTo(flValInput); 

                }, 

                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); 

 

                } 

            } 

        }; 

    } 

} 

 

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

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/?no-cache=1#custom-component-in-filter-menu  

Please get back to us for further assistance. 

 

Regards, 

Thavasianand S. 

[Julio Cezar Mendonca]

Worked perfectly. Thank you for your help.

[Thavasianand Sankaranarayanan]

Hi Julio, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.