Forums Home / Wijmo / General Discussion
Posted by: brandon.grime on 3 July 2019, 10:27 am EST
brandon.grime
Posted 3 July 2019, 10:27 am EST
Is it possible for a bound FlexSheet to have Row Details?
I have a case where I have a bound Flexsheet and and a separate bound Flexsheet for custom footer calculations. The user wants them combined but the fact that both are bound I am having a tough time. I thought row details could be a work around solution but I cant seem to get it to work.
Thanks,
Brandon
abhishek.dutta
Posted 4 July 2019, 4:09 am EST
Hello,
The FlexSheet control is designed to be like MS-Excel and since Excel does not have row details, FlexSheet does not support the architecture for this use case.
Could you please tell us more about your use case so we can provide you with a better solution? Also, we would recommend you to use FlexGrid control instead of FlexSheet in which you can easily show row details.
However, If the sheet can be edited by users, you may use popup editors for FlexGrid as shown in the demo below:
https://www.grapecity.com/wijmo/demos/Grid/Editing/PopupEditors/purejs
brandon.grime
Posted 4 July 2019, 9:48 am EST
Hey,
So our first approach was to use a FlexGrid because it allowed for more customization like RowDetails. But the user was using an Excel sheet for this current functionality, so they wanted it to be as close to Excel as possible (hence the use of the FlexSheet).
Right now I have 1 bound FlexSheet where the users can enter numeric data (tracking hours, expenses etc) for months throughout the year. I have another bound FlexSheet below that has custom calculations for monthly, quarterly and YTD values based on the first FlexSheet.
The user would like both FlexSheets combined, for synced scrollability and so that both are included in the export. But since both FlexSheets are bound to their own unique itemsSource im not sure that is possible.
Hopefully that makes a bit of sense hah.
manish.gupta
Posted 7 July 2019, 11:50 pm EST
Hello,
We are sorry for the delayed response.
Could you please let us know why you are using two different Flexsheets? Since Flexsheet was designed to be like excel with multiple sheets, it also supports calculations and formula just like excel and if your users were using excel before, you can import/export those files and all the data and formulas should be retained in the FlexSheet.
Regards,
Manish Gupta
brandon.grime
Posted 8 July 2019, 8:39 am EST
Hey,
Since its a bound flexsheet I wasnt sure how I would go about adding those custom QTD, YTD, and monthly calculations as rows in the same sheet. Thats why I was using 2. How would I go about getting something like this all in one bound sheet (React).
___________Jan______Feb______March ....
Project1______1________3________1
Project2_____2________2________1
Project3_____3________1_________1
...
YTD__________6______12_______15
QTD__________________________15
CustomCalc ___#______#________#
ashwin.saxena
Posted 9 July 2019, 7:15 am EST
Hi Brandon,
The second bound sheet can be added as column footer in the main sheet. You may use the columnFooters property of FlexSheet and push each item in your calculated sheet to the rows property of columnFooters in the main sheet. Please refer to the sample below:
https://codesandbox.io/s/react-flexgrid-62i8c
Please let us know if this works for you or otherwise.
brandon.grime
Posted 9 July 2019, 8:40 am EST
That actually looks pretty good!! Im assuming column footer cells can be styled and formatted in the same manner?
Thanks!!
ashwin.saxena
Posted 10 July 2019, 6:19 am EST
Hi again,
Yes, the column footers can also be formatted in the same way by using itemFormatter, formatItem or just plain CSS. Please refer to the code snippet and sample below:
sheet.itemFormatter = function(panel, row, col, cell) {
if (panel === sheet.columnFooters) {
if (row === 0) {
cell.style.color = 'blue';
} else if (row === 1) {
wjcCore.addClass(cell, 'qtd');
}
}
};
.qtd {
background-color: #f0a07c !important;
color: #4a274f !important;
}
brandon.grime
Posted 10 July 2019, 8:47 am EST
awesome, thanks!
