jQuery UI Widgets Forums Angular Streaming data SSE to grid

This topic contains 1 reply, has 2 voices, and was last updated by  admin 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Streaming data SSE to grid #135289

    user9969157
    Participant

    I have a streaming API implemented with SSE. I want to load a stream of data on to the grid. As I am getting batches of data, I am doing this –

    private setGridData(data: any) {
    if (data) {
    this.jqxSource.localdata = […this.jqxSource.localdata, …data];
    this.dataGrid.updatebounddata();
    console.log(‘Updated grid data with new records.’);
    } else {
    console.log(‘Grid component is not initialized yet.’);
    }
    }

    But this will reload the entire grid and UI becomes unusable. I want the search and sort function to work on data that is loaded. Since I am getting 1/2 sse events per second for about 5 minutes, I cannot use filter. How do I just append new data without reloading the component? I dont want the UI to hang.

    Streaming data SSE to grid #135297

    admin
    Keymaster

    Hi,

    To efficiently append data to jqxGrid without reloading the entire grid and causing UI lag, you can use the addrow method instead of updatebounddata. Here’s how to do it:

    Solution:
    Append Data Efficiently: Use the beginupdate() and endupdate() methods to temporarily suspend and resume grid updates, preventing unnecessary UI re-renders.

    Use addrow Method: Directly append new data rows using addrow to avoid reloading the entire grid.

    Example Implementation:

    private setGridData(data: any) {
        if (data && this.dataGrid) {
            this.dataGrid.beginupdate(); // Suspend grid updates
    
            data.forEach(newRow => {
                this.dataGrid.addrow(null, newRow); // Append each new row
            });
    
            this.dataGrid.endupdate(); // Resume grid updates
            console.log('Appended new data to grid without full reload.');
        } else {
            console.log('Grid component is not initialized yet.');
        }
    }

    Key Points:
    beginupdate() / endupdate(): Prevents multiple UI refreshes during data append.
    addrow: Efficiently adds new rows without reloading the entire grid.
    This approach ensures smooth performance and keeps search and sort functionalities operational.

    Hope this helps.

    Best Regards,
    PeteR Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.