or
1 answer
238 views
Hi,
I have several problems with spreadseet control in REACT.
1) Control has trouble working in other cultures. I bypassed this problem by using default (en-US) culture.
<IntlProvider locale={"en-US"}>
<Spreadsheet
ref={spreadsheet}
style={{
width: "100%"
}}
/>
</IntlProvider>
2) After loading xlsx i revive error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'suspendChanges')
at loadSheets (index-esm.js:25621:1)
at readWorkbook (index-esm.js:25609:1)
3) No matter how I use the control I always get errors when scrolling
index-esm.js:23212 Uncaught TypeError: Cannot read properties of null (reading 'render')
at View.render (index-esm.js:23212:1)
at Controller.onScroll (index-esm.js:10985:1)
Summary:
As far as point 1 is not important to me. While 2 and 3 make it impossible to use the control. The strangest thing is that the Excel file loads and displays correctly....
I use:
- "@progress/kendo-react-spreadsheet": "^6.0.2",
- typescript
I would ask for any hint as to what could be wrong
Ernest
Konstantin Dikov
Telerik team
answered
on
13 Nov 2023
2 answers
251 views
Hello! I am trying to add drop down support to my Kendo React Spreadsheet element. I am following this set of docs but the result does not seem to be working when tested using the most recent React component.
Not working example - https://codesandbox.io/s/fervent-driscoll-2mwf49?file=/app/main.tsx
Working but not using react - http://dojo.telerik.com/IgiFEwEN
Any help would be greatly appreciated!
Wissam
Telerik team
answered
on
23 Aug 2023
0 answers
73 views
Hi,
I am planning to use React Spreadsheet for one of my projects. Unfortunately, I am unable to bind remote data to spreadsheet. All examples I could find are using static files to set the spreadsheet structure and on my own tests I failed to re-render spreadsheet component when remote data is bound. Could you please provide an example in that matter?
Here is my code:
const defaultStructure = {
sheets: [
{
name: t('Summary'),
mergedCells: ['B1:C1'],
rows: [
{
height: 25,
cells: [
{
value: t('Please enter customer name'),
textAlign: 'center',
index: 0,
},
{
background: 'rgb(167,214,255)',
textAlign: 'center',
index: 1,
},
],
},
{
height: 50,
cells: [
{
value: t('Please enter minimum gross salary of your region'),
textAlign: 'center',
index: 0,
},
{
value: '',
background: 'rgb(167,214,255)',
textAlign: 'center',
index: 1,
},
],
},
],
columns: [
{
width: 400,
},
{
width: 200,
},
{
width: 400,
},
],
},
{
name: t('Parametric Data Entry'),
rows: [],
columns: [
{
width: 100,
},
{
width: 100,
},
],
},
],
}
const [structure, setStructure] = useState(defaultStructure)
useEffect(() => {
if (!store?.parameters.isLoaded) return
const p = store?.parameters.parameters
const s = defaultStructure.sheets[0]
defaultStructure.sheets[0].rows[1].cells[1].value = p?.grossWage
setStructure({ ...defaultStructure })
}, [store?.parameters.isLoaded])
return (
<>
<div className="p-3">
<div className="card-body">
<Spreadsheet
style={{
width: '100%',
height: 680,
}}
defaultProps={structure}
/>
</div>
</div>
</>
)
})
Regards,
cagdas
Top achievements
Rank 1
Rank 1
asked
on
10 Aug 2023
0 answers
106 views
Hi, I was looking at the new Spreadsheet (non-wrapper) React component, and I couldn't find a way to do either
- Filter columns
- Create a ContextMenu for a cell.
Is there currently a built-in way to implement filters for columns, or does it have to be handled externally (i.e. building something into the toolbar)?
(Also, there is no Spreadsheet tag, only the tag for the former Spreadsheet wrapper.)
1 answer
256 views
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
Telerik team
answered
on
18 Oct 2021
