Custom dropdown filter for grid numeric column - default not selected

[Martin Strojek]

Hi,

i would like to create a dropdown filter for a numeric value column and can't get it running via the documentation.

My grid template looks like this:

         [filterSettings]="filterOptions">

   

...

       

           e-column field="ShipStatus" editType="dropdownedit" [filterBarTemplate]="shipStatusFilterBarTemplate"

       

...

The component.ts constructor:

// initialize default filter value (WORKING!)

this.filterOptions = {

            showPredicate: false,

            filteredColumns: [

                {

                    field: 'ShipStatus', matchCase: false, operator: [ej.FilterOperators.equal], predicate: ['and'], value: 1

                }

            ]

        };

// try to create a new dropdown filter for the ShipStatus column

tthis.shipStatusFilterBarTemplate = {

read: function (args: any) {

this.filterColumn(args.column.field, "equal", args.element.val(), "and", true)

},

write: function (args: any) {

var data = [

{ text: "Ready", value: "1" },

{ text: "New", value: 0 },

{ text: "Shipped", value: 20 },

{ text: "Canceled", value: 50 }

]

args.element.ejDropDownList({ width: "100%", dataSource: data, change: ej.proxy(args.column.filterBarTemplate.read, this, args) })

}

};

The filter is shown but the default value (set in filter options and represented in grid result) is not selected in the filter menu.

Any suggestions

[Manivannan Padmanaban]

Hi Martin, 

Thanks for contacting syncfusion support. We are happy to assist you. 

Query: The filter is shown but the default value (set in filter options and represented in grid result) is not selected in the filter menu. 

 

In filterbar template, we have render the desired filter control in the write function so by default the filtered value is not displayed in the filtermenu. We need to define the filtered value in the write function to display value in filtermenu. Please refer the below code example, 

<ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowFiltering]="true"  [filterSettings]="filterOptions"> 

    <e-columns> 

        ………………. 

        <e-column field="EmployeeID" editType="dropdownedit"  headerText="EmployeeID" [filterBarTemplate]="EmployeeIDFilterBarTemplate" width="100"></e-column> 

        ………………………. 

    </e-columns> 

</ej-grid> 

                                                                   // Ts file 

export class GridComponent { 

    .. 

        constructor() 

        { 

            

            this.filterOptions = { 

                showPredicate: false, 

                filteredColumns: [{ field: "EmployeeID", operator: "equal", value: "5", predicate: "and" }] 

            }; 

            

             ………………………. 

        this.EmployeeIDFilterBarTemplate={ 

            read: function (args: any) { 

                this.filterColumn(args.column.field, "equal", args.element.val(), "and", true) 

            }, 

            write: function (args: any) { 

         

                var data = [ 

                    { text: "Ready", value: "1" }, 

                    { text: "New", value: "0" }, 

                    { text: "Shipped", value: "5" }, 

                    { text: "Canceled", value: "6" } 

                ] 

                var val= this.model.filterSettings.filteredColumns[0].value; 

                

                args.element.ejDropDownList({ width: "100%", dataSource: data, value:val, change: ej.proxy(args.column.filterBarTemplate.read, this, args) }) 

            } 

 

        }; 

         

        } 

     } 

Output: 

 

Regards, 

Manivannan Padmanaban. 

[Martin Strojek]

Great - that the solution i was looking for.

Thanks a lot.

[Manivannan Padmanaban]

Hi  Martin, 

We are happy to hear that your problem has been resolved.  Please let us know if you need any further assistance. 

Regards, 

Manivannan Padmanaban.