Cart Licenses Contact Support Online Creator Login/Register
v 1.9.32

Hide a category in the Properties Grid

This example demonstrates how to hide the 'Logic' category in the Properties Grid for all questions by hiding all properties in the category. The onShowingProperty event is used. Drop any question from the Toolbox and see that there is no Logic category in the Properties Grid.


const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
                creator.toolboxLocation = "right";
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
//A black list of properties displayed in Logic categories for different survey elements
var propertyStopList = [

//Hide properties contained in the black list, show all other properties
    .add(function (sender, options) {
        options.canShow = propertyStopList.indexOf( == -1;
//Refresh survey and reset property grid to let it handle onShowingProperty event
creator.JSON = {};
<!DOCTYPE html>
<html lang="en">
    <title>Hide a category in the Properties Grid, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src=""></script>
    <script src=""></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="" type="text/javascript" charset="utf-8"></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src=""></script>
    <link href="" rel="stylesheet" />
    <script src=""></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">

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

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


This sample demonstrates how to handle the onShowingProperty event to hide all properties in the 'Logic' category and the 'Logic' category itself.

Currently, there is no single option to hide a category in the Properties grid for all survey elements (pages, panels, questions of different types). Actually, a category in the Properties grid hides automatically, if all its properties become hidden. So, to hide a category, you can iterate through all properties and hide those which belong to this category.

The definition of all question properties (together with the related categories/tabs) can be found in our sources, in the following file: questionEditorDefinition.ts

To hide the 'Logic' category, you can review the questionEditorDefinition.ts file and populate a stop-list array (propertyStopList in the sample code) with properties that contain 'tab: "logic"'. Then handle the Creator's onShowingProperty event and prevent the display of properties contained in the black list. As a result, the 'Logic' category hides automatically if it does not contain any property.

; ; ;