Hide Column Based On Remote Data

2 posts, 0 answers
  1. Graham
    Graham avatar
    5 posts
    Member since:
    Jul 2010

    Posted 16 Oct 2015 Link to this post

    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?

     

     

  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 20 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top