Hi,
I'm currently evaluating the react UI components, specifically the spreadsheet for use in one of our projects. The components suits our needs, but there is some issue when attempting to run the project locally to test it.
This is what i'm trying to run - https://github.com/IgniteUI/igniteui-react-examples/tree/master/samples/excel/spreadsheet/overview.
I tested it previously in the Codesandbox and there was no issue when opening some random excel file, but locally there is some internal error when i attempt to import some file.
.
The error is happening after the readFileAsUing8Array is done and the result is loaded into Workbook.
The issue is even happening with the default excel file downloaded on opening the spreadsheet. (https://static.infragistics.com/xplatform/excel/SalesData.xlsx)
One of the files, with which this was tested.
Example.xlsx
Hello Ivaylo,
I have been investigating into the behavior you are seeing, and it appears that there is currently an issue with the igniteui-react npm packages in that there was a change to the jszip libraries that is breaking our internal code. This issue is fixed internally and will likely be available in the next published igniteui-react packages, but you can currently work around the issue by making the following npm call:
npm install jszip@3.1.5 --save-exact
Please let me know if you have any other questions or concerns on this matter.
Thank you very much, it works now after installing the package.
A couple of additional questions turned up. Are there any browser dependencies and know issues? When i tested the spreadsheet in Brave/Chrome, the right click menu seems a bit broken. On every right click the menu pops up and does not dissapear unless i click on a specific option and multiple menus can be visible at the same time. Additionally, the options do nothing when clicked. I also tested it in Firefox and there it seems to work fine. Is there any workaround for this?
Is there a possibility to extract a sample (or sub-table) from an imported table into a new file or preferably into a new sheet in the same file, based on some conditions? For example select a region of cells from A1 to B10 and extract all rows in this region where in A (if for example the content is a number) the value is between 1 and 10, or by some string comparison, etc.
Thank you for your update on this matter. I am glad that installing the jszip package worked for you in this case.
Regarding the browser issues, you can see the browsers that we officially support at our Supported Environments page, here: https://www.infragistics.com/support/supported-environments. Regarding the context menu issue, this is known, and appears specifically in Chrome. This issue has been fixed internally, and will be available in the next release of Ignite UI for React.
Regarding an extraction of a region of cells in a particular Worksheet into another Worksheet, this can be done with some application code. The activeSelection property of the IgrSpreadsheet can net you a SpreadsheetSelection object that will net you the part of the spreadsheet that is currently selected. You can then use the cellRanges property of the SpreadsheetSelection object to get the cells that make up your range and get the cell values to add them to a separate Worksheet. The Worksheet exposes a rows collection that you can index into and each WorksheetRow has a cells collection you can use to programmatically set the values of the cells.
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
Hello,
Thanks again for the help.
Are there any more specific examples for extraction, etc. because i'm having trouble figuring out how to do it. I managed to add a second sheet and get the currently selected region of cells by address, but inserting the region into the new sheet with "insertCells" does nothing and i find the docs and exposed methods/props of the objects slightly confusing.
I have been investigating into a “best practice” procedure for extracting cells from one Worksheet to another in the IgrSpreadsheet in Ignite UI for React, and I have actually found that the best way is to use the SpreadsheetAction class with the executeAction method of the spreadsheet.
I would like you to take a look at the sample project I am attaching to this forum thread, where on button click, the activeSelection of the spreadsheet is obtained and copied. The activeCell of the activeSelection appears to be the top-left of a particular selection, and using this, we can activate a cell on the other worksheet and invoke the Paste SpreadsheetAction to paste it to the same cell address on that worksheet. Then, reactivate the worksheet that was originally active so it appears to the user as if nothing had happened.
I hope this helps. Please let me know if you have any other questions or concerns on this matter.
CopyRegionToWorksheet.zip