Kendo React Spreadsheet Wrapper - How to 'update' sheet once data to build new sheet is received.

[Adrian]

Hi. So I'm building an application where different data would be made available to the user at various times which would cause the spreadsheet they are looking at to update. New columns, rows, data, everything.

My understanding is that because this is a jQuery Kendo Spreadsheet, it's not going to act in a Reactive way. In the most basic and simple way possible, how can I achieve the desired behavior? The documentation for the Kendo Spreadsheet Wrapper tells me next to nothing.

I have a ref called 'this.MySpreadsheet' on the <Spreadsheet> component/wrapper and I'm given a variety of options when I log it and look at the contents. I suspect I can use a method in there to trigger some kind of 'destroy and then recreate', but I'm drawing a lot of red-herrings and in the interest of time, I'd like to be spoon-fed through this process.

render() {
        // let driver = this.MySpreadSheet.current.widgetInstance;
        // console.log('driver', driver);
        let numberOfColumns = this.sheetObject?.numberOfColumns ? this.sheetObject.numberOfColumns : 0;
        let numberOfRows = this.sheetObject?.numberOfRows ? this.sheetObject.numberOfRows : 0;
        let columnWidth = this.sheetObject?.columnWidth ? this.sheetObject.columnWidth : 50;
        console.log('render  method', this.sheetObject);
        return (
            <>
                <button onClick={() => this.changeUpSheet()}>HOKULOSOS</button>
                <div id='spreadsheet'>
                    <Spreadsheet
                        //rows={numberOfRows}
                        ref={this.MySpreadSheet}
                        //columns={numberOfColumns}
                        render={(e) => this.handleRender(e)}
                        toolbar={{
                            home: [
                                // for all available options, see the toolbar items configuration
                                // https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items

                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-file-config',
                                    click: (e) => this.handleConfiguration()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-filter',
                                    click: (e) => this.handleFilter()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-filter-clear',
                                    click: (e) => this.handleClearFilter()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-download',
                                    click: (e) => this.handleDownload()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-upload',
                                    click: (e) => this.handleUpload()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-link-horizontal',
                                    click: (e) => this.handleShareLink()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-reset',
                                    click: (e) => this.handleResetSheet()
                                }
                            ],
                            insert: false,
                            data: false
                        }}
                        sheets={this.sheetObject.sheet}
                        columnWidth={columnWidth}
                    />
                </div>
            </>

[Stefan]

Hello, Adrian,

There are a couple of options in this case:

1) Use the Spreadsheet with a data source that will allow updating the data based on the requests:

https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/import-and-export-data/bind-to-data-source

2) Update the key props of the Spreadsheet when new data is set to the state, this will make the Spreadsheet re-mount:

<Spreadsheet key={updateMeWhenDataUpdates}>

Based on the provided code I assume that the sheets are updated `{this.sheetObject.sheet}` dynamically. If this is the case, we can suggest the `key` approach.

Regards,
Stefan
Progress Telerik