Enable column menu in Kendo grid only for one column and hide specific columns by default on page load

0
votes

I want to provide the column menu option for columns only in one specific column of the kendo grid. Also, when the page loads I want to display one specific columns and hide the other columns. The user can select the other(hidden) columns from the column menu option which is provided in one of the columns.

I have done something like this to hide the column menu from certain columns:

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

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        ShipCountry: { type: "string" },
                                        ShipName: { type: "string" },
                                        ShipAddress: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 30,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 550,
                        pageable: true,
                        columnMenu: true,
                        columns: [{
                            field: "OrderID",
                            title: "Order ID",
                            width: 120
                        }, {
                            field: "ShipCountry",
                            title: "Ship Country"
                        }, {
                            field: "ShipName",
                            title: "Ship Name"
                        }, {
                            field: "ShipAddress",
                            filterable: false
                        }
                        ]
                    });
                });
$(function(){
     $('#grid .k-header-column-menu').eq(0).hide();
     $('#grid .k-header-column-menu').eq(1).hide();
     $('#grid .k-header-column-menu').eq(2).hide();
})

            </script>
        </div>
</body>

Is there a better method to achieve these two functionalities?

3
javascriptjquerykendo-uikendo-grid

3 Answers

1
votes

I had a similar request, but I didn't put column-menu in one column rather I put it outside in toolbar section, additionally I added export buttons in same template.

var toolbarTemplate = '<div id="column-menu-button" style="float:left" ></div>';
var templ = '<div class="toolbar buttons-wrap" style="text-align: right;"><div id="toolbar"></div></div>';


var grid = $("#grid").kendoGrid({
    toolbar: kendo.template(templ),
    columns: [
        {field: "name", menu: true, hidden: true},
        {field: "age", menu: false}
    ],
    sortable: true,
    dataSource: [
        {name: "Jane Doe", age: 30},
        {name: "John Doe", age: 33}
    ]
}).getKendoGrid();

var createKendoColumnMenu = function (id, dataSource, owner) {
    var kendoColumnMenu = $(id).kendoColumnMenu({
        dataSource: dataSource,
        filterable: false,
        sortable: false,
        columns: true,
        owner: owner,
    });
};

var createKendoToolBar = function (id) {
    var kendoToolBar = $(id).kendoToolBar().getKendoToolBar();

    return kendoToolBar;
};

createKendoToolBar('#toolbar').add({
    template: toolbarTemplate,
    id: 'column-menu',
    overflow: 'never'
});

createKendoColumnMenu('#column-menu-button', grid.dataSource, grid);

Check my example: Custom toolbar

0
votes

Change your columns array to add the hidden property.

columns: [{
    field: "OrderID",
    title: "Order ID",
    width: 120,
    hidden: true
}, {
    field: "ShipCountry",
    title: "Ship Country",
    hidden: true
}, {
    field: "ShipName",
    title: "Ship Name",
    hidden: true
}, {
    field: "ShipAddress",
    filterable: false
}]

As far as the hiding the column menu. You already have the way to do it, as a function. It may be better to put it in the databound event of the grid, but the way you have it should work fine.

0
votes

I have found a solution to enable the columnMenu option only in one column. Basically, I am adding a div element to the column headerTemplate in which I want to enable this feature. And then, I am attaching a kendoColumnMenu to it. Here's an example: ColumnMenu