{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-default-filtering",
  "framework": "angular",
  "type": "registry:component",
  "component": "Grid",
  "variant": "default-filtering",
  "dependencies": [
    "@syncfusion/ej2-angular-grids"
  ],
  "description": "Data grid bound to a category list with a dropdown-driven filter and toggleable filter-bar operator.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/grid-default-filtering.md"
  },
  "files": [
    {
      "target": "src/components/grid-default-filtering/filter.style.css",
      "content": ".select-wrap {\n    padding: 0 0 10px 0;\n    font-family: Roboto;\n    padding: 1em;\n    display: inline-block;\n}\n\n.select-wrap .e-ddl.e-input-group .e-ddl-hidden {\n    width: 0;\n}\n\n.select-wrap select {\n    height: 28px;\n    width: 100%;\n    border-width: 0 0 2px 0;\n    background: transparent;\n}\n\n.select-wrap select:focus {\n    border-bottom-style: solid;\n    border-color: #ff4081;\n}\n\n.select-wrap select,\n.select-wrap select option {\n    outline: none;\n    font-size: 14px;\n    padding: .2em;\n    height: 30px;\n}\n\n@media (min-width: 480px) and (max-width:639px) {\n    .select-wrap {\n        width: 40%\n    }\n}\n\n@media (min-width:640px) {\n    .select-wrap {\n        width: 25%\n    }\n}\n\n\n\n\n"
    },
    {
      "target": "src/components/grid-default-filtering/filtering.component.ts",
      "content": "import { Component, OnInit, ViewChild, Inject } from '@angular/core';\nimport { categoryData } from '../data';\nimport { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { FilterService, SortService, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';\nimport { CheckBoxComponent, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';\nimport { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';\n\n@Component({\n    selector: 'ej2-gridfilter',\n    templateUrl: 'filtering.html',\n    styleUrls: ['filter.style.css'],\n    providers: [FilterService, SortService, PageService],\n    standalone: true,\n    imports: [DropDownListModule, GridModule,  CheckBoxModule]\n})\nexport class FilterComponent implements OnInit {\n    public data!: Object[];\n    public ddldata!: Object[];\n    public pageOptions!: Object;\n    public category!: string[];\n\n    @ViewChild('grid')\n    public grid!: GridComponent;\n    @ViewChild('checkbox')\n    public checkbox!: CheckBoxComponent;\n\n    public ngOnInit(): void {\n        this.data = categoryData;\n        this.pageOptions = { pageSize: 10, pageCount: 5 };\n        this.category = ['All', 'Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals',\n            'Meat/Poultry', 'Produce', 'Seafood'];\n        this.ddldata = this.category;\n    }\n\n    public onChange(e: ChangeEventArgs): void {\n        if (e.value === 'All') {\n            this.grid.clearFiltering();\n        } else {\n            this.grid.filterByColumn('CategoryName', 'equal', e.value as any);\n        }\n    }\n\n    public checkboxChange(e: any): void {\n        if (e.checked) {\n            this.grid.filterSettings.showFilterBarOperator = true;\n        } else {\n            this.grid.filterSettings.showFilterBarOperator = false;\n        }\n    }\n}"
    },
    {
      "target": "src/components/grid-default-filtering/filtering.html",
      "content": "<div class=\"col-lg-9 control-section\">\n    <div class=\"select-wrap\">\n        <ejs-dropdownlist id='ddlelement' [dataSource]='ddldata' placeholder = 'Select category to filter' (change)=\"onChange($event)\"></ejs-dropdownlist>\n    </div>\n    <ejs-grid #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<div class=\"col-lg-3 property-section\">\n    <div class=\"property-panel-section\">\n        <div class=\"property-panel-header\">Properties</div>\n        <div class=\"property-panel-content\">\n            <table id=\"property\" title=\"Properties\" class=\"property-panel-table\" style=\"width: 100%\">\n                <tr>\n                    <div class=\"checkbox-control\" style=\"padding-left: 5px\">\n                        <div class=\"row\">\n                            <ejs-checkbox label=\"Enable Filterbar Operator\" labelPosition='Before' [checked]=\"false\"\n                                (change)=\"checkboxChange($event)\"></ejs-checkbox>\n                        </div>\n                    </div>\n                </tr>\n            </table>\n        </div>\n    </div>\n</div>\n"
    }
  ]
}