Show Hide Columns dynamically

[Anthony]

Hi,

We were using the Kendo Grid in the following way, using JQuery. As you can see in the createTelerikGridControls method,
the columns are being created dynamically.  (ie if they should be visible or hidden).

This is done in the controller:

 public Dictionary<string, object> GetATMStatusGridData(int id, int userId, int pageId)
        {
            Dictionary<string, object> dict = new Dictionary<string, object>();
            object[] args;
            try
            {
                List<PPSPortal.Models.ATM> atmModelList = GetATMStatusData(id);

                List<ColumProperties> deserializedColumnProperties = GetUserPreferencesColumnProperties(userId, pageId);

                List<ColumProperties> columns = new List<ColumProperties>();
                columns.Add(new ColumProperties { field = "Id", title = "ATM Id", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Id"), width = 40 });
                columns.Add(new ColumProperties { field = "Name", title = "Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Name"), width = 60 });
                columns.Add(new ColumProperties { field = "Status", title = "Status", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Status"), width = 30, template = "#= formatCellColor(Status) #" });
                columns.Add(new ColumProperties { field = "Active", title = "Active", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Active"), width = 30 });
                columns.Add(new ColumProperties { field = "Online", title = "Online", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Online"), width = 30 });
                columns.Add(new ColumProperties { field = "TotalCashRemaining", title = "Total Cash Remaining", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "TotalCashRemaining"), width = 70, template = "#= formatToatlCash(TotalCashRemaining) #" });
                columns.Add(new ColumProperties { field = "LastMessageFromATM", title = "Last Message From ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageFromATM"), width = 80 });
                columns.Add(new ColumProperties { field = "LastMessageToATM", title = "Last Message To ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageToATM"), width = 80 });
                columns.Add(new ColumProperties { field = "GroupName", title = "Group Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "GroupName"), width = 50 });
                columns.Add(new ColumProperties { field = "Location", title = "ATM Location", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Location"), width = 140 });
                dict.Add("Columns", columns);
                dict.Add("Collection", atmModelList);
            }
            catch (Exception ex)
            {

            }
            return dict;
        }

The ColumnProperties class has field, title and hidden properties which is added to the Dictionary object.
this Disctionary object stores:
1. The data (ATM)
2. Columns meta data (ColumnProperties)

In JQuery:
$(document).ready(function () {
        // Send an AJAX request
        var participantId = $("#ParticipantId").attr("value");
        var userId = $("#UserId").attr("value");
        var apiUrl = '/api/ATMStatusWebAPI/GetATMStatusGridData/' + participantId + '?userId=' + userId + '&pageId=3';
        var grid = $("#grid");
        grid.css('color', '#1e426d');
        var gridblock = $(".JHADisplayBlock_Grid");
        gridblock.hide();
        $.getJSON(apiUrl)
            .done(function (data) {
                var tbl = $(".JHADisplayBlock_Table");
                tbl.css("width", "100%");
                //GridProperties is a prototype to set the properties of the Grid
                var jhaGridProperties = new GridProperties(data.Collection, data.Columns, 20, true, true, false, true, [20, 30, 40, 50], true, true, true, true, "single row", "blue");
                createTelerikGridControls(jhaGridProperties);
                gridblock.show();
            })
        .error(function (jqXHR, textStatus, errorThrown) {
            //alert("error " + errorThrown);
            //alert("incoming Text " + jqXHR.responseText);
        })
    });

    // Create the Telerik controls
    function createTelerikGridControls(jhaGridProperties) {
        var grids = $(".JHAGrid");
        grids.each(function () {
            $(this).kendoGrid({
                dataSource: {
                    data: jhaGridProperties.data,
                    pageSize: jhaGridProperties.pageSize
                },
                color: jhaGridProperties.color,
                groupable: jhaGridProperties.groupable,
                scrollable: jhaGridProperties.scrollable,
                sortable: jhaGridProperties.sortable,
                pageable: {
                    refresh: jhaGridProperties.refreshPages,
                    pageSizes: jhaGridProperties.pageSizes
                },
                filterable: jhaGridProperties.filterable,
                selectable: jhaGridProperties.rowSelectableType,
                dataBound: addExtraStylingToGrid,
                reorderable: jhaGridProperties.reorderable,
                columnMenu: {
                    columns: jhaGridProperties.showColumns
                },
                toolbar: kendo.template($("#toolbarTemplate").html()),
                detailTemplate: kendo.template($("#template").html()),
                detailInit: detailInit,
                change: onGridClick,
                columns: jhaGridProperties.columns
            });
        });
    }


All this works fine.

Now we need to do this in ASP.Net MVC. But I am not able to hide/show the columns in the same way, as Visible needs to be hardcoded to true or false at design time
Could you please help me with this?

 @(Html.Kendo().Grid<PPSPortal.Models.ATM>()
                                  .DataSource(dataSource => dataSource
                                      .Ajax()
                                      .Read(read => read.Action("GetATMStatusGrid", "ATM", new { id = participantId, userId = userId, pageid = 3 }))
                                      .PageSize(10)
                                      .ServerOperation(false)
                                   )
                .Name("Grid")
                .Sortable()
                .Filterable()
                .Pageable()
                .ColumnMenu()
                .Columns(cols=>
               {
                         col.Bound(m => m.Id).Visible(false);
                         col.Bound(m => m.Name).Visible(true);
               })
                .Groupable()
                                    )

[Anthony]

I fixed this problem using Javascript:

function onDataBound(e) {
    //Hide show columns
    var columns = e.sender._data[0].ColumnProperties;
    var grid = $('#Grid').data('kendoGrid');
        for(i=0; i< grid.columns.length; i++)
        {
            var columnInfo = grid.columns[i];
            for(j=0; j< columns.length; j++)
            {
                if(columnInfo.field == columns[j].field)
                {
                    if(columns[j].hidden == true)
                    {
                        grid.hideColumn(i);
                    }
                }
            }
        }
    }
If anyone's got  a better way to do this, please let me know

[Mike]

I'm looking to do something similar but looping through and hiding multiple columns is extremely slow and blocks all other processes. Has anyone come across other workarounds?

 And I've created this feature suggestion to allow showing/hiding multiple columns, if you or anyone else is interested.

[Dimo]

Hello Dmitri,

Instead of showing or hiding multiple columns, which is a resource-intensive operation, you can consider using setOptions to reinitialize the Grid with the desired column visibility settings. Note that the Grid will be rebound in this case.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

Regards,
Dimo
Telerik