Hide Column Based On Remote Data

[Graham]

I have a kendo grid that gets data remotely (because I use the export to excel functionality). The column headers are bound to my model which is passed as empty before the data source request gets the populated one.

    @model ReportingPortalWeb.Models.HireReportViewModel

     @(Html.Kendo().Grid<StockReport>()
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.SohQty).Title("Quantity");
                      columns.Bound(p => p.StockName);
                      ​...
                      columns.Bound(p => p.SiteAddress3);
                      columns.Bound(p => p.PostCode);
                  })
                  .ToolBar(tools => tools.Excel())
                  .Groupable()
                  .Excel(excel => excel
                      .FileName("Kendo UI Grid Export.xlsx")
                      .Filterable(true)
                      .ProxyURL(Url.Action("CustomReport_Data", "Reports"))
                  )
                  .DataSource(dataSource => dataSource
                      .Ajax()
                                        .Read(read => read.Action("CustomReport_Data", "Reports").Data("GetData")))
                  .Pageable()
                  .Sortable()
                  .Scrollable()
                  .Filterable()
                  .HtmlAttributes(new {style = "height:550px;"})
                  )

Before having to use the excel export I passed the data when the gird was created and I could hide a column easily by doing something like 

     columns.Bound(p => p.PrCode).Visible(Model.StockReport.Count(t => t.PrCode.Any()) > 0);

 

now that I am remotely fetching the data instead, is there a data on load event that I can use to hide the columns in my report that don't have any data in them?

 

 

[Radoslav]

Hello Graham,

To achieve the desired functionality you can handle the client side dataBound event and check the column data, if the column’s data is empty call grid’s hideColumn method which will hide the column. For example:

dataBound: function(e) {
    var grid = $("#grid").data("kendoGrid");
    var currentView = grid.dataSource.view();
    var shouldBeHidden = true;
    for(var i= 0, i< currentView.lenght; i++)
    {
          if(currentView[i].FieldName != '')
          {
                 shouldBeHidden = false;
          }
    }

    if(shouldBeHidden)
    {
          grid.hideColumn(1)
    }
},

I hope this helps.

Regards,
Radoslav
Telerik