This is a migrated thread and some comments may be shown as answers.

Hide column group based on .net variable

9 Answers 340 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 19 Feb 2018, 11:55 AM

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")
        )

 

9 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 20 Feb 2018, 12:46 PM
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.
0
Simon
Top achievements
Rank 1
answered on 20 Feb 2018, 02:21 PM

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?

0
Stefan
Telerik team
answered on 22 Feb 2018, 07:51 AM
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.
0
Simon
Top achievements
Rank 1
answered on 22 Feb 2018, 08:24 AM

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')");
0
Simon
Top achievements
Rank 1
answered on 22 Feb 2018, 09:30 AM

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

0
Viktor Tachev
Telerik team
answered on 26 Feb 2018, 09:37 AM
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.
0
Simon
Top achievements
Rank 1
answered on 26 Feb 2018, 09:43 AM
That's a little disappointing, but not a deal breaker at the moment as we test these tools.
0
Viktor Tachev
Telerik team
answered on 28 Feb 2018, 08:59 AM
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.
0
Ryan
Top achievements
Rank 1
Iron
Iron
Iron
answered on 12 Apr 2023, 10:40 PM | edited on 12 Apr 2023, 10:44 PM
Is this possible yet? I need to hide some columns within a group conditionally.
Ivan Danchev
Telerik team
commented on 14 Apr 2023, 08:58 AM

Hello Ryan,

You can use the hideColumn API method to hide a column conditionally. Here's an example showing how to hide a column bound to a field called ContactName in the DataBound event handler of the Grid:

function onDataBound(e) {
  var grid = $("#grid").data("kendoGrid");

  if(true) {
    grid.hideColumn("ContactName");
  }
}

Tags
Grid
Asked by
Simon
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Simon
Top achievements
Rank 1
Stefan
Telerik team
Ryan
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or