How to Change the Grid Filter Display values

[Kiran B S]

I want to show Control Modes values like Disabled ,Time Of Day and Visibility Sensor inside the filter options instead of its internal values called 1, 2 and 3 ...

          <ejs-grid #grid

          [dataSource]="data"

          [allowResizing]="true"

          [allowTextWrap]="true"

          [enableHover]="false"

          (dataBound)="onDataBind()"

          [editSettings]="configureEditSettings"

          (queryCellInfo)="onDataGridCellInfo($event)"

          (recordDoubleClick)="rowDoubleClick($event)"

          [allowFiltering]='true' [filterSettings]='filterOptions'

          [allowSorting]="true"

          gridLines="Both"

          height='200'

          [rowHeight]="30"

          (actionComplete)="actionComplete($event)"

         >

            <e-columns>

              <e-column field="turbineName" headerText="{{ 'Turbine' | translate }}" width="70" textAlign="Center"

                [allowEditing]="false">

                <ng-template #headerTemplate>

                  <div class="header-text">

                      {{ 'Turbine' | translate }}

                  </div>

              </ng-template>

                <ng-template #template let-data>

                  <span [ngClass]="'disabled-cell'" [innerHTML]="data.turbineName"></span>

                </ng-template>

             

              </e-column>

              <e-column field="controlMode" headerText="{{'ControlMode' | translate}}" width="70" textAlign='Center'>

                <ng-template #headerTemplate>

                  <div class="header-text">

                      {{ 'ControlMode' | translate }}

                  </div>

              </ng-template>

                <ng-template #template let-data>

                  <p *ngIf="data.controlMode == 0">

                    {{ 'Disabled' | translate }}

                  </p>

                  <p *ngIf="data.controlMode == 1">

                    {{ 'TimeOfDay' | translate }}

                  </p>

                  <p *ngIf="data.controlMode == 2">

                    {{ 'VisibilitySensor' | translate }}

                  </p>

                  <p *ngIf="data.controlMode != 0 && data.controlMode != 1 && data.controlMode != 2">

                    {{ 'Disabled' | translate }}

                  </p>

                </ng-template>

                <ng-template #editTemplate let-data>                      

                  <ejs-dropdownlist [value]="data.controlMode" [dataSource]="controlModeList" [fields]="fields"

                    (change)="onControlModeChange($event, data)" sortOrder="Ascending" textAlign="center"></ejs-dropdownlist>

                </ng-template>

              </e-column>

              <e-column field="hasVisibilitySensor" editType="booleanedit" [edit]="hasVisibilitySensorForGrid"

              headerText="{{ 'HasVisibilitySensor' | translate }}" width="60"

                textAlign="Center" type="boolean" displayAsCheckBox="true">

                <ng-template #headerTemplate>

                  <div class="header-text">

                      {{ 'HasVisibilitySensor' | translate }}

                  </div>

              </ng-template>

              </e-column>

              <e-column field="isRimTurbine" editType="booleanedit" [edit]="isRimTurbineForGrid"

              headerText="{{ 'IsRimTurbine' | translate }}" width="60"

                textAlign="Center" type="boolean" displayAsCheckBox="true">

                <ng-template #headerTemplate>

                  <div class="header-text">

                      {{ 'IsRimTurbine' | translate }}

                  </div>

              </ng-template>

              </e-column>

              <e-column headerText="{{ 'IntensitySetPointsForLevels' | translate }}" width='100' textAlign="center">

               

                <e-stacked-columns>

                  <e-stacked-column field="intensityLevelLow" headerText="{{'Low' | translate}}" width="70"

                    textAlign='Center' minWidth="20" format="'n'" type="number">

                   

                    <ng-template #template let-data>

                      <span>{{data.intensityLevelLow}}</span>

                    </ng-template>

                    <ng-template #editTemplate let-data>                      

                      <ejs-dropdownlist [value]="data.intensityLevelLow" [dataSource]="intensitySetPoints"

                        (change)="IntensityLowChanged($event, data)" sortOrder="Ascending" textAlign="center"></ejs-dropdownlist>

                    </ng-template>

                  </e-stacked-column>

                  <e-stacked-column field="intensityLevelMedium" headerText="{{'Medium' | translate}}" width="70"

                    textAlign='Center' minWidth="20" format="'n'" type="number" enableGroupByFormat="true">

                   

                    <ng-template #template let-data>

                      <span>{{data.intensityLevelMedium}}</span>

                    </ng-template>

                    <ng-template #editTemplate let-data>                      

                      <ejs-dropdownlist #dropdownListMedium [value]="data.intensityLevelMedium" [dataSource]="intensitySetPoints"

                        (change)="IntensityMediumChanged($event, data)" sortOrder="Ascending" textAlign="center"></ejs-dropdownlist>

                    </ng-template>

                  </e-stacked-column>

                  <e-stacked-column field="intensityLevelHigh" headerText="{{'High' | translate}}" width="70"

                    textAlign='Center' minWidth="20" format="'n'" type="number" enableGroupByFormat="true">

                    <ng-template #template let-data>

                      <span>{{data.intensityLevelHigh}}</span>

                    </ng-template>

                    <ng-template #editTemplate let-data>                      

                      <ejs-dropdownlist #dropdownListHigh [value]="data.intensityLevelHigh" [dataSource]="intensitySetPoints"

                        (change)="IntensityHighChanged($event, data)" sortOrder="Ascending" textAlign="center"></ejs-dropdownlist>

                    </ng-template>

                  </e-stacked-column>

                </e-stacked-columns>

              </e-column>

             

            </e-columns>

          </ejs-grid>

[Rajapandi Ravi]

Hi Kiran,

Greetings from Syncfusion support

After reviewing your query, we could see that you like to customize the filter menu and display the modes like Disabled ,Time Of Day and Visibility Sensor in the filter options. So, we suspect that you like to display these modes in the dropdownlist and like to perform the filter by using the modes.

You can achieve your requirement by rendering custom component in filter menu. You can enhance the filtering experience in the Syncfusion Angular Grid component by customizing the filter menu with custom components. This allows you to replace the default search box with custom components like dropdowns or textboxes.

By default, the filter menu provides an autocomplete component for string type columns, a numeric textbox for number type columns, and a dropdown component for boolean type columns, making it easy to search for values.

To customize the filter menu, you can make use of the column.filter.ui property. This property allows you to integrate your desired custom filter component into a specific column of the Grid. We have already discussed about your requirement with our documentation which can be accessed from the below link,

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/filter-menu#custom-component-in-filter-menu

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution.

1)       Share us your exact requirement scenario step by step with detailed description.

2)       Share your datasource structure.

3)       Share your syncfusion package version.

4)       Share the details about on what component you like to display in the filter menu with your modes like Disabled ,Time Of Day and Visibility Sensor.

Regards,

Rajapandi R