Showing Columns using Header Context Menu that are Hidden by default

[Jon Pfortmiller]

I'm using the ASP.NET AJAX RadGrid, with the EnableHeaderContextMenu="true" setting. My grid has several columns, some of which are hidden by default using Display="false". Using the header context menu, I can hide and show columns on the client-side, which works great, with one glaring exception: columns that start out hidden are not able to be shown! Checking the box for a default-hidden column appears to do nothing. Upon doing a postback (by changing page or something), the column appears. Is there a fix for this?

EDIT: Additionally, the documentation says that you can edit column widths using COLGROUP.COL.WIDTH. That's the rendered HTML tag names, but what properties does that pull from?

EDIT2: I just noticed something interesting regarding my original question: The columns actually are appearing, they just have 0 minimum width, so that they're 0 wide if the window is narrow enough to require horizontal scrolling. I seem to be continuously plagued by issues with column width. I'm currently using TableLayout=Auto, and not setting any width on any columns, apart from setting the FilterControlWidth to be smaller than normal on some of the small columns.

Thanks!

[Brent]

I am experiencing this exact same thing.  I have 5 columns visible by default, and 5 more columns with Display="false".  In the header context menu, if you check the box to show any of the columns that are not displayed by default, they do not appear.  I am also using TableLayout="Auto", I do have fixed widths set on my columns, and I am using horizontal scrolling.

I really need this to work correctly for a release we are doing in the next few weeks.  I am hoping that I will not have to construct my own context menu to get the functionality I am looking for.

Here is my markup.  My grid is inside a table, and I  have set the table to style="table-layout:fixed".

                                <telerik:RadAjaxPanel runat="server">
                                    <telerik:RadGrid ID="grdResults" Visible="true" runat="server" Skin="WebBlue" AutoGenerateColumns="false"
                                        PageSize="20" AllowPaging="true" AllowSorting="true" OnItemCommand="grdResults_ItemCommand"
                                        OnNeedDataSource="grdResults_NeedDataSource" OnExcelMLExportRowCreated="grdResults_ExcelMLExportRowCreated"
                                        Width="740">
                                        <HeaderContextMenu OnItemCreated="HeaderContextMenu_ItemCreated">
                                        </HeaderContextMenu>
                                        <ExportSettings FileName="EmployeeSearchResults" ExportOnlyData="false">
                                        </ExportSettings>
                                        <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true" AllowColumnsReorder="true"
                                            ReorderColumnsOnClient="true">
                                            <Resizing AllowColumnResize="true" ClipCellContentOnResize="false" AllowRowResize="false"
                                                EnableRealTimeResize="true" ResizeGridOnColumnResize="false" />
                                            <Scrolling SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="400px"
                                                AllowScroll="true" FrozenColumnsCount="2" />
                                        </ClientSettings>
                                        <PagerStyle Mode="NumericPages" HorizontalAlign="Center" VerticalAlign="Top" AlwaysVisible="true"
                                            Position="Bottom"></PagerStyle>
                                        <MasterTableView DataKeyNames="UserId" CommandItemDisplay="Top" EnableHeaderContextMenu="true">
                                            <CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" ShowExportToCsvButton="true"
                                                ShowExportToExcelButton="true" />
                                            <Columns>
                                                <telerik:GridTemplateColumn UniqueName="Selected" Reorderable="false" Resizable="false">
                                                    <ItemStyle Width="35" />
                                                    <HeaderTemplate>
                                                        <asp:CheckBox ID="chkAll" Checked="<%# SelectAllChecked %>" Enabled="<%# SelectAllEnabled %>"
                                                            runat="server" AutoPostBack="true" OnCheckedChanged="chkAll_CheckedChanged" />
                                                    </HeaderTemplate>
                                                    <ItemTemplate>
                                                        <asp:CheckBox ID="chk" runat="server" Checked='<%# Eval("Selected") %>' AutoPostBack="true"
                                                            OnCheckedChanged="chk_CheckedChanged" />
                                                        <asp:HiddenField ID="hdn" runat="server" Value='<%# Eval("UserId") %>' />
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridBoundColumn DataField="UserName" HeaderText="Name" SortExpression="UserName"
                                                    Reorderable="false">
                                                    <ItemStyle Width="130" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="EmployeeId" DataField="EmployeeId" HeaderText="Employee ID"
                                                    Display="false">
                                                    <ItemStyle Width="85" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="Title" DataField="Title" HeaderText="Title">
                                                    <ItemStyle Width="130" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="CompanyName" DataField="CompanyName" HeaderText="Org / Org Unit">
                                                    <ItemStyle Width="130" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="ManagerName" DataField="ManagerName" HeaderText="Manager">
                                                    <ItemStyle Width="130" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="EmailAddress" DataField="EmailAddress" HeaderText="Email Address">
                                                    <ItemStyle Width="150" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="Location" DataField="Location" HeaderText="Location"
                                                    Display="false">
                                                    <ItemStyle Width="100" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="YearsInCurrentPosition" DataField="YearsInCurrentPosition"
                                                    HeaderText="Years In Current Position" Display="false">
                                                    <ItemStyle Width="35" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn SortExpression="TotalYearsExperience" DataField="TotalYearsExperience"
                                                    HeaderText="Total Years Experience" Display="false">
                                                    <ItemStyle Width="35" />
                                                </telerik:GridBoundColumn>
                                            </Columns>
                                        </MasterTableView>
                                    </telerik:RadGrid>

[Jon Pfortmiller]

Additionally, paging seems to break after I add columns, client-side.

I have RadAjaxManager, which contains an AjaxSettings, which has AjaxControlID="RadGridMain", and AjaxUpdatedControl with ControlID="RadAjaxPanelMain".

I have a RadAjaxPanel ("RadAjaxPanelMain"), which contains a RadSplitter, which contains two RadPanes. In the top pane is a RadGrid ("RadGridMain"), and in the bottom pane is a custom user control for showing details of the selected row.

I have paging on the grid, and it works fine, alone. When I try to change pages, the loading panel appears while it does the Ajax call, it loads the data, and then the loading panel disappears. That works just as expected.

I have the HeaderContextMenu enabled on the grid, and can successfully hide and show columns client-side (apart from the above column width management issues). However, when I show a hidden-by-default column, and then try to change pages, the following happen:

The loading panel appears while it does the Ajax call. It loads the data (the visible data in the grid actually changes). The loading panel disappears briefly, and then almost immediately reappears, and stays visible, blocking the page, indefinitely.

Please help us solve these issues; we're on a very tight deadline for our application, and simply cannot afford to have these sort of problems.

[Veli]

Hi guys,

We cannot reproduce any of the issues you are describing locally. I suggest you both submit regular support tickets where you can provide us with some test project we can run locally, along with greater detail on how to reproduce these issues.

@Jon:
The two issues (showing hidden columns the and paging problems) may not be related. In any case, you can try to debug with the following actions:

1. Check if you are not getting any javascript errors in your browser. If you are using any custom scripts, you may want to check these too.
2. Disable all AJAX functionality from the page and see how the grid behaves and whether you are getting any server-side exceptions.

Additionally, as far as I understand, you are using both RadAjaxManager and RadAjaxPanel to AJAX-ify one and the same content. This is not a supported scenario and often leads to unexpected behavior with AJAX. Consider using either RadAjaxManager or RadAjaxPanel. If you stick to the former, replace the latter with standard Panels.

All the best,
Veli
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Brent]

I have submitted a support ticket this morning.  I will share the outcome with everyone once we work through that.  Just for posterity, here is a complete description of my multiple issues, and this is what I included in my support ticket:

I am having several issues with the RadGrid when using various features in combination.  I will try to describe these issues as succinctly as possible.  I have enabled column resizing, column reordering, header context menu, plus fixed columns.  I have a handful of columns that are hidden by default (Display="false"), and I want the user to be able to optionally make those columns visible using the header context menu.

• Scenario 1: First two columns set to fixed
  • FireFox 
    • Horizontal scrolling causes grid to flicker terribly, and headers do not maintain alignment
    • Using header context menu to make hidden columns visible does not make them visible
  • IE8 (Compatibility mode)
    • "Title" column's header is not the same width as its data items
    • Using header context menu to make hidden columns visible does make the columns visible, but if you scroll to the right to view them, their headers do not align at all.
  • IE8 (Standards mode)
    • Scrolling left and right shows the "EmployeeID" column, which is set to Display="false".
    • Using header context menu to make hidden columns visible has no effect.
• Scenario 2: No Fixed Columns
  • FireFox
    • Using header context menu to make hidden columns visible does not make the headers for the columns visible.
  • IE8 (Compatibility mode)
    • "Title" column's header is not the same width as its data items
    • Horizontal scrolling does not scroll the header
    • Using header context menu to make hidden columns visible makes the data items visible, but not the headers.
  • IE8 (Standards mode)
    • Using header context menu to make hidden columns visible does make the headers and the data items visible, but the width of those columns is very large.

[Brent]

FYI...most of my issues go away when you set fixed widths on the HeaderStyle of each column instead of the ItemStyle, and set the MasterTableView's TableLayout property to "Fixed".  I recommend trying that to see if it helps your situation out.

[Jessica]

Did you ever figure out a fix for this issue? 

[Veli]

Hi Jessica,

Have you tried Brent's suggestion of giving explicit width in pixels to your columns using the GridColumn.HeaderStyle.Width property and also setting RadGrid.MasterTableView.TableLayout = GridTableLayout.Fixed? If these do not help, can you describe your particular scenario with some code we can look at?

Regards,
Veli
the Telerik team

[Jessica]

Hi Veli,

Yes, I did try Brent's suggestion with no luck.   So, I have a subset of the grid columns that are not visible when the grid is initially displayed.  When the user clicks the context menu on a column header they can hide/show columns.  Even after implementing Brent's suggestion the initially hidden columns never become visible.  This is a snippet of code for how I define my grid:

<telerik:RadGrid AutoGenerateColumns="False" ID="RadGrid1" DataSourceID="projectAdhocDS"
                Width="760px" AllowFilteringByColumn="True" AllowSorting="True" GridLines="Both"
                PageSize="2" ShowFooter="True" AllowPaging="True" runat="server" OnDataBound="RadGrid1_DataBound"
             GroupingEnabled="true"
            EnableLinqExpressions="False" OnItemDataBound="RadGrid1_ItemDataBound"
            OnItemCommand="RadGrid1_ItemCommand">   
            <ExportSettings />
           <MasterTableView ShowFooter="true" Width="100%" TableLayout="Fixed" CommandItemDisplay="Top">
                <PagerStyle Mode="NextPrevNumericAndAdvanced"   />
                <CommandItemSettings  ShowAddNewRecordButton="false" ShowExportToWordButton="true" ShowExportToExcelButton="true"
                    ShowExportToCsvButton="true" />
                    <Columns>
                         <telerik:GridBoundColumn HeaderStyle-HorizontalAlign="Left" Visible="true"
                              HeaderText="Project Number" SortExpression="ProjectNumber"    
                              HeaderStyle-Wrap="true" HeaderStyle-Width="100px" ItemStyle-Wrap="true"  DataField="ProjectNumber" >
                          </telerik:GridBoundColumn>

I have more columns, but they're setup the same way.  Here's my menu which is defined outside the grid.

 <telerik:RadContextMenu ID="RadMenu1" runat="server" Skin="Outlook"
            CollapseAnimation-Type="None" OnClientItemClicked="ClientItemClicked">
                <Items>
                      <telerik:RadMenuItem Text="Hide Column" />
                      <telerik:RadMenuItem Text="Show Column" />
                      <telerik:RadMenuItem Text="Restore All" />
                </Items>
                <Targets>
                    <telerik:ContextMenuTagNameTarget TagName="thead" />
                </Targets>
            </telerik:RadContextMenu>
I dynamically populate the "show column" menu with the columns that happen to be hidden at that time.  Now, here are the JS functions I use to update and handle the menu.  I'm actually having another issue.  I can't seem to delete a sub menu item client side without getting a js error. 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
 
                <script type="text/javascript">
                    var activeTable;
                    var colIndex;

                    function ColumnContextMenu(sender, eventArgs) {
                        var radGrid = $find('<%= RadGrid1.ClientID %>');
                        activeTable = document.getElementById(radGrid.get_masterTableView().get_id());
                        colIndex = GetRealCellIndex(activeTable, eventArgs.targetElement);

                    }
                    function GetRealCellIndex(cols, cell) {
                         for (var i = 0; i < cols.length; i++) {
                            if (cols[i].get_element() == cell) {
                                  return i;
                                }
                            }
                       
                    }
                    function ClientItemClicked(sender, eventArgs) {
                        var radGrid = $find('<%= RadGrid1.ClientID %>');
                        var activeTable = $find(radGrid.get_masterTableView().get_id());
                        if (eventArgs.get_item()._text == "Hide Column") {
                            var tableCols = activeTable._columnsInternal;
                            colIndex = GetRealCellIndex(tableCols, eventArgs.get_targetElement());
                            activeTable.hideColumn(colIndex);
                            PopulateShowMenu(colIndex);
                        } else if (eventArgs.get_item()._text == "Restore All") {
                            RestoreColumns();
                        }
                        else {
                                 radGrid.get_masterTableView().showColumn(eventArgs.get_item()._properties._data.value);
                                 //now remove this entry from the hide menu
                               UpdateMenu(eventArgs.get_item()._properties._data.text);
                        }

                    }
                    function UpdateMenu(entry) {
                        var menu = $find("<%=RadMenu1.ClientID%>");
                        var deleteItem = menu.findItemByText(entry);

                        if (deleteItem != null) {
                            menu.trackChanges();
                            var parentItem = deleteItem.get_parent();
                            if (parentItem != null) {
                               var subMenu = menu.findItemByText("Show Column");
                                if (subMenu._children._array.length > 1) {
                                    menu.close();
                                    deleteItem.disable();
                               }
                                else
                                    parentItem.disable();
                            }

                            menu.commitChanges();  
                        }
                                                    
                    }
                    function PopulateShowMenu(colIndex) {
                         var grid = $find("<%=RadGrid1.ClientID %>");
                          var showCount = -1;
                         var menu = $find("<%=RadMenu1.ClientID%>");
                         var rootItem;
                         rootItem = menu.findItemByText("Show Column");

                         if (rootItem != null) {
                                 rootItem.enable();
                                 for (i = 0; i < grid.get_masterTableView().get_columns().length; i++) {
                                     var gridEle = grid.get_masterTableView().get_columns()[i].get_element();
                                     if (gridEle.currentStyle.display != "block") {
                               
                                         var col = grid.get_masterTableView().get_columns()[i].get_element().firstChild.childNodes;
                                         var childNode = menu.findItemByText(col[0].data);
                          
                                         if (childNode == null) {
                                             var subItem = new Telerik.Web.UI.RadMenuItem();
                                             subItem.set_text(col[0].data);
                                             subItem.set_value(colIndex);
                                             rootItem.get_items().add(subItem);
                                            
                                         }

                                     }

                                 }
                             menu.commitChanges();
                         }

                   }
                    function RestoreColumns() {
                        var grid = $find("<%=RadGrid1.ClientID %>");

                        for (i = 0; i < grid.get_masterTableView().get_columns().length; i++) {
                            grid.get_masterTableView().showColumn(i);
                        }
                    }  
                </script>  
 
            </telerik:RadCodeBlock>

I appreciate all your help.

Jessica

[Veli]

Hi Jessica,

There is a javascript error in your code. That is why you are not getting the columns shown back. Some of the reasons for js errors are:

1. A DOM element's currentStyle property is IE-specific. The code breaks in non-IE browsers

2. You assume the target of the context menu to always be the TD cell element, but with sorting enabled, if you right-click on the column text, the target is the anchor element that contains the header text and initiates the sorting. Thus, your code breaks if you show click on a sort link.
3. The set of enabled and disabled column items in the context menu does not correspond to the set of visible and invisible columns. Thus, you can click on columns that are already shown and, other times, you cannot click on columns that are hidden and you want to show them.

The same behavior you need is implemented by default and is available through RadGrid's EnableHeaderContextMenu property. Do you have any special requirements for not using this feature?

Veli
the Telerik team

[Matt]

Hi,

I know this is an old thread​ but I encountered the same issue. My columns that were initial set to display="false" appear​ed to not display when the show/hide check box was toggled. As noted above, this is because the header's width was being set to 0. You could make the table layout fixed or set the header's width value but in my case this was very cumbersome. In my, and I'm guessing others too, Radgrid's StaticHeader was set to "true" which caused the issue. Setting it to "false" resolved this issue for me.

[Maria Ilieva]

Hello Matt,

I suppose that you have MultiColumn Headers enabled for the RadGrid control. If this is true, note that we are already working on fixing the issues that appear in this scenario and we are doing our best to include the fix in one of the upcoming releases of the control.

Regards,
Maria Ilieva
Telerik

[Manoj]

I did EnableHeaderContextMenu="true" for the Grid and able to Show and Hide the Columns. I want to store the User selection of the context menu in a Database table. How do i get all the Column list with the cehckbox value as true or false for each column.

I tried these events OnColumnHidden="ColumnHidden" OnColumnShown ="ColumnShown"  on client side to create a string of display column list but is there any betterway we can do?

I am planning to implement the below functionality but the preferences in our own DB table instead of using SessionStorageProvider

https://demos.telerik.com/aspnet-ajax/controls/examples/integration/persisting-grid-settings/defaultcs.aspx?product=grid

[Eyup]

Hi Manoj,

Yes, the persistence framework is the preferred way of saving grid settings. Alternatively, you can also manually do that on button click for example. You can traverse the grid columns on client-side using grid.get_masterTableView().get_columns() and extract which one of them is visible using the following column method:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridcolumn-object/properties/get_visible()

Regards,
Eyup
Progress Telerik