Question T13173
Visible to All Users

Custom Widget Not Auto-refreshing In Creator View

created 2 years ago (modified 2 years ago)

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:

  1. Add a question of type 'datasheet'
  2. Click on the 'Columns' tab of that question and click 'add column' - you will see a column being added
  3. 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?

Show previous comments (3)

    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:

      Code
      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.

        Answers approved by surveyjs Support

        created 2 years ago

        Hi Mo,
        Thank you for the update. I'm afraid that this warning maybe somehow related to the issue that rows are not added. I added a Data Sheet question, tried to add columns (they appear), rows (they don't appear). However, when I opened the preview, the following error appears: Warning: Failed prop type: The prop valueRenderer is marked as required in DataCell, but its value is undefined.

        Call Stack
        Code
        Warning: Failed prop type: The prop `valueRenderer` is marked as required in `DataCell`, but its value is `undefined`. at DataCell (https://1o6eh8.csb.app/node_modules/react-datasheet/lib/DataCell.js:73:5) at DataSheet (https://1o6eh8.csb.app/node_modules/react-datasheet/lib/DataSheet.js:78:5) at div 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 revisited your code again and I noticed that you register a custom React component as a custom widget. Custom widgets are considered as obsolete integration and they may not fully support design-time interaction.

        To integrate a custom React component to a SurveyJS Form Library, please implement a custom survey question and register it using the ReactQuestionFactory.Instance.registerQuestion function. Please follow this step-by-step tutorial: Integrate Third-Party React Components. So, you will require to implement a base question model (Create a Model) and then, implement a SurveyQuestionElementBase descendant to render your custom Data Sheet component (Render the Third-Party Component).

        Should you have any questions or require further assistance, please let me know.

          Show previous comments (13)

            Hello Mo,
            You're always welcome. We are happy to hear that you managed to achieve your goal.

            If you have some free time, we would appreciate it if you could share your feedback at on SurveyJS page at g2.com. Thank you in advance.

            Please feel free to contact us if you have any questions or require further assistance.

              Sure, I will do.

                Thank you, Mo.

                Please feel free to contact us if you have additional questions.

                Thanks