Hi,
I've implemented an Excel-like custom widget using react-datasheet
(https://www.npmjs.com/package/react-datasheet)). This basically allows me to create a datasheet in the creator view, by adding rows and columns.
I'm faced with a problem that I'm hoping you can help me with. Essentially, when I add rows to the datasheet, the view doesn't auto-refresh. In other words, unlike the matrices for example where if I add rows, I can see the rows being added to the matrix without the need to do anything further. However, in my custom widget, this is not the case.
Here is an example of what I'm referring to: https://codesandbox.io/s/strange-sky-1o6eh8?file=/src/Datasheet.tsx
In order to reproduce my problem, follow these steps:
- Add a question of type 'datasheet'
- Click on the 'Columns' tab of that question and click 'add column' - you will see a column being added
- Click on the 'Rows' tab of that question and click 'add row' - in this scenario, even though a row is technically added, it is not showing in the UI
Is this this something that you might be able to help me with?
Could I get an update on this please?
Hi Mo,
I may require additional time to research your demo. Please stay tuned.
Hi Mo,
Thank you for sharing the demo. After I added a custom Data Sheet question, I got the following error in a console:
Warning: Failed prop type: The prop `valueRenderer` is marked as required in `DataSheet`, but its value is `undefined`. at DataSheet (https://1o6eh8.csb.app/node_modules/react-datasheet/lib/DataSheet.js:78:5) at Datasheet (https://1o6eh8.csb.app/src/Datasheet.tsx:19:5) at div at SurveyCustomWidget (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:3954:28) at div at div at div at div at div at QuestionWidgetAdornerComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:2544:42) at SurveyQuestion (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:6142:28) at div at div at div at RowWrapper (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:2595:23) at SurveyRow (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:9890:28) at div at SurveyPage (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:4942:23) at div at CreatorSurveyPageComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:1956:28) at div at div at div at div at TabDesignerComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:3244:47) at div at div at div at div at div at div at div at SurveyCreatorComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:1482:28) at SurveyCreatorRenderComponent
I would recommend that you consult with the DataSheet API/documentation to determine the cause of the issue and fix it. Should you have any questions or require further assistance, we are here to help.
Hi Jane, I have tested the same link and I'm able to add a datasheet question just fine. Are you able to try again using the same code sandbox link I sent (https://codesandbox.io/s/strange-sky-1o6eh8?file=/src/Datasheet.tsx)?) What steps did you take to add the question?
EDIT: I think even with the error, the question is added successfully.
Hello Mo,
Thank you for the update. I tried to drop a Data Sheet question from the Toolbox and using the convert question option from the design surface. Please refer to my screencast.
In both cases, I received the following exception:
Warning: Failed prop type: The prop `valueRenderer` is marked as required in `DataSheet`, but its value is `undefined`. at DataSheet (https://1o6eh8.csb.app/node_modules/react-datasheet/lib/DataSheet.js:78:5) at Datasheet (https://1o6eh8.csb.app/src/Datasheet.tsx:19:5) at div at SurveyCustomWidget (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:3954:28) at div at div at div at div at div at QuestionWidgetAdornerComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:2544:42) at SurveyQuestion (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:6142:28) at div at div at div at RowWrapper (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:2595:23) at SurveyRow (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:9890:28) at div at SurveyPage (https://1o6eh8.csb.app/node_modules/survey-react-ui/survey-react-ui.js:4942:23) at div at CreatorSurveyPageComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:1956:28) at div at div at div at div at TabDesignerComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:3244:47) at div at div at div at div at div at div at div at SurveyCreatorComponent (https://1o6eh8.csb.app/node_modules/survey-creator-react/survey-creator-react.js:1482:28) at SurveyCreatorRenderComponent
I'm afraid, the question was not successfully added and this error must be addressed.
Hi Jane, this is only a warning rather than a hard error. You can still add columns and rows from the configuration side-bar. Could you do so please? You'll then be able to see that after adding rows, the widget doesn't auto-refresh.