Filling Grid

[Matias Galante]

Hello, I’m using smart-webcomponents-angular version 15.5.0 and Angular 14.2.12.

In my application, I’m using Html Smart Elements Grid to display server data. Because we update more than one row at a time, whenever I refresh the grid I call this function below:

private fillGrid (source: OrganizationDisplay[]) {
this.GridConfig.appearance.displayLoadingIndicator = true;
this.GridConfig.dataSource = new Smart.DataAdapter({
dataSource: source,
dataFields: [
{ name: ‘name’, dataType: ‘string’ },
{ name: ‘facilityGroup’, dataType: ‘string’ },
{ name: ‘symbolName’, dataType: ‘string’ },
{ name: ‘includeSetDef’, dataType: ‘string’ },
{ name: ‘patientSetDef’, dataType: ‘string’ },
{ name: ‘status’, dataType: ‘string’ }
]
});
this.GridConfig.appearance.displayLoadingIndicator = false;
}

and it creates a new dataSource instance. It’s been working well for the most part except that sometimes the grid doesn’t show the updated data. When a cell value, gets updated, it remains unchanged. Is there a drawback to updating the grid this way? Are there better ways to refill the grid when adding a new entry or multiple ones?

thank you

• This topic was modified 9 months, 1 week ago by Matias Galante. Reason: Added Angular version

[Matias Galante]

Forgot to mention, the data is server side CRUD which is the reason why I’ve been refilling the grid by creating a new smart data adapter instance each time since the server does all the CRUD operations.

[ivanpeevski]

Hi Matias,

When making many changes at once you can use beginUpdate & endUpdate. When beginUpdate() is called, it prevents the grid from refreshing until endUpdate() is called. So you can apply the changes like this so that the grid is refreshed only once at the end:

grid.beginUpdate();
//changes here…
grid.endUpdate();

 

In general, when you use server-side CRUD you can also consider using virtualDataSource as in the example here – https://www.htmlelements.com/angular/demos/grid/server-side-crud/

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[Matias Galante]

I also have a similar issue with the updating row data:

// little example but in this case, the row doesn’t get updated.
this.grid.updateRow(index, {
orgName: newname
});

Note: It does update, I figured what was wrong and it was a name property mismatch

• This reply was modified 9 months, 1 week ago by Matias Galante.

[Author]

Posts