We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Does Not Refresh Properly With Dynamic Columns Containing Templates

Thread ID:

Created:

Updated:

Platform:

Replies:

147239 Sep 4,2019 11:02 AM UTC Sep 9,2019 02:20 PM UTC Angular - EJ 2 3
loading
Tags: Grid
Eric Lew
Asked On September 4, 2019 11:02 AM UTC

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 [Syncfusion]
Replied On September 5, 2019 12:39 PM UTC

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
Replied On September 5, 2019 01:33 PM UTC

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 [Syncfusion]
Replied On September 9, 2019 02:20 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon