How to write the dropdownlist , numerictextbox and datepicker filter template in grid filter bar ?

[lorryl]

I've saw the "Filter bar template with custom component" in the syncfusion document, but I don't want to use the select element.

I want to use syncfusion angular control, like DropDownList, NumericTextBox, so how to write the dropdownlist and numerictextbox filter template in grid filter bar ?

like below picture show

[Hariharan J V]

Hi lorryl, 

 

Thanks for contacting Syncfusion support. 

 

Query: I've saw the "Filter bar template with custom component" in the syncfusion document, but I don't want to use the select element. I want to use syncfusion angular control, like DropDownList, NumericTextBox, so how to write the dropdownlist and numerictextbox filter template in grid filter bar? 

 

We have validated your query and we have prepared a simple sample based on your requirement. In this sample, we have bind DropDownList and NumericTextBox control in particular column by using filterBarTemplate. Please find the below code example and sample for your reference. 

 

[code example] [filtering.html] 

</div> 

    <ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]="pageOptions"> 

        <e-columns> 

            ... 

            <e-column field='CustomerID' headerText='Customer ID' width='150' [filterBarTemplate]='templateOptions'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' type= 'date' format= 'yMd' width='180' textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' [filterBarTemplate]='templateOptionsNumeric' format='C2' textAlign='Right' editType='numericedit'></e-column> 

            ...         

       </e-columns> 

    </ejs-grid> 

</div> 

 

[filtering.component.ts] 

... 

... 

    this.templateOptions = {                             // for DropDownList 

      create: (args: { element: Element, column: Column }) => { 

        this.dd = <any>document.createElement('select'); 

        this.dd.id = 'CustomerID'; 

        let dataSource: Object[] = orderDatas; 

        this.option = <any>document.createElement('option'); 

        this.option.value = 'All'; 

        this.option.innerHTML = 'All'; 

        this.dd.appendChild(this.option); 

        for (let i: number = 0; i < dataSource.length; i++) { 

          this.option = <any>document.createElement('option'); 

          this.option.value = (<any>dataSource[i]).CustomerID; 

          this.option.innerHTML = (<any>dataSource[i]).CustomerID; 

          this.dd.appendChild(this.option); 

        } 

        return this.dd; 

      }, 

      write: (args: { element: Element, column: Column }) => { 

        this.Drop = new DropDownList({ 

          change: change.bind(this) 

        }); 

 

        this.Drop.appendTo(this.dd); 

      }, 

    }; 

 

    this.templateOptionsNumeric = {                     //for NumericTextBox 

      create: () => { 

        this.elem = document.createElement('input'); 

        return this.elem; 

      }, 

      write: (args) => { 

        this.numeriTextBox = new NumericTextBox({ 

          format: '00.00', 

          value: 10 

        }); 

        this.numeriTextBox.appendTo(this.elem); 

      } 

    }; 

  } 

} 

 

function change(args) { 

  debugger; 

  if (args.value !== 'All') { 

    this.grid.filterByColumn(args.item.parentElement.id.replace('_options', ''), 'equal', args.value); 

  } else { 

    this.grid.removeFilteredColsByField(args.item.parentElement.id.replace('_options', '')); 

  } 

} 

 

 

Please find the sample in below link. 

 

Sample link: https://stackblitz.com/edit/angular-ys1crl-ewtcl8?file=filtering.component.ts 

Please get back to us if you need further assistance on this. 

Regards, 

Hariharan