Add onAfterRender* events to Survey model.

[andrewtelnov]

There are tasks that require to modify generated DOM elements after rendering.
Three new events: onAfterRenderSurvey, onAfterRenderPage and onAfterRenderQuestion are needed.
The options will contains two parameters: survey or page or question objects and htmlElement - a DOM element that associates with the model object.

[andrewtelnov]

Implemented. An exampled needed.

[ryancwalsh]

I'm very excited about this!

Here is an example of how I'm using it:

surveyModel.onAfterRenderQuestion.add(function (sender, options) {
        console.log('onAfterRenderQuestion options', options);
        if (options.question.name === 'initiate') {
            colorizeItems($('label.radio'));
        } else {
            $('label.radio').removeAttr('style');
        }
    });

[andrewtelnov]

@ryancwalsh You may want to use options.htmlElement. It is the htmlElement for this question. In this case you may modify the DOM of this element and its children.

Thank you,
Andrew

[ryancwalsh]

@andrewtelnov Cool, thanks!

Here is what I'm using now:

    surveyModel.onAfterRenderQuestion.add(function (sender, options) {
        console.log('onAfterRenderQuestion options', options);
        if (options.question.name === 'initiate') {
            colorizeItems($(options.htmlElement).find('label.radio'));
        } else {
            $(options.htmlElement).find('label.radio').removeAttr('style');
        }
    });

It seems like the else is required since the templating reuses the label DOM elements on future pages/questions.

That's how I got it to behave how I wanted.

Thanks.

[andrewtelnov]

@ryancwalsh Cool!

Thank you,
Andrew

[andrewtelnov]

The better way is to use the custom widget feature with isDefaultRender set to true.
Here is the demo: http://surveyjs.org/examples/jquery/custom-widget-barrating.html