Custom row rendering for Matrix | Dynamic Matrix Component

Serhii Viazkov

created 8 days ago

Hello, SurveyJS support team!
Hope this message finds you well

Is it possible to create custom rendering for rows in Matrices (matrix, dynamic matrix) components?

Here is a screenshot with matrix. And I want to have e.g. ability to incorporate custom component (e.g. slider) from the right side of each row.
Also, I could consider custom cell rendering which will be good option as well unlike creating component from scratch.
Please share any suitable document for this usecase. If its not possible or current version does not support this level of flexibility, let me know please

Thank you!

Clipboard-File-1.png

Answers approved by surveyjs Support

Jane

created 8 days ago

Hello Serhii,
A Multi-Select and Dynamic Matrix can use any supported question type as a matrix cell editor: View Demo. To integrate a Slider within a matrix cell, choose a suitable third-party slider component, integrate it with the SurveyJS Form Library (View Tutorial), and register your custom question type as a matrix cell type.

If you have any further questions, feel free to reach out.

For reference, we’re currently working on built-in Slider and Range Selector question types. Keep an eye on our release notes for updates.

Show previous comments (3)

Serhii Viazkov 8 days ago

Just to confirm, to make it work, first of all, I should create custom question type (with all functionality I need) and set it up as a part of my matrix, am I right?
If we are talking about overriding the name itself for each row, is it possible doing so? because as far as I got if I override a cell, it won't affect names from the left

Jane 7 days ago

Hello Serhii,
If you're satisfied with a standard HTML slider, you may enable the "text" input type for your matrix column and enable the "range" input type:

JSON
{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "matrixdropdown",
          "name": "question1",
          "columns": [
            {
              "name": "Column 1"
            },
            {
              "name": "Column 2"
            },
            {
              "name": "Column 3",
              "cellType": "text",
              "inputType": "range"
            }
          ],
          "choices": [
            1,
            2,
            3,
            4,
            5
          ],
          "rows": [
            "Row 1",
            "Row 2"
          ]
        }
      ]
    }
  ]
}

If this slider element doesn't fit your needs, consider integrating a suitable third-party component. Once you integrate a third-party component, add it to the supported cell types and update your matrix column's cellType to use the custom question type.

Regarding the second inquiry: would you elaborate on your usage scenario? Do you wish to override a row's value or display text?

I look forward to your reply.

Clipboard-File-1.png

Serhii Viazkov 7 days ago

its not about 'slider' itself, actually I have to implement quite custom logic:
after fetching config from the backend
Im making 2nd call for specific data and based on that
i need to render icon from the left side of each row which could give you just info status (ok | error) or checkbox, hitting which will call 3rd party API again
and based on that I want to understand, is it possible to override text cell with "Row 1" or "Row 2"
if you have any ideas how to approach my task let me know please

I apologize for making XY at the start of conversation

Jane 7 days ago

Hello Serhii,
Thank you for the update.
You can render a custom icon within a row header text by using Markdown. However, from what I gather, you wish to render an icon or a checkbox which would trigger further actions. I may recommend that you implement a specialized or a custom question and use it as a column's editor.
If you wish to render your custom icon/checkbox element before a matrix row header, you may disable the default row headers and use another read-only expression or HTML column to display row headers.
Consider the following sample demo: View Plunker.

I hope this information helps.

Please let me know if you have any questions or require further assistance.

Thanks

Serhii Viazkov 6 days ago

Looks like a solution to me!
thank you! ❤️

Jane 6 days ago

You're always welcome. Please feel free to contact us if you require further assistance.

Have a nice day!

Custom row rendering for Matrix | Dynamic Matrix Component

Answers approved by surveyjs Support

Recently viewed tickets