Custom Question Renderer
Each SurveyJS question type comes with a predefined renderer—a component that specifies the question's markup. If you want to customize a question's appearance, you can create a custom renderer and use it instead of the predefined renderer. Follow the instructions below to implement this functionality in your survey: Read more...
Each SurveyJS question type comes with a predefined renderer—a component that specifies the question's markup. If you want to customize a question's appearance, you can create a custom renderer and use it instead of the predefined renderer. Follow the instructions below to implement this functionality in your survey:
Create a component that renders your custom markup.
If the component reuses a predefined renderer, its class should extend one of the predefined classes. For example, in this demo, a custom component adds an image to a predefined Radiogroup question. The component's class extends Radiogroup's class (see theRadiogroupWithImageQuestion
class).Register your component under a custom name in the component collection.
In React, register the component inReactElementFactory
as shown in theSurveyComponent.jsx
file.
In Angular, register the component inAngularComponentFactory
as shown in thecustom-radiogroup.component.ts
file.
In Knockout, use techniques native to this library: Component Registration in Knockout.Register your component as a renderer for a selected question type.
Use theRendererFactory.Instance.registerRenderer(questionType, renderAs, rendererName)
method that accepts the following parameters:questionType
:String
- A question type for which this renderer can be used.renderAs
:String
- A name that activates this renderer. This name should be assigned to therenderAs
property in JSON.rendererName
:String
- The custom renderer's name under which you registered it in step 2.
Specify the
renderAs
property in the survey JSON schema.
Set this property to therenderAs
name under which you register the custom renderer in step 3. Specify therenderAs
property only for those questions that should use the custom renderer.