Filter Hidden Group Columns

Environment

Product Version	2017.1 117
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I create a filter menu inside the first cell of the header for the grouping column in the Grid when the column is hidden?

Solution

To filter the hidden column:

1. Display the column.
2. In the dataBound event handler of the Grid:

   1. Get the HTML of the filter button.

   2. Append the button to the k-group-cell.

   3. Use the hideColumn method to hide the column.

      <div id="example">
      	<style>
      		.k-multicheck-wrap {
      			overflow-x: hidden;
      		}
      	</style>
      	<div class="demo-section k-content wide">
      		<h4>Client Operations</h4>
      		<div id="client"></div>
      	</div>
      	<script>
      		$(document).ready(function() {
      			var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core/";
      
      			$("#client").kendoGrid({
      				dataSource: {
      					transport: {
                  		    read:  {
                  		        url: crudServiceBaseUrl + "/Products"
                  		    },
                  		    update: {
                  		        url: crudServiceBaseUrl + "/Products/Update",
                  		        type: "POST",
                  				contentType: "application/json"
                  		    },
                  		    destroy: {
                  		        url: crudServiceBaseUrl + "/Products/Destroy",
                  		        type: "POST",
                  				contentType: "application/json"
                  		    },
                  		    create: {
                  		        url: crudServiceBaseUrl + "/Products/Create",
                  		        type: "POST",
                  				contentType: "application/json"
                  		    },
                  		    parameterMap: function(options, operation) {
                  		        if (operation !== "read" && options.models) {
                  		            return kendo.stringify(options.models);
                  		        }
                  		    }
                  		},
      					batch: true,
      					group: {
      						field: 'Discontinued'
      					},
      					schema: {
      						model: {
      							id: "ProductID",
      							fields: {
      								ProductID: {
      									editable: false,
      									nullable: true
      								},
      								ProductName: {
      									validation: {
      										required: true
      									}
      								},
      								UnitPrice: {
      									type: "number",
      									validation: {
      										required: true,
      										min: 1
      									}
      								},
      								Discontinued: {
      									type: "boolean"
      								},
      								UnitsInStock: {
      									type: "number",
      									validation: {
      										min: 0,
      										required: true
      									}
      								}
      							}
      						}
      					}
      				},
      				filterable: true,
      				height: 550,
      				dataBound: function(e) {
      					var grid = e.sender;
      					var gridEl = grid.element;
      					var filterElem = gridEl.find("[data-field='Discontinued']").find(".k-grid-filter-menu");
      					var myFilterPlaceholder = gridEl.find("th.k-group-cell.k-header");
      
      					myFilterPlaceholder.append(filterElem);
      					grid.hideColumn("Discontinued");
      				},
      				columns: [{
      						field: "ProductName",
      						filterable: {
      							multi: true,
      							search: true
      						}
      					},
      					{
      						field: "UnitPrice",
      						title: "Unit Price",
      						format: "{0:c}",
      						width: 120,
      						filterable: {
      							multi: true
      						}
      					},
      					{
      						field: "UnitsInStock",
      						title: "Units In Stock",
      						width: 120,
      						filterable: {
      							multi: true
      						}
      					}, {
      						field: "Discontinued",
      						groupHeaderTemplate: 'Discontinued: #= value #'
      					}
      				]
      			});
      
      		});
      	</script>
      </div>