Styjun

Is it really necessary to have 4 hours meeting in Sprint planning?

Сardinality estimation of partially covering range predicates

How to create a grid following points in QGIS?

How to fix folder structure in Windows 7 and 10

Norwegian refuses EU delay (4.7 hours) compensation because it turned out there was nothing wrong with the aircraft

What did the controller say during my approach to land (audio clip)?

What was an "insurance cover"?

Why are Fuji lenses more expensive than others?

Debussy as term for bathroom?

CDG baggage claim before or after immigration?

Is the sentence "何でも忘れた" correct?

In a jam session, when asked which key my non-transposing instrument (like a violin) is in, what do I answer?

Asking an expert in your field that you have never met to review your manuscript

Do the villains know Batman has no superpowers?

Pseudo Game of Cups in Python

Simulate a 1D Game-of-Life-ish Model

Social leper versus social leopard

How does one calculate the distribution of the Matt Colville way of rolling stats?

Safely hang a mirror that does not have hooks

Is there any actual security benefit to restricting foreign IPs?

What was the deeper meaning of Hermione wanting the cloak?

Why do different vector<bool> elements share the same address?

Can one guy with a duplicator initiate a nuclear apocalypse?

Why are some of the Stunts in The Expanse RPG labelled 'Core'?

How to dynamically recreate datagrid columns at runtime?

how to create a table in Angular2 using jsonKendo-ui-angular2 grid: how to force the grid to redraw?PrimeNG - datatable: How to dynamically load columns and their fields in primeNg datatable?angular primeng dynamic columnsChange specific button text on click inside ngForDynamically load multiple dropdown in formarray in angular 6Dynamic mat-select option in form-arrayHow to generate a type at runtime in angularHow to dynamically create angular-kendo grid columns using columns settings?How to add input fields dynamically in angular 6

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I'm calling an API service that returns a JSON array. I also have a code in the front-end that composes a list of columns or fields based on the JSON. This list of columns is not a fixed-list and can be different based on the JSON content. So, I need to recreate the data grid columns dynamically at runtime.

It works when using *ngFor directive and loop through an array of columns that is pre-defined or pre-initialized in the code but, I need to change the list of columns at runtime.

Example:

<clr-dg-column *ngFor="let field of fields" [clrDgField]="field.name">
 field.text 
</clr-dg-column>

let fields = [ name: "id", text: "Id" , name: "name", text: "Name" ];

changeFields() 
 this.fields = [ name: "userId", text: "User Id" , name: "desc", text: "Description" ];

When the changeFields() function is called, I expected the datagrid columns to be changed to the new list of columns. But the problem is that it doesn't re-render the columns.

The example below, shows the first image with the initial columns of the data grid, the 2nd image shows blank columns when changed at run-time

Before changing the fields variables:

After changing the fields at run-time:

angular vmware-clarity

share|improve this question

asked Mar 28 at 14:51

WendellWendell

6644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do you have a simple reproduction of what you are doing exactly so we can more easily triage the request? We have starters at stackblitz.com/@clr-team
  
  – Jeremy Wilken
  Mar 28 at 19:15
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @JeremyWilken Sorry, I just incorrectly used the datagrid. It's now working perfectly. Here's what I'm currently working on. What I'm trying to achieve is to dynamically generate columns based on the keys of the first record in a JSON array. You can check this StackBlitz if you're curious about it: stackblitz.com/edit/clarity-light-theme-v1-0-oadj7e
  
  – Wendell
  Mar 29 at 11:19
  
  

  
  
  
  

add a comment
 | 

0

I'm calling an API service that returns a JSON array. I also have a code in the front-end that composes a list of columns or fields based on the JSON. This list of columns is not a fixed-list and can be different based on the JSON content. So, I need to recreate the data grid columns dynamically at runtime.

It works when using *ngFor directive and loop through an array of columns that is pre-defined or pre-initialized in the code but, I need to change the list of columns at runtime.

Example:

<clr-dg-column *ngFor="let field of fields" [clrDgField]="field.name">
 field.text 
</clr-dg-column>

let fields = [ name: "id", text: "Id" , name: "name", text: "Name" ];

changeFields() 
 this.fields = [ name: "userId", text: "User Id" , name: "desc", text: "Description" ];

When the changeFields() function is called, I expected the datagrid columns to be changed to the new list of columns. But the problem is that it doesn't re-render the columns.

The example below, shows the first image with the initial columns of the data grid, the 2nd image shows blank columns when changed at run-time

Before changing the fields variables:

After changing the fields at run-time:

angular vmware-clarity

share|improve this question

asked Mar 28 at 14:51

WendellWendell

6644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do you have a simple reproduction of what you are doing exactly so we can more easily triage the request? We have starters at stackblitz.com/@clr-team
  
  – Jeremy Wilken
  Mar 28 at 19:15
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @JeremyWilken Sorry, I just incorrectly used the datagrid. It's now working perfectly. Here's what I'm currently working on. What I'm trying to achieve is to dynamically generate columns based on the keys of the first record in a JSON array. You can check this StackBlitz if you're curious about it: stackblitz.com/edit/clarity-light-theme-v1-0-oadj7e
  
  – Wendell
  Mar 29 at 11:19
  
  

  
  
  
  

add a comment
 | 

I'm calling an API service that returns a JSON array. I also have a code in the front-end that composes a list of columns or fields based on the JSON. This list of columns is not a fixed-list and can be different based on the JSON content. So, I need to recreate the data grid columns dynamically at runtime.

It works when using *ngFor directive and loop through an array of columns that is pre-defined or pre-initialized in the code but, I need to change the list of columns at runtime.

Example:

<clr-dg-column *ngFor="let field of fields" [clrDgField]="field.name">
 field.text 
</clr-dg-column>

let fields = [ name: "id", text: "Id" , name: "name", text: "Name" ];

changeFields() 
 this.fields = [ name: "userId", text: "User Id" , name: "desc", text: "Description" ];

When the changeFields() function is called, I expected the datagrid columns to be changed to the new list of columns. But the problem is that it doesn't re-render the columns.

The example below, shows the first image with the initial columns of the data grid, the 2nd image shows blank columns when changed at run-time

Before changing the fields variables:

After changing the fields at run-time:

angular vmware-clarity

share|improve this question

asked Mar 28 at 14:51

WendellWendell

6644 bronze badges

<clr-dg-column *ngFor="let field of fields" [clrDgField]="field.name">
 field.text 
</clr-dg-column>

let fields = [ name: "id", text: "Id" , name: "name", text: "Name" ];

changeFields() 
 this.fields = [ name: "userId", text: "User Id" , name: "desc", text: "Description" ];

angular vmware-clarity

angular vmware-clarity

share|improve this question

asked Mar 28 at 14:51

WendellWendell

6644 bronze badges

share|improve this question

asked Mar 28 at 14:51

WendellWendell

6644 bronze badges

asked Mar 28 at 14:51

WendellWendell

6644 bronze badges

asked Mar 28 at 14:51

WendellWendell

6644 bronze badges