---
title: Hide a Category from the Property Grid
product: Survey Creator
description: Learn how to customize the Property Grid in SurveyJS and hide some of its categories using the onSurveyInstanceCreated event handler. View our JavaScript demo that illustrates how to hide the 'Conditions' category for all elements except surveys, pages, and panels by manipulating the visibility of the corresponding Property Grid panels.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Hide a Category from the Property Grid (Vue 3)

Properties in the Property Grid are organized into categories. If you want to hide one or several categories, customize the Property Grid within the [`onSurveyInstanceCreated`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceCreated) event handler. In this demo, it is used to hide the Conditions category for all elements, except for survey, pages, and panels. 

Like most Survey Creator UI elements, the Property Grid is [essentially a survey](https://surveyjs.io/survey-creator/documentation/property-grid-customization#add-custom-properties-to-the-property-grid), in which categories are [pages](https://surveyjs.io/form-library/documentation/api-reference/page-model) (by default) or [panels](https://surveyjs.io/form-library/documentation/api-reference/panel-model) (if you set [`propertyGridNavigationMode`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#propertyGridNavigationMode) to `"accordion"`). To hide a category, you need to hide the corresponding page or panel. Find it by [category name](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#category) using `SurveyModel`'s [`getPageByName()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getPageByName) or [`getPanelByName()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getPanelByName) method and call the `delete()` method on the page or panel object. Refer to the `onSurveyInstanceCreated` implementation in this demo for a code example.

## Files

### `public/index.html`

```html
<div id="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div>
```

### `src/App.vue`

```html
<template>
    <SurveyCreatorComponent :model="creator" />
</template>
<script setup lang="ts">
    import { SurveyCreatorModel } from "survey-creator-core";
    import { SurveyCreatorComponent } from "survey-creator-vue";
    import "survey-core/survey.i18n";
    import "survey-creator-core/survey-creator-core.i18n";
    import "survey-core/survey-core.css";
    import "survey-creator-core/survey-creator-core.css";
    import "./index.css";
    import SurveyTheme from "survey-core/themes";
    import { registerCreatorTheme } from "survey-creator-core";

    registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

    const creator = new SurveyCreatorModel();
    // Element types for which the Conditions category should remain visible
    const whiteList = [ "survey", "page", "panel" ];
    
    creator.onSurveyInstanceCreated.add((_, { area, obj, survey }) => {
        if (area === "property-grid") {
            const mustHide = whiteList.indexOf(obj.getType()) === -1;
            if (mustHide) {
                // A category is a panel if `propertyGridNavigationMode` is `"accordion"`; otherwise, it is a page.
                const logicCategory = survey.getPageByName("logic") || survey.getPanelByName("logic");
                if (logicCategory) {
                    logicCategory.delete();
                }
            }
        }
    });
    
    creator.JSON = {
      "pages": [{
        "name": "page1",
        "elements": [{
          "type": "text",
          "name": "question1"
        }]
      }]
    }
</script>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-vue": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/vanillajs.md)