Override the Property Grid's component


// ! Demo-related code part - START

// ! To modify the Property Grid in a custom manner, create a custom React component that overrides the Property Grid's render.

class CustomPropertyGridWrapper extends React.Component {
    constructor(props) {
        this.btnClearSurveyClick = this.btnClearSurveyClick.bind(this);
        this.btnLoadNPSSurveyClick = this.btnLoadNPSSurveyClick.bind(this);
    setCreatorJSON(val) {
        this.props.model.creator.JSON = val;
    render() {
        const model = this.props.model;
        if (!model) return null;
        const rootStyle = { width: '100%', display: 'flex', padding: '5px' };
        const btnsStyle = { flex: '100%', padding: '5px' };
        const btnStyle = {
            width: '100%',
            minHeight: '32px',
            marginRight: '7px',
            marginBottom: '7px',
        // Render a new element (a button in this demo) within the Property Grid, at the top.
        // Place the SurveyJS Creator's built-in PropertyGridComponent to render the rest of the Property Grid element in the default manner.
        return (
    <div style={rootStyle}>
        <img src="https://avatars.githubusercontent.com/u/25198306?s=200&amp;v=4"
        <div style={btnsStyle}>
            <button type="button"
                Clear Survey
            <button type="button"
                Load NPS Survey
    <SurveyCreator.PropertyGridComponent model={model}></SurveyCreator.PropertyGridComponent>
    btnClearSurveyClick() {
    btnLoadNPSSurveyClick() {
                "<h3>Thank you for your feedback.</h3><h5>Your thoughts and ideas will help us to create a great product!</h5>",
            completedHtmlOnCondition: [
                    expression: "{nps_score} > 8",
                        "<h3>Thank you for your feedback.</h3><h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>",
                    expression: "{nps_score} < 7",
                        "<h3>Thank you for your feedback.</h3><h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5>",
            pages: [
                    name: "page1",
                    elements: [
                            type: "rating",
                            name: "nps_score",
                                "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
                            isRequired: true,
                            rateMin: 0,
                            rateMax: 10,
                            minRateDescription: "(Most unlikely)",
                            maxRateDescription: "(Most likely)",
                            type: "checkbox",
                            name: "promoter_features",
                            visibleIf: "{nps_score} >= 9",
                            title: "Which features do you value the most?",
                            isRequired: true,
                            validators: [
                                    type: "answercount",
                                    text: "Please select two features maximum.",
                                    maxCount: 2,
                            showOtherItem: true,
                            choices: [
                                "User Interface",
                                "Complete Functionality",
                            otherText: "Other feature:",
                            colCount: 2,
                            type: "comment",
                            name: "passive_experience",
                            visibleIf: "{nps_score} > 6  and {nps_score} < 9",
                            title: "What do you like about our product?",
                            type: "comment",
                            name: "disappointed_experience",
                            visibleIf: "{nps_score} notempty",
                                "What do you miss or find disappointing in your experience with our products?",
            showQuestionNumbers: "off",

// ! Register your custom class (CustomPropertyGridWrapper) as a React component which will be used by Survey Creator to render the Property Grid element.
// Call the ReactElementFactory's registerElement() method and use "svc-property-grid" as an identifier of the Property Grid element for which to register your custom component.

SurveyReact.ReactElementFactory.Instance.registerElement("svc-property-grid", (props) => {
    return React.createElement(CustomPropertyGridWrapper, props);

// ! Demo-related code part - END

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />

<!DOCTYPE html>
<html lang="en">
    <title>Override the Property Grid&#39;s component, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
            :root {
                --tab-min-height: 600px;
    <link rel="stylesheet" href="./index.css">

<body style="margin: 0">
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>

<script type="text/babel" src="./index.js"></script>

Sorry, we can't retrieve the data from server. Please comeback later.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.