Override the Property Grid Component

Survey Creator consists of individual UI components that you can override to extend their functionality or implement custom appearance. Overriding the Property Grid component is useful if you want to add UI elements around it, without customizing the Property Grid itself. For instance, this demo shows how to display custom buttons above the Property Grid.

The steps to override a SurveyJS component depend on the frontend framework you use. The following instructions outline the core stages:

1. Create a custom component.
   This component will extend the Property Grid functionality.

2. Make the original Property Grid component available within the custom component.
   In React, import PropertyGridComponent within the custom component.
   In Vue 3, register the original component using the app.component() method (see the main.ts file).
   In Angular and vanilla JS applications, the original component is available by default.

3. Implement desired functionality in the custom component.
   The component's markup should include the original Property Grid component.

4. Replace the original component with the custom component.
   Register the custom component under the name "svc-property-grid" within ComponentFactory (in Vue 3), ReactElementFactory (in React and vanilla JS), or AngularComponentFactory (in Angular).

Refer to the Code tab for details and code examples.