Search code examples
javascriptreactjssurveyjs

Add extra field(s) to SurveyJS Rating component

We would like to add an extra "N/A" and "Don't know"-button to the Rating-component in SurveyJS for React with a custom value. So that for example we have values 1-2-3-4-5 and also N/A. When this button is selected, then the value in final state should be "N/A".

What we tried is adding an after render function:

var nvtRatingAfterRender = function(question, el) {
  const parent = el.getElementsByClassName("sv_q_rating")[0];
  const newChild = parent.children[0].cloneNode(true);
  newChild.children[0].value = -99;
  newChild.getElementsByClassName("sv_q_rating_item_text")[0].innerText = "NVT";
  newChild.classList.add("nvt-option");
  parent.appendChild(newChild);
};

and adding this to the configuration. This results in an error that React does not accept plain HTML/JavaScript buttons:

Uncaught Error: ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.

It's not added to the state at the end, nor possible to make it "active" (below we added "NVT" to rating):

WaCHOwQgNj.gif

Another approach might be to copy the JavaScript code for the full Rating component and just add some extra values (loop from min to max but also add extra buttons).

What is a good way to accomplish adding a custom button to the Rating component that participates in the component?

Solution

  • Answer by SurveyJS team:

    Hello,
    You can use the rateValues for this purpose. Here is the working example and JSON:

    {
    type: "rating",
    name: "satisfaction",
    title: "How satisfied are you with the Product?",
    rateValues: [
        1, 2, 3, 4, 5, {value: 'anyvalue', text: "NVT"}
    ]
}

    Thank you,
    Andrew
    SurveyJS Team