Column rendering according to datatype

[Namita]

Hi

In Grid, I need to render the column according to their datatype. I am using switch case but it is not working.

Here is my html code:-

 <ejs-grid #genericgrid id={{item.Name}} [dataSource]='gridDataSource' rowHeight='38'

                          [allowSelection]='true'

                          height='190' width="100%" (rowDeselected)='rowDeselected($event)'

                          [toolbar]='toolbar' (toolbarClick)='clickHandler($event)' (rowSelected)='rowSelected($event)'

                          [contextMenuItems]='contextMenuItems' (contextMenuClick)='contextMenuClick($event)'

                          allowSorting='true' showColumnMenu='true'

                          [filterSettings]='filterSettings' allowReordering="true"

                          [allowPdfExport]='true' [allowExcelExport]='true' gridLines='Both'

                          [allowPaging]='true' [pageSettings]='pageSetting' allowResizing='true'

                          allowFiltering='true' (dataStateChange)='dataStateChange($event)'

                          (recordDoubleClick)='recordDoubleClick($event)'>

                  <!--allowGrouping='true'-->

                  <e-columns>

                    <e-column type='checkbox' width='50'></e-column>

                    <ng-container *ngFor="let item of gridColumns">

                      <ng-container [ngSwitch]="item.CustomDataType">

    <e-column *ngSwitchCase="nvarchar" [field]="item.Label" [headerText]="item.Label"></e-column>

    <e-column *ngSwitchDefault [field]="item.Label" [headerText]="item.Label">

    </e-column>

  </ng-container>

                      `<div *ngSwitchCase="'datetime'">

    <e-column [field]="item.Label" [headerText]="item.Label" type="datetime" [format]="DateTimeFormat"></e-column>

  </div>

  <div *ngSwitchCase="'date'">

    <e-column [field]="item.Label" [headerText]="item.Label" type="date" [format]="DateTimeFormat"></e-column>

  </div>

  <div *ngSwitchCase="'bit'">

    <e-column [field]="item.Label" [headerText]="item.Label" displayAsCheckBox='true'></e-column>

  </div>

  <div *ngSwitchCase="'int'">

    <e-column [field]="item.Label" [headerText]="item.Label" type="number"></e-column>

  </div>

  <div *ngSwitchCase="'numeric'">

    <e-column [field]="item.Label" [headerText]="item.Label" type="number"></e-column>

  </div>

                    </ng-container>

                  </e-columns>

                </ejs-grid>

Please help, how can I do that.

Also, I took reference from below link:-

https://stackblitz.com/edit/angular-udaqpk-jb47yt?file=app.component.html

Thanks

Namita

[Rajapandiyan Settu]

Hi Namita, 

 

Thanks for contacting Syncfusion support.  

   

We can reproduce the reported behavior at our end. Currently, we are validating this in our source level and we need time on this. So, we will update the further details on or before July 1^st 2021.  

  

Until then, we appreciate your patience.  

  

Regards,  

Rajapandiyan S  

[Rajapandiyan Settu]

Hi Namita, 

Thanks for your patience. 

We can reproduce the reported behavior at our end. We have considered this as a feature improvement and logged a feature improvement task as “Provide "ng-switch" support for EJ2 Angular components” for this requirement. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our Volume 2, 2021 SP Release.  

  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   

   

Feedback Link: https://www.syncfusion.com/feedback/26568/provide-ng-switch-support-for-ej2-angular-components 

Regards, 

Rajapandiyan S