EJS Grid - prevent the grid reload after an action

[Jawahar Rajan]

We are using the Syncfusion EJS grid with a data source.

The grid has a clickable icon on each row (A favourites icon) 
the click event updates the back end.
 We want to prevent the grid from refreshing when the datasource is updated ( the data source is updated every 5 seconds via a separate process).

We are using paging and would like the grid to remain on the same page

if we are on page 5 of the paging in the grid, and we click the favourites icon in the grid for a given row we want the backend process to run, but the grid should hold the page at 5

Code files are attached

Attachment: ixcombinedissuers.component_ddc140e7.zip

[Santhosh Iruthayaraj]

Hi Jawahar,

We are currently investigating the reported scenario of "EJS Grid - prevent the grid reload after an action". Rest assured that we are doing our best to resolve this as soon as possible. We will provide you with a detailed update on or before March 10^th, 2023. In the meantime, we appreciate your patience and understanding.

Regards,

Santhosh I

[Santhosh Iruthayaraj]

Hi Jawahar,

Query: EJS Grid - prevent the grid reload after an action.

We have validated your query and based on your requirement we have rendered a clickable icon on each row of the Grid and clicking the button updates the cell value using the setCellValue method inside the recordClick event. But we can’t reproduce the scenario Grid reload after an action as you mentioned. To get the click of the icon, using the HTML element’s event inside the Grid is not a best practice. So we suggest you use the recordClick event of the Grid instead of the click event. We have attached a code snippet to explain the process of how we are updating the grid cell using the setCellValue inside the recordClick event.

[app.component.html]

 

<div class="control-section">

    <ejs-grid #grid id='grid' [dataSource]='data' [allowPaging]='true' [pageSettings]='pageSettings' (recordClick)='recordClick($event)' [enablePersistence]='true'>

 

[app.component.ts]

 

export class AppComponent {

    public data: Object[];

    public pageSettings: Object;

    @ViewChild('grid') public grid: GridComponent;

    .  .  .  .  .

    recordClick(args: any): void {

        if (args.target.classList.contains(‘custom-class’)) {

            this.grid.setCellValue(args.rowData.OrderID, args.column.field, !args.rowData.Verified);

        }

    }

}

Please find the sample link below.

Sample: https://stackblitz.com/edit/angular-ighalc?file=src%2Fapp.component.ts,src%2Fapp.component.html

To maintain Grid’s state (page) we suggest you set the enablePersistence property true. We have attached the documentation for more information about the state persistence.

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/state-persistence/state-persistence

We hope that this solution will help you resolve the issue. If still you’re facing an issue, kindly share the issue reproducible runnable sample to us or reproduce reported issue in the provided sample. It’ll be helpful for us to further evaluate your query at our end and provide solution as soon as possible.

Regards,

Santhosh I