Grid Filters are not working for the columns which uses ejs-dropdownlist

[kiran kiru]

I have created a grid which uses ejs-dropdownlist for 3 columns , when we try to filter those columns it fails and populates undefined value in the filter section. Let us know the fix required to handle the filter for Low,Medium and High columns

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

[Santhosh Iruthayaraj]

Hi Kiran,

Greetings from Syncfusion support.

We have validated the code sample you shared and noticed that you are utilizing the format property inside the stacked column with a value of “ ’n’ ” which is invalid. The format provided in the format property will apply to both column values and the filtered values shown in the filter menu. Since you have provided an invalid format, the Grid cannot convert the values to that format, affecting the filter functionality. Since you have used the Column Template feature to display the column values, the column values are displayed as expected because the format property does not affect the values inside the template. However, if you remove the template from the stacked column in your application, you will observe that the column values also will not be rendered because of the invalid format. To resolve this scenario, we recommend removing the format property with the value 'n' from the stacked columns. We have prepared a sample based on your code snippet with a working filter. Please find the sample below for your reference:

Sample: https://stackblitz.com/edit/angular-grid-with-stacked-headers

We also noticed that you want to perform editing operations in the Grid. To perform editing operations, it is essential to have a Primary Key column in the Grid to uniquely identify the records to be edited. We recommend setting a Primary Key column in your Grid component by setting the columns.isPrimaryKey property to true for any one of the columns with a unique value for each record. We have already explained this in our documentation, which you can find at the following link. We have also implemented the same in the provided sample above for your reference:

Editing: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit

Please let us know if you have any further queries.

Regards,

Santhosh I

[Kiran B S]

Thank you Santhosh . filterting is working fine now after removing the format property with the value 'n' from the stacked columns

[Aruna Shree Natarajan]

Thanks for the update. We are glad that your issue has been resolved. Please let us know if you need anu further assistance in future.