Cart Buy Licenses Contact Integrate into App Docs Support Login/Register
v 1.8.52
v 1.8.52
Overview Survey Creator Examples Docs Source Download

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.


                        


            
                var creatorOptions = { };
                var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
                creator.showToolbox = "right";
                creator.showPropertyGrid = "right";
                creator.rightContainerActiveItem("toolbox");
            
//A black list of properties displayed in Logic categories for different survey elements
var propertyStopList = [
    "visibleIf",
    "enableIf",
    "requiredIf",
    "bindings",
    "defaultValueExpression",
    "columnsVisibleIf",
    "rowsVisibleIf",
    "hideIfChoicesEmpty",
    "choicesVisibleIf",
    "choicesEnableIf",
    "minValueExpression",
    "maxValueExpression",
    "calculatedValues",
    "triggers"
];

//Hide properties contained in the black list, show all other properties
creator
    .onShowingProperty
    .add(function (sender, options) {
        options.canShow = propertyStopList.indexOf(options.property.name) == -1;
    });
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>This example demonstrates how to hide the &#39;Logic&#39; 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., Survey Creator Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-knockout/survey.ko.min.js"></script>
    <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>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
        <script src="/DevBuilds/survey-creator/survey-creator.min.js"></script>
        <link href="/DevBuilds/survey-creator/survey-creator.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
<div id="surveyContainer">
        <div id="creatorElement"></div>
</div>

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

</body>
</html>

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
Example: Question Editor

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.