{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-default-filtering",
  "framework": "vue",
  "type": "registry:component",
  "component": "Grid",
  "variant": "default-filtering",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-dropdowns",
    "@syncfusion/ej2-vue-grids"
  ],
  "description": "Data grid filters records with a category dropdown and a filterbar-operator toggle.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/grid-default-filtering.md"
  },
  "files": [
    {
      "target": "src/components/grid-default-filtering/Grid.vue",
      "content": "<template>\n<div>\n<div class=\"col-lg-9 control-section\">\n    <div>\n        <div class=\"select-wrap\" style=\"width: fit-content\">\n            <ejs-dropdownlist id='ddlelement' :dataSource='ddldata' placeholder='Select category to filter' :change=\"onChange\"></ejs-dropdownlist>\n        </div>\n\n        <ejs-grid ref='grid' :dataSource=\"data\" :allowPaging='true' :allowSorting='true' :allowFiltering='true' :pageSettings=\"pageOptions\">\n            <e-columns>\n                <e-column field='CategoryName' headerText='Category Name' width='150'></e-column>\n                <e-column field='ProductName' headerText='Product Name' width='150'></e-column>\n                <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column>\n                <e-column field='Discontinued' headerText='Discontinued' width='150' textAlign='Center' displayAsCheckBox='true' type='boolean'></e-column>\n            </e-columns>\n        </ejs-grid>\n    </div>\n\n</div>\n\n<div class=\"col-lg-3 property-section\">\n    <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n        <tr>\n            <div class=\"checkbox-control\" style=\"padding-left: 0px\">\n                <div class=\"row\" style=\"padding-left: 5px\">\n                    <ejs-checkbox label='Enable Filterbar Operator' labelPosition='Before' :change=\"filterbaroperator\"></ejs-checkbox>\n                 </div>\n            </div>\n        </tr>\n    </table>\n</div>\n</div>\n</template>\n<script lang=\"ts\">\nimport { GridComponent, ColumnDirective, ColumnsDirective, Filter, Page, Sort } from \"@syncfusion/ej2-vue-grids\";\nimport { DropDownListComponent} from \"@syncfusion/ej2-vue-dropdowns\";\nimport { CheckBoxComponent } from \"@syncfusion/ej2-vue-buttons\";\n\nconst categoryData = [\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 1,\n        'ProductName': 'Chai',\n        'SupplierID': 1,\n        'QuantityPerUnit': '10 boxes x 20 bags',\n        'UnitPrice': 18.00,\n        'UnitsInStock': 39,\n        'Discontinued': true\n    },\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 2,\n        'ProductName': 'Chang',\n        'SupplierID': 1,\n        'QuantityPerUnit': '24 - 12 oz bottles',\n        'UnitPrice': 19.00,\n        'UnitsInStock': 17,\n        'Discontinued': true\n    },\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 3,\n        'ProductName': 'Aniseed Syrup',\n        'SupplierID': 1,\n        'QuantityPerUnit': '12 - 550 ml bottles',\n        'UnitPrice': 10.00,\n        'UnitsInStock': 13,\n        'Discontinued': true\n    },\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 4,\n        'ProductName': 'Chef Anton\\'s Cajun Seasoning',\n        'SupplierID': 2,\n        'QuantityPerUnit': '48 - 6 oz jars',\n        'UnitPrice': 22.00,\n        'UnitsInStock': 53,\n        'Discontinued': true\n    },\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 5,\n        'ProductName': 'Chef Anton\\'s Gumbo Mix',\n        'SupplierID': 2,\n        'QuantityPerUnit': '36 boxes',\n        'UnitPrice': 21.35,\n        'UnitsInStock': 0,\n        'Discontinued': true\n    },\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 6,\n        'ProductName': 'Grandma\\'s Boysenberry Spread',\n        'SupplierID': 3,\n        'QuantityPerUnit': '12 - 8 oz jars',\n        'UnitPrice': 25.00,\n        'UnitsInStock': 120,\n        'Discontinued': false\n    },\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 7,\n        'ProductName': 'Uncle Bob\\'s Organic Dried Pears',\n        'SupplierID': 3,\n        'QuantityPerUnit': '12 - 1 lb pkgs.',\n        'UnitPrice': 30.00,\n        'UnitsInStock': 15,\n        'Discontinued': false\n    },\n    {\n        \"CategoryName\": \"Beverages\",\n        'ProductID': 8,\n        'ProductName': 'Northwoods Cranberry Sauce',\n        'SupplierID': 3,\n        'QuantityPerUnit': '12 - 12 oz jars',\n        'UnitPrice': 40.00,\n        'UnitsInStock': 6,\n        'Discontinued': false\n    }\n];\n\nexport default {\n  components: {\n    'ejs-grid': GridComponent,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective,\n    'ejs-dropdownlist': DropDownListComponent,\n    'ejs-checkbox': CheckBoxComponent\n  },\n  data: () => {\n    return {\n      data: categoryData,\n      pageOptions: { pageSize: 10, pageCount: 5 },\n      ddldata: ['All', 'Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals',\n            'Meat/Poultry', 'Produce', 'Seafood']\n    };\n  },\n  methods: {\n      onChange: function(e: ChangeEventArgs): void {\n        if (e.value === 'All') {\n            ((this as any).$refs.grid).clearFiltering();\n        } else {\n            ((this as any).$refs.grid).filterByColumn('CategoryName', 'equal', e.value);\n        }\n    },\n    filterbaroperator: function(args: any): void {\n        let grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]\n            if (args.checked) {\n                 grid.filterSettings.showFilterBarOperator = true;\n            } else {\n                grid.filterSettings.showFilterBarOperator = false;\n      }\n    }\n  },\n  provide: {\n      grid: [Filter, Page, Sort]\n  }\n}\n</script>"
    },
    {
      "target": "src/components/grid-default-filtering/GridView.vue",
      "content": "<template>\n  <Grid />\n</template>\n\n<script setup>\nimport Grid from '../../components/Grid.vue'\n</script>"
    }
  ]
}