Grid Does Not Refresh Properly With Dynamic Columns Containing Templates

[Eric Lew]

Created on 9/4/2019 10:30:03 AM UTC by: Eric Lew

Hello,

 

I am trying to create a grid where certain columns have to be generated dynamically as it is not always known how many of these columns are needed at runtime (this is determined by Redux store/server-returned data). Within the cells of these dynamic columns are content that requires <ng-template></ng-template> tags and within the template the data for the relevant row needs to be available, hence, let-data in the <ng-template> tag.

 

The grid renders fine on first loading the component, but on refreshing the grid, e.g. after an edit to the data and retrieving new data from Redux store/server, all columns render, even the dynamic ones, but the cells of those dynamic cells are blank. How can I solve this problem?

 

The code for the grid is as follows.

 

<ejs-grid

  *ngIf="serviceItems"

  #grid

  [dataSource]="devices"

  width="auto"

  [height]="gridHeight"

  [allowResizing]="true"

  [allowSorting]="true"

  [sortSettings]="sortSettings"

  [allowPaging]="true"

  [pageSettings]="pageSettings"

  [allowTextWrap]="true"

  [textWrapSettings]="textWrapSettings"

  (actionComplete)="onGridActionCompleted($event)"

  [@fadeIn]="gridFade"

> 

  <e-columns>

    <e-column field="id" headerText="Id" headerTextAlign="center" textAlign="right" [width]="50"></e-column>

    <e-column field="name" headerText="Name" [width]="150" clipMode="EllipsisWithTooltip"></e-column>

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

      <e-column headerText="{{ item.alias }}" headerTextAlign="center" [width]="75" textAlign="center">

        <ng-template #template let-data>

          <span *ngIf="data.hasIcon[item.name]">

            <span *ngIf="data.availableServices.includes(item.name)">

              <i class="fas fa-check-circle rti-content_ico_tick" title="Available"></i>

            </span>

            <span class="rti-content_ico" *ngIf="!data.availableServices.includes(item.name) && data.alertExclusions[item.name] == null" (click)="requestToExcludeAlert(data.name, item)">

              <i class="fas fa-times-circle rti-content_ico_cross _mod_red" title="Unavailable"></i>

            </span>

            <span class="rti-content_ico" *ngIf="!data.availableServices.includes(item.name) && data.alertExclusions[item.name] != null" (click)="requestToReinstateAlert(data.name, data.alertExclusions, item)">

              <i class="fas fa-times-circle rti-content_ico_cross _mod_white" [title]="'Alert Excluded: ' + data.alertExclusions[item.name].reason"></i>

            </span>

          </span>

        </ng-template>

      </e-column>

    </ng-container>

    <e-column field="osName" headerText="OS" [width]="300" clipMode="EllipsisWithTooltip"></e-column>

    <e-column field="firstSeen" headerText="First Seen" [format]="dateFormatOptions" [width]="150"></e-column>

  </e-columns>

</ejs-grid>

 

Thanks in advance.

[Thavasianand Sankaranarayanan]

Hi Eric, 

 

Greetings from Syncfusion. 

 

Query: Grid Does Not Refresh Properly With Dynamic Columns Containing Templates 

 

We have validated your query and you have mentioned that the after editing the data, the rendered cells are empty. Editing feature requires a primary key column for CRUD operations. You have not defined primary key in any of the grid columns. 

Also Grid actions such as editing, grouping, filtering and sorting etc. will depend upon the column field. If the field is not specified in the template column, the grid actions cannot be performed. But in your code snippets, you have not defined Field property in template column. We suspect that this may be reason for it. So could you please ensure the above mentioned points from your end. 

 

Also, we are quite unclear about your requirement. Could you please share the below details. It will be helpful to provide a better solution. 

 

• You have mentioned that after editing the data, the cells are blank. After editing, whether the template column cells are only becomes blank or other grid columns cells are becomes blank?
• Ensure whether the grid dataSource and data returned from redux store containing same field or not.
• Share a sample dataSource details if possible(both grid and returned redux data).
• Share full grid code snippets.

 

Regards, 

Thavasianand S. 

[Eric Lew]

Hi Thavasianand,

Thank you for your reply. The editing I speak of does not involve the built-in editing facilities of the grid, but instead refers to a change to the data source made via another part of the UI. So when the data in `dataSource` changes I notice the grid respond, but it does not render all cells correctly. Please note that when the grid is loaded for the first time once its parent component is initialised the entire grid renders properly.

Only the cells in the dynamically generated columns are blank; their templates do not render at all since when I check the resulting HTML code there is no content within those cells. All other cells do render properly. I have tried Grid.refresh() to no avail. I have tried to unload and newly load the component within which the grid is embedded but that does not have any effect. I actually have to navigate away from the component and return to it to see it render properly again.

I did not use 'field' in any of the dynamic columns since I thought using <ng-template> and `let-data` would deal with data in those columns as illustrated in your example at https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-template.

Since posting this issue I tried to explore further into this problem. I tried to iterate over the dynamic columns using <ng-template> only instead of using both <ng-container> and <ng-template> as follows:

<ng-template #template ngFor let-item [ngForOf]="serviceItems" let-data>

<e-column headerText="{{ item.alias }}" headerTextAlign="center" [width]="75" textAlign="center">

          <span *ngIf="data.hasIcon[item.name]">

            <span *ngIf="data.availableServices.includes(item.name)">

              <i class="fas fa-check-circle rti-content_ico_tick" title="Available"></i>

            </span>

            <span class="rti-content_ico" *ngIf="!data.availableServices.includes(item.name) && data.alertExclusions[item.name] == null" (click)="requestToExcludeAlert(data.name, item)">

              <i class="fas fa-times-circle rti-content_ico_cross _mod_red" title="Unavailable"></i>

            </span>

            <span class="rti-content_ico" *ngIf="!data.availableServices.includes(item.name) && data.alertExclusions[item.name] != null" (click)="requestToReinstateAlert(data.name, data.alertExclusions, item)">

              <i class="fas fa-times-circle rti-content_ico_cross _mod_white" [title]="'Alert Excluded: ' + data.alertExclusions[item.name].reason"></i>

            </span>

          </span>

      </e-column>

</ng-template>

  

But then I cannot access `data` in `let-data` since it seems to either be null or be equal to the value of `let-item`. I cannot equate `let-data` to anything since I don't know how to access the row data without using `let-data` by itself.

I have verified the data to be the same for the grid before and after it is edited except of course for the edit itself, but that is valid as well.

I cannot share any data as it contains sensitive information.

I hope that assists you in trying to resolve this issue.

Thank you.

[Thavasianand Sankaranarayanan]

Hi Eric, 

 

Thanks for your update. 

 

We have validated the provided information and by default Field is important for all the grid actions. The template column is used to display the information which is not present in the backend(server). For displaying purpose, we don’t have to define Field. But the grid actions (such as Editing, Filtering, Sorting etc) are depend on the column Field property. So we need to define the Field property for template columns. 

 

Also we have checked the reported problem data is not accessible in let-data within ng-template. We are able to access the data in template column by using let-data. 

 

If you are still facing the problem, could you please share video demonstration of the issue, share full grid code snippets. It will be helpful to provide a better solution. 

 

Regards, 

Thavasianand S. 

[Justyna Bajer]

Hi,

I'm struggle with same issue. I'm using complex data as datasource and column template for each column. After change datasource (changing column structure as well) only header are display correctly. In cell is display [object object]. I need format my cell data base on column type and value.

I can two frozen column as well in my grid implementation but after refresh those columns are black.

<e-columns>

        <e-column *ngFor="let col of liv.structure"

                  field="{{col.field}}"

                  clipMode="EllipsisWithTooltip"

                  type="string"

                  headerText="{{col.headerText}}"

                  width="250"

        >

          <ng-template #template

                       let-data

          >

       <div>{{data[col.field]?.values}} 

          </ng-template>

        </e-column>

      </e-columns>

I've tried use rowTempate but frozen columns aren't displayed properly and a lot of grid's functionality aren't work out of the box eg.persist selection, ellipsis with tooltip

[Justyna Bajer]

Hi, 

After changing data source I get error in event actionFailure 

{error: TypeError: item.clearTemplate is not a function

    at ArrayBase.clearTemplate (http://localhost:42…, name: ‘actionFailure’}

error

:

TypeError: item.clearTemplate is not a function at ArrayBase.clearTemplate (http://localhost:4200/vendor.js:3059:12) at _loop_1 (http://localhost:4200/vendor.js:3962:26) at clearTemplate (http://localhost:4200/vendor.js:3971:5) at ComponentBase.clearTemplate (http://localhost:4200/vendor.js:3316:57) at Grid.destroyTemplate (http://localhost:4200/vendor.js:105319:10) at ContentRender.refreshContentRows (http://localhost:4200/vendor.js:84527:19) at ContentRender.immutableModeRendering (http://localhost:4200/vendor.js:85494:12) at GridComponent.<anonymous> (http://localhost:4200/vendor.js:88825:35) at ComponentBase.trigger (http://localhost:4200/vendor.js:3520:15) at Render.dataManagerSuccess (http://localhost:4200/vendor.js:88712:10)

message

:

“item.clearTemplate is not a function”

stack

:

“TypeError: item.clearTemplate is not a function\n at ArrayBase.clearTemplate (http://localhost:4200/vendor.js:3059:12)\n at _loop_1 (http://localhost:4200/vendor.js:3962:26)\n at clearTemplate (http://localhost:4200/vendor.js:3971:5)\n at ComponentBase.clearTemplate (http://localhost:4200/vendor.js:3316:57)\n at Grid.destroyTemplate (http://localhost:4200/vendor.js:105319:10)\n at ContentRender.refreshContentRows (http://localhost:4200/vendor.js:84527:19)\n at ContentRender.immutableModeRendering (http://localhost:4200/vendor.js:85494:12)\n at GridComponent.<anonymous> (http://localhost:4200/vendor.js:88825:35)\n at ComponentBase.trigger (http://localhost:4200/vendor.js:3520:15)\n at Render.dataManagerSuccess (http://localhost:4200/vendor.js:88712:10)”

[[Prototype]]

:

Error

name

:

“actionFailure”

[[Prototype]]

:

Object

[Joseph Christ Nithin Issack]

Hi Justyna,

  Greetings from Syncfusion support.

Thank you for reaching out to us with your inquiry. We understand that you need assistance in resolving an issue you are facing with our grid. In order to provide an accurate and effective solution, we kindly ask that you provide us with the following information:

• Complete grid rendering code.

• A Simple sample that demonstrates the issue you are experiencing.

• A video demo of the issue.

• Syncfusion package version you are using

This will enable us to fully understand the problem and provide you with the best possible solution. We apologize for any inconvenience this may cause and we are here to assist you every step of the way. Please let us know if there is anything else we can do to help.

Regards,

Joseph I.