Standalone Column-Chooser ASP.NET Core

[Stefan]

Hi,

is it possible to have a standalone column-chooser in ASP.Net Core Telerik UI, like shown here in Angular UI?:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/#toc-standalone-column-chooser

[Patrick | Technical Support Engineer, Senior]

Hello Stefan,

Currently, there is not an equivalent standalone column-chooser for UI for ASP.NET Core.  

That being said, the implementation described within this Kendo UI Knowledge Base article can be utilized:

Kendo UI Menu(column menu) and Grid

@(Html.Kendo().Menu()
            .Name("columnMenu")
            .CloseOnClick(false)
            .Orientation(MenuOrientation.Vertical)
            .Events(e => e.Select("onSelect"))
            .HtmlAttributes(new { style = "width: 100px; margin-bottom: 5px;" })
        )

<div class="row">
    <div class="col-12">

        @(Html.Kendo().Grid <GridExample.Models.OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);
                    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName);
                    columns.Bound(p => p.ShipCity);
                })
                .Events(e => e.ColumnMenuInit("onColumnMenuInit"))
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
        )
    </div>
</div>

JavaScript

    $(function () {
        //reference grid
        var grid = $("#grid").data("kendoGrid");

        //reference columns
        var columnValues = grid.columns;

        //Create array
        var checkedValues = [];

        //for each column, add checked if hidden is undefined
        $(columnValues).each(function (index) {

            if (this.hidden == true) {
                checkedValues.push(" ");
            } else {
                checkedValues.push("checked");
            }
        });

        //reference the Kendo UI Menu
        var menu = $("#columnMenu").data("kendoMenu");

        //create initial first item
        menu.append({ text: "Columns" });

        //reference it through jQuery
        var firstItem = $("#columnMenu").children("li").eq(0);

        //for each column, append checkboxes with checked values based on hidden field
        $(columnValues).each(function (index) {
            menu.append({ text: "<input type='checkbox' " + checkedValues[index] + " />" + grid.columns[index].field, encoded: false }, firstItem);
        });

    });

    function onColumnMenuInit(e) {
        var item = e.container.find(".k-columns-item");
        item.prev(".k-separator").remove();
        item.remove();
    }

    function onSelect(e) {

        //reference checkbox
        var checkbox = $(e.item).find("input");

        //reference the Grid
        var grid = $("#grid").data("kendoGrid");

        //hold the number of columns
        var numOfColumns = grid.columns.length;

        //loop through to find how many columns are hidden
        for (var i = 0; i < grid.columns.length; i++) {
            if (grid.columns[i].hidden == true) {
                numOfColumns--;
            }
        }

        //if the field matches the selected item, check if it is hidden or not.
        for (var i = 0; i < grid.columns.length; i++) {
            if (grid.columns[i].field == e.item.innerText) {

                //Show the hidden column
                if (grid.columns[i].hidden == true) {
                    grid.showColumn(grid.columns[i].field);

                    //check box
                    $(checkbox).prop("checked", true);

                    //it will hide as long as there is more than one column in the Grid
                } else if (numOfColumns != 1) {
                    grid.hideColumn(grid.columns[i].field);

                    //uncheck box
                    $(checkbox).prop("checked", false);
                } else {

                    //check box if it's the last item
                    $(checkbox).prop("checked", true);
                }
            }
        }
    }

Additionally, I have found a feature request asking for the functionality to be added in the future which is currently under review.  I have added a vote on your behalf, feel free to add any comments for the development community, and I recommend following it for any potential updates.

Regards,
Patrick
Progress Telerik