excel-style-filtering-sample-1.json

{
  "todo": [""],
  "export": true,
  "skipAlterDataCasing": true,
  "descriptions": {
    "editor": {
      "type": "PropertyEditorPanel",
      "name": "PropertyEditor",
      "componentRendererRef": "renderer",
      "targetRef": "treeGrid",
      "descriptionType": "WebGrid",
      "isHorizontal": true,
      "isWrappingEnabled": true,
      "properties": [
        {
          "type": "PropertyEditorPropertyDescription",
          "name": "SizeEditor",
          "label": "Grid Size:",
          "valueType": "EnumValue",
          "dropDownNames": ["Small", "Medium", "Large"],
          "dropDownValues": ["Small", "Medium", "Large"],
          "changedRef": "WebTreeGridSetGridSize"
        }
      ]
    },
    "content": {
      "type": "WebTreeGrid",
      "id": "treeGrid",
      "name": "treeGrid",
      "dataRef": "FoodsData",
      "primaryKey": "ID",
      "foreignKey": "ParentID",
      "moving": true,
      "autoGenerate": false,
      "allowFiltering": true,
      "filterMode": "ExcelStyleFilter",
      "toolbar": [
        {
          "type": "WebGridToolbar",
          "tools": [
            {
              "type": "WebGridToolbarActions",
              "actions": [
                {
                  "type": "WebGridToolbarHiding"
                },
                {
                  "type": "WebGridToolbarPinning"
                }
              ]
            }
          ]
        }
      ],
      "columnList": [
        {
          "type": "WebColumn",
          "field": "ID",
          "header": "ID",
          "sortable": true
        },
        {
          "type": "WebColumn",
          "field": "Name",
          "header": "Product Name",
          "sortable": true
        },
        {
          "type": "WebColumn",
          "field": "UnitPrice",
          "header": "Unit Price",
          "sortable": true,
          "dataType": "Currency"
        },
        {
          "type": "WebColumn",
          "field": "AddedDate",
          "header": "Added Date",
          "sortable": true,
          "dataType": "Date"
        },
        {
          "type": "WebColumn",
          "field": "Discontinued",
          "dataType": "Boolean",
          "bodyTemplateRef": "WebGridBooleanCellTemplate"
        }
      ]
    }
  },
  "modules": [
    "withDescriptions",
    "layouts/PropertyEditorPanelModule",
    "grids/WebGridModule"
  ]
}