Hide column group based on .net variable

9 posts, 0 answers
  1. Simon
    Simon avatar
    5 posts
    Member since:
    Feb 2018

    Posted 19 Feb 2018 Link to this post

    We have a page that contains a mvc kendo grid. This grid contains a detail template = all working as expected!

    Also, on the same page there is a checkbox.

     

    In our grid (below), and we want to switch SALES OUT and COST VALUE column groupings based on the checkbox being checked. Does the checkbox have to be a html checkbox or can we leave it as a .net checkbox and do this in the code behind?

    I'm new to kendo so any help greatly appreciated. We are trialling it to see if ti fits our requirements.

    Thanks Simon

    @(Html.Kendo().Grid<Web_AllPFCs_BySMR_v5>()
                  .Name("wpsbysmr")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.SMRCat).Title("Category").Width(150);
     
                      columns.Group(g => g.Title("Sales Out").Visible(true)
                          .Columns(costvalue =>
                          {
                              costvalue.Bound(c => c.Avg1_Invoice).Width(100).Title("PPU Calendar YTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.Avg2_Invoice).Width(100).Title("PPU Calendar PYTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.Value1).Width(100).Title("Calendar YTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.Value2).Width(100).Title("Calendar PYTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.PFCDiffSale).Width(100).Title("Change").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.PFCPercSale).Width(100).Title("Change %").Format("{0:0.0%}");
                          })
                      );
     
                      columns.Group(g => g.Title("Cost Value").Visible(false)
                          .Columns(costvalue =>
                          {
                              costvalue.Bound(c => c.Avg1_Cost).Width(100).Title("PPU Calendar YTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.Avg2_Cost).Width(100).Title("PPU Calendar PYTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.Cost1).Width(100).Title("Calendar YTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.Cost2).Width(100).Title("Calendar PYTD").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.PFCDiffCost).Width(100).Title("Change").Format("{0:£#,##0}");
                              costvalue.Bound(c => c.PFCPercCost).Width(100).Title("Change %").Format("{0:0.0%}");
                          })
                      );
     
                  })
                  .Scrollable(s => s.Height("auto"))
                  .HtmlAttributes(new { style = "max-height:550px !important;" })
                  .Pageable(pageable => pageable
                      .Refresh(true)
                      .PageSizes(true)
                      .ButtonCount(15))
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .Read(read => read.Action("WPSBySMR", "Home"))
                      .PageSize(10)
                  )
                  .Events(e => e.DataBound("wpsbysmr_Databound"))
                  .ClientDetailTemplateId("SMRCatDetails")
            )

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2478 posts

    Posted 20 Feb 2018 Link to this post

    Hi Simon,

    The behavior you describe can be achieved with client-side logic. You can handle the change event of the checkbox and call setOptions for the Grid in the event handler. Based on the selected state of the checkbox you can construct the JavaScript object with the relevant Grid settings and pass it as argument to setOptions. After this the Grid will be recreated with the provided options.

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Simon
    Simon avatar
    5 posts
    Member since:
    Feb 2018

    Posted 20 Feb 2018 in reply to Viktor Tachev Link to this post

    Yep, and I saw setOptions(), but nowhere in the documentation do I see any code that targets a group of columns as I have in my grid.

    How can I use setOptions to hide column groups please?

  4. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 22 Feb 2018 Link to this post

    Hello, Simon,

    The desired result can be achieved using the built-in showColumn and hideColumn methods of the Grid. It will require executing the corresponding methods on the change event of the Radio buttons.

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/hidecolumn

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/showcolumn

    I made an example demonstrating this:

    https://dojo.telerik.com/uyuTev

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Simon
    Simon avatar
    5 posts
    Member since:
    Feb 2018

    Posted 22 Feb 2018 in reply to Stefan Link to this post

    Thanks - I also saw the .hideColum and .showColumn methods, but this does not seem to work for columns that are grouped as in my code above...?

    Do you not have a ".hidecolumngroup" method, how can I target the whole group and hide the columns in it?
    I thought the below would work but maybe I am misunderstanding the API???

    grid.collapseGroup(".k-grouping-row:contains('Cost value')");
  6. Simon
    Simon avatar
    5 posts
    Member since:
    Feb 2018

    Posted 22 Feb 2018 Link to this post

    Great I see that.hideCOlumn works on a column by column basis, so if I have a grouped column of child coumns it hides the whole group ! :D

     

    What if I want to hide a child column (c.Avg2_Invoice) in a column grouping? Can I do .hideColumn(0,2) or .showColumn(0,2) ???

     

    Many thanks

    Simon

  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2478 posts

    Posted 26 Feb 2018 Link to this post

    Hello Simon,

    I am afraid that the behavior you describe is not available for the Grid. When multi-column headers are enabled hiding and showing is available for the topmost level only. 

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Simon
    Simon avatar
    5 posts
    Member since:
    Feb 2018

    Posted 26 Feb 2018 in reply to Viktor Tachev Link to this post

    That's a little disappointing, but not a deal breaker at the moment as we test these tools.
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2478 posts

    Posted 28 Feb 2018 Link to this post

    Hello Simon,

    I am sorry that the current functionality of the Grid does not fully satisfy your requirement. If you would like to suggest additional features for the Grid I can suggest submitting a request in our UserVoice portal. It is closely monitored and helps determine what features are important to the users based on the traction a request gathers with the community. 


    In case additional queries arise please do not hesitate to contact us again.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top