Expand and Collapse Group of Columns on Button Click

Environment

Product Version	2018.1 221
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I expand and collapse a group of columns with a button when I am using multi-column headers in the Kendo UI Grid?

Solution

1. Use headerTemplate to add a button to the desired column header.
2. In the click event handler of the button and based on a condition, pass the desired columns as parameters to the hideColumn or the showColumn methods.

<div id="example">
	<div id="grid"></div>

	<script>
	$(document).ready(function () {
		$("#grid").kendoGrid({
		dataSource: {
			transport: {
			read: "https://demos.telerik.com/service/v2/core/Customers"
			},
			pageSize: 20
		},
		height: 550,
		pageable: true,
		columns: [
			{
			title: "Contact Info",
			headerTemplate: 'Contact Info <button class="k-button" style="float: right;" onclick="onExpColClick(this)"><span class="k-icon k-i-minus"></span></button>',
			columns: [{
				field: "ContactTitle",
				title: "Contact Title",
				width: 200
			},{
				field: "ContactName",
				title: "Contact Name",
				width: 200
			},{
				field: "Phone",
				title: "Phone"
			}]
			},{
			title: "Location",
			columns: [ {
				field: "Country",
				width: 200
			},{
				field: "City"
			}]
			}]
		});
	});

	function onExpColClick(button){
		var span = $(button).find("span");
		var grid = $("#grid").data("kendoGrid");

		if(span.hasClass("k-i-minus")){
		span.removeClass("k-i-minus");
		span.addClass("k-i-plus");

		grid.hideColumn("ContactName");
		grid.hideColumn("Phone");

		}else{
		span.removeClass("k-i-plus");
		span.addClass("k-i-minus");

		grid.showColumn("ContactName");
		grid.showColumn("Phone");
		}
	}
	</script>
</div>