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: {
            type: "odata",
            transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/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>