Question T12982
Visible to All Users

onUpdateQuestionCssClasses not triggering

created 2 years ago

Good afternoon,

I am using SurveyCreator from 'survey-creator-react'.
I am trying to add a custom css class to a question. I'm trying to use onUpdateQuestionCssClasses but it's not working.
I do get a response when using the onUpdatePageCssClasses method but not the question one.

The code I'm using:

Code
const creator = useMemo(() => {   return new SurveyCreator({     haveCommercialLicense: true,     isAutoSave: true,     showTranslationTab: true,     showJSONEditorTab: user.role === 'ADMIN',   }); }, []); useEffect(() => { creator.JSON = currentQuestionnaire?.definition; creator.survey.onUpdateQuestionCssClasses.add(function (survey, options) { console.log('1/ onUpdateQuestionCssClasses'); }); creator.survey.onUpdatePanelCssClasses.add(() => { console.log('2/ onUpdatePanelCssClasses'); }); creator.survey.onUpdatePageCssClasses.add((sender, options) => { console.log('3/ onUpdatePageCssClasses'); console.log(options); }); creator.saveSurveyFunc = async (saveNo: string, callback: (saveNo: string, isSaved: boolean) => void) => { try { await save(); callback(saveNo, true); } catch (error) { callback(saveNo, false); } }; }, [creator]); return ( <SurveyCreatorComponent creator={creator} /> )

As you can see I only get the logs related to pages but not for questions:
Clipboard-File-1.png

When is that method triggering? I need to update the css when the survey creator is rendered.

Answers

created 2 years ago

I ended up taking this route directly into the css:

Code
.svc-question__adorner[data-sv-drop-target-survey-element='scenario'] {   display: none; }
    Comments (1)

      Hello Gregoire,
      Thank you for sharing your results.

      If you still want to try the onUpdateQuestionCssClasses callback, I would recommend that you subscribe to the creator.onSurveyInstanceCreated function, check if options.reason is "test" and subscribe to the options.survey.onUpdateQuestionCssClasses event.

      JavaScript
      creator.onSurveyInstanceCreated.add((sender, options) => { if(options.reason === 'test') { options.survey.onUpdateQuestionCssClasses.add((sender, options) => {... }); } });

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