Grid displaying columns of the datasource and ignoring columns defined in HTML

Question

Hello,I'm working on a project in which I'd consume data from the backend and, project it in a grid.When I used local data, it worked fine. And by fine I mean the columns' header text is being changed based on the data source's fields.However, now when I affected the fetched data source from an observable, I get the whole data source as it is, and displayed I in the grid.In other words, the columns defined in "datatable.html" are 8, but the Datagrid brings all of the columns which are 11.Not, that the data source type of an "EntityModel", and everything is defined, but I don't understand why it ignores the HTML columns, renaming, and the newly added columns.I tried to follow predefining in"gridObj" but don't know how to override the HTML grid, although I want to avoid defining columns in typescript.So basically, The data fetched is overriding I guess the column laid out already in the HTML and displaying the field names of the data source as-is and all of them instead of following the columns' names providedPlease help, and thanks in advance.Attachment: datatable_e9cb738d.rar

Rajapandiyan Settu · Accepted Answer

Hi Adam,

We are glad that you have resolved the previously reported problem.

Query: I tried formatOptions on the columns but it displays odd results as so 0or0AMtOption0

In Angular, we need to enclose element properties with in the square brackets [], to bind the variable. But in your code, you didn’t enclose the format property by []. This is the cause of reported problem.

https://angular.io/guide/property-binding#binding-to-a-property

We suggest you to enclose the format property with square brackets to resolve this.

[app.component.html]

<e-column

field="OrderDate"

type="date"

[format]="formatOptions"

headerText="Echeance"

width="175"

>

</e-column>

[app.component.ts]

public formatOptions: Object = { type: 'date', format: 'dd/MM/yyyy' };

Sample: https://stackblitz.com/edit/angular-ws2fqv-rv8g4v?file=app.component.html

Please get back to us if you require further assistance.

Regards,

Rajapandiyan S

Rajapandiyan Settu · Answer

Hi Adam, Thanks for contacting Syncfusion support. From your query, we suspect that you are facing issue like the columns defined in the datacomponent.html page does not bound to the Grid component. By validating your code example, we found that you forgot to define the column inside the tag helper. This is the cause of reported behavior. We suggest you to define the Grid Column inside the tag to resolve the reported problem. [datatable.component.html]

// define the columns inside the tag

Sample: https://stackblitz.com/edit/angular-ws2fqv-c8bakl?file=app.component.html Please get back to us if you require further assistance. Regards, Rajapandiyan S

Adam Zaghouani · Answer

Hello Syncfusion Team,As embarrassing as it may seem, I discovered that just moments ago, thank you for getting back to me. On another note, since we're talking about columns, do you think you could help me figure outhow to solve the date with this format? "2002-02-01T00:00:00+01:00". I tried formatOptions on the columns but it displays odd results as so 0or0AMtOption0formatOptions: { type:'date', format:'dd/MM/yyyy'}, and if I don't use the format option I get a long datetime. As so  Fri Feb 01 2002 00:00:00 GMT+0100 (West Africa Standard Time)

Adam Zaghouani · Answer

Add to that I was declaring options to "formatOptions" instead of assigning them. Thanks a lot for your help!

Rajapandiyan Settu · Answer

Hi Adam, 

We are glad that you have resolved the reported problem. 
 
Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S