surveyjs / survey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.
https://surveyjs.io/open-source
Other
864 stars 364 forks source link

Custom widget for checkbox #2648

Open dipen211 opened 2 years ago

dipen211 commented 2 years ago

Added custom widget for checkbox question I change the choice of checkbox...

image

when i select question from question list it display it's default value like this

image

when i click on preview button or any other part on page then it display as per my choice...

image

also + and - icon are not working for this widget

codesandbox link:- https://codesandbox.io/s/smoosh-star-j4x6v

tsv2013 commented 2 years ago

It's too late to update question settings after question has been reldered. You need to do it in the https://surveyjs.io/Documentation/Survey-Creator?id=surveycreator#onQuestionAdded event handler. Here is the updated codesandbox - https://codesandbox.io/s/bitter-architecture-enj2l?file=/src/components/checkboxbutton.js

dipen211 commented 2 years ago

image

and what about this buttons..??

this button are also not working

tsv2013 commented 2 years ago

This is due to some uissues with styles. We'll fix them.

As a workaround I've updated your example - https://codesandbox.io/s/bitter-architecture-enj2l?file=/src/components/SurveyCreator.js

tsv2013 commented 2 years ago

I've checked our change history.

The

.svc-widget__content {
  .sd-question__content {
    pointer-events: none;
  }
}

rule was added in order to disable interactivity for the custom widgets on design surface. In general case we don't know what is being rendered in a custom widget content and how to control it design-time mode, and we decided to cover the whole widget content via non-interactive element. Yes, we understand that it's not an ideal solution. But otherwise we should re-write all custom widgets to support creator design time behavior. At this moment we postponed this work.

In your case (if you are using original rendering) you get choice item adorners that are not interactive due to this rule. At this moment we recommend to solve it via CSS override:

.svc-widget__content .sd-question__content {
    pointer-events: all;
}

as shown in this example - https://codesandbox.io/s/bitter-architecture-enj2l?file=/src/components/SurveyCreator.js

tsv2013 commented 2 years ago

Probably existing custom widgets concept: cross-platfom widget rendering in the onAfterRender event handler has an abstraction leak in the Creator V2. We need to discuss the following alternatives: component rendering override, "renderAs" option and new native questions registration for custom widgets @andrewtelnov @dmitrykurmanov @novikov82 what do you think?

vincent-benbria commented 2 years ago

This also affects custom widgets using radiogroups and dropdown. Radiogroup have the exact same behaviours with the disabled pointer events, but dropdown are missing tho whole item list from the creator.

Screen Shot 2022-06-24 at 11 23 37 AM

Minimal reproduce: https://plnkr.co/edit/nRrGonrMOXhFFooO

dipen211 commented 1 year ago

Thank you for your previous solution @tsv2013

now with the latest version I have a new issue with this image Now I am not able to get select all, none, and other button with the green plus icon in the UI

image this image is with an old version of Surveyjs packages.

Identify my issue and help me to solve this. Thank You,