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

Column Hide/UnHide problem

16 Answers 500 Views

Grid

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

cds_user asked on 08 Jan 2010, 08:25 PM

I have a radgrid that has Hide/Unhide feature via theContextMenu, basically I have EnableHeaderContextMenu="true".When I right click on the Header bar the RadMenu is shown with all myColumns. I can check/uncheck and the column appears and disappears respectively. Also I have about 20 columns therefore I havea horizontal scrollbar. Finally I have a frozen column, say column 3 (Store Name).

The problem is when I hide column 4 (called Region) and move the scrollbar to the nextcolumn called Status (District will scrolloff the Grid which is GREAT) and scroll back left, than the District column is lost or notdisplayed. If I click the next page button it will reappear but as soon as Imove the scrollbar to right to the next column (Status) and back than theDistrict is lost.

Note: These are some of the column names

Detail, Store, Store Name, Region, District, Status

Just take the Frozen column online live demo and set EnableHeaderContextMenu="true" in the MasterTableView smart tag and hide a column after the frozen column. Next just move the scrollbar to right and back to the left to recreate the problem.

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/frozencolumns/defaultcs.aspx

16 Answers, 1 is accepted

answered on 13 Jan 2010, 04:36 PM

This code works in IE but not in FireFox and Safari when scrolling horizontal. Any help will be appreciated.

------ Default.aspx -------

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head id="Head1" runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <script type="text/javascript">  
        
            String.prototype.trimLeft = function ()  
        
            {  
        
                return this.replace(/^\s*/, "");  
        
            }  
        
            String.prototype.trimRight = function ()  
        
            {  
        
                return this.replace(/\s*$/, "");  
        
            }  
        
            String.prototype.trimLeftAndRight = function ()  
        
            {  
        
               return this.replace(/^\s*/, "").replace(/\s*$/, "");  
        
            }  
        
            function validateAll()  
        
            {  
        
            //debugger  
        
            //alert("HERE");  
        
              var hf = document.getElementById( '<%= ValueHiddenField.ClientID %>' );   
        
              var allcolumns = document.getElementById( '<%= ValueHiddenFieldAllColumns.ClientID %>' );   
        
               var RadGrid = $find("<%=RadGrid1.ClientID %>");   
        
               if (RadGrid == null)  
        
               {  
        
                 // alert("RadGrid1 IS NULL");  
        
                  return;  
        
               }  
        
               var gridId = RadGrid.get_id();            
        
               var columns = $find(gridId).get_masterTableView().get_columns();  
        
               var menu =  $find("<%=RadMenu1.ClientID %>");   
        
               if (menu == null)  
        
               {  
        
                //  alert("RadMenu1 IS NULL");  
        
                  return;  
        
               }  
        
               var parentCount = menu.get_items(0).get_count();  
        
               var childCount = menu._getAllItems().length;  
        
               var myHiddencolumns = hf.value.split("|");  
        
               var myAllcolumns = allcolumns.value.split("|");  
        
               var len = myAllcolumns.length;  
        
               for (var i = 0; i <  myHiddencolumns.length; i++)  
        
               {  
        
                     var sourceColumnName = new String(myHiddencolumns[i]);  
        
                     sourceColumnNamesourceColumnName = sourceColumnName.trimLeftAndRight();  
        
                      for (var j = 0; j < len; j++)  
        
                      {  
        
                          var targetColumnName = new String(myAllcolumns[j]);  
        
                          targetColumnNametargetColumnName = targetColumnName.trimLeftAndRight();  
        
                          if (sourceColumnName == '' && targetColumnName =='')  
        
                              continue;  
        
                          if (sourceColumnName == targetColumnName)  
        
                          {  
        
                             //alert("Update it");  
        
                             RadGrid.get_masterTableViewHeader().HeaderRow.cells[j].style.display="none";  
        
                             break;  
        
                          }  
        
                      }  
        
               }   
        
            }  
        
            function validate(cb)  
        
            {  
        
            //debugger  
        
               var allcolumns = document.getElementById( '<%= ValueHiddenFieldAllColumns.ClientID %>' );   
        
               var hidecol = document.getElementById( '<%= ValueHiddenField.ClientID %>' );   
        
               var RadGrid = $find("<%=RadGrid1.ClientID %>");   
        
               var gridId = RadGrid.get_id();            
        
               var columns = $find(gridId).get_masterTableView().get_columns();  
        
               var menu =  $find("<%=RadMenu1.ClientID %>");   
        
               var cbcbName = cb.id;  
        
               var slot = cbName.substring(9);  
        
               if (cb.checked == true)  
        
               {  
        
                  // alert ("You Checked: " + cbName + " for-> " + cb.nextSibling.nodeValue);  
        
                  RadGrid.MasterTableViewHeader.HeaderRow.cells[slot].style.display="";  
        
                  var removeThisColumn = new String (cb.nextSibling.nodeValue);  
        
                  removeThisColumnremoveThisColumn = removeThisColumn.trimLeftAndRight() + "|";  
        
                  var newColumnList = hidecol.value.replace(removeThisColumn, '');  
        
                  hidecol.value = newColumnList;  
        
                }      
        
                else  
        
                {  
        
                  // alert("You Unclicked: " + cbName + " for-> " + cb.nextSibling.nodeValue);  
        
                   RadGrid.MasterTableViewHeader.HeaderRow.cells[slot].style.display="none";  
        
                   var hideInternalColumnname = new String(cb.nextSibling.nodeValue);  
        
                   hideInternalColumnnamehideInternalColumnname = hideInternalColumnname.trimLeftAndRight() + "|";  
        
                   hidecolhidecol.value = hidecol.value + hideInternalColumnname;  
        
                }     
        
               //Hold all columns headers  
        
               if (allcolumns.value == '')  
        
               {  
        
                 for (var j=0; j < columns.length; j++)  
        
                 {  
        
                   var allInternalColumnNames = columns[j]._data.UniqueName + "|";   
        
                   allcolumnsallcolumns.value = allcolumns.value + allInternalColumnNames;      
        
                 }  
        
               }  
        
            }  
        
            </script> 
        
            <body > 
        
                <form runat="server" id="mainForm" method="post">  
        
                <asp:HiddenField id="ValueHiddenField" runat="server" /> 
        
                <asp:HiddenField id="ValueHiddenFieldAllColumns" runat="server" /> 
        
                    <telerik:RadScriptManager ID="RadScriptManager" runat="server">  
        
                    </telerik:RadScriptManager> 
        
                    <!-- content start --> 
        
                    <div> 
        
                        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                            <AjaxSettings> 
        
                                <telerik:AjaxSetting AjaxControlID="RadGrid1">  
        
                                    <UpdatedControls> 
        
                                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                                    </UpdatedControls> 
        
                                </telerik:AjaxSetting> 
        
                            </AjaxSettings> 
        
                        </telerik:RadAjaxManager> 
        
                        <telerik:RadMenu ID="RadMenu1"  Enabled="true" runat="server" Skin="Web20" Visible="true">     
        
                        <Items>                      
        
                             <telerik:RadMenuItem runat="server" ForeColor="White" Text="Columns" Visible="true">  
        
                             <Items> 
        
                                 <telerik:RadMenuItem runat="server" > 
        
                                <ItemTemplate>   
        
                                    <input id="Checkbox_0" type="checkbox"  checked="checked" onclick="validate(this);" />CompanyName  
        
                                </ItemTemplate> 
        
                                </telerik:RadMenuItem> 
        
                              </Items> 
        
                             <Items> 
        
                                 <telerik:RadMenuItem runat="server" > 
        
                                <ItemTemplate>   
        
                                     <input id="CheckBox_1" type="checkbox"  checked="checked" onclick="validate(this);" />ContactName  
        
                                </ItemTemplate> 
        
                                </telerik:RadMenuItem> 
        
                              </Items> 
        
                             <Items> 
        
                                 <telerik:RadMenuItem runat="server" > 
        
                                <ItemTemplate>   
        
                                     <input id="CheckBox_2" type="checkbox"  checked="checked" onclick="validate(this);" />ContactTitle  
        
                                </ItemTemplate> 
        
                                </telerik:RadMenuItem> 
        
                            </Items>                    
        
                             <Items> 
        
                                 <telerik:RadMenuItem runat="server" > 
        
                                <ItemTemplate>   
        
                                     <input id="CheckBox_3" type="checkbox"  checked="checked" onclick="validate(this);" />Address  
        
                                </ItemTemplate> 
        
                                </telerik:RadMenuItem> 
        
                            </Items>     
        
                             <Items> 
        
                                 <telerik:RadMenuItem runat="server" > 
        
                                <ItemTemplate>   
        
                                     <input id="CheckBox_4" type="checkbox"  checked="checked" onclick="validate(this);" />City  
        
                                </ItemTemplate> 
        
                                </telerik:RadMenuItem> 
        
                            </Items>     
        
                             <Items> 
        
                                 <telerik:RadMenuItem runat="server" > 
        
                                <ItemTemplate>   
        
                                     <input id="CheckBox_5" type="checkbox"  checked="checked" onclick="validate(this);" />Region  
        
                                </ItemTemplate> 
        
                                </telerik:RadMenuItem> 
        
                            </Items>      
        
                            <GroupSettings Width="200" />   
        
                              </telerik:RadMenuItem>   
        
                           </Items> 
        
                        </telerik:RadMenu> 
        
             <br /> 
        
             <br /> 
        
             <br /> 
        
             <br /> 
        
                        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" 
        
                            AllowSorting="True" AllowPaging="True" PageSize="50" Width="750px" OnColumnCreated="RadGrid1_ColumnCreated" > 
        
                            <ClientSettings> 
        
                            <ClientEvents   OnScroll="validateAll" OnGridCreated="validateAll"  /> 
        
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2">  
        
                                </Scrolling> 
        
                            </ClientSettings> 
        
                            <SortingSettings SortedBackColor="BurlyWood" /> 
        
                            <MasterTableView TableLayout="Auto"  /> 
        
                            <HeaderStyle Width="200px" /> 
        
                            <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                        </telerik:RadGrid> 
        
                    </div> 
        
                    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
        
                        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers" 
        
                        runat="server"></asp:SqlDataSource> 
        
                    <!-- content end --> 
        
                </form> 
        
            </body> 
        
            </html>

-------- Default.aspx.cs -------

    
            using System;  
        
            using System.Configuration;  
        
            using System.Data;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.HtmlControls;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Xml.Linq;  
        
            using Telerik.Web.UI;  
        
            public partial class _Default : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void RadGrid1_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e)  
        
                {  
        
                    switch (e.Column.UniqueName)  
        
                    {  
        
                        case "Bool":  
        
                            e.Column.HeaderText = "Manager";  
        
                            break;  
        
                        case "CustomerID":  
        
                            e.Column.Visible = false;  
        
                            break;  
        
                    }  
        
                }  
        
            }

answered on 15 Jan 2010, 12:41 PM

Hello Michael,

Due to differences in browser behavior, columns are hidden and shown client-side in a different way in different browsers.

Currently your custom Javascript does not work in any browser, because you are only hiding the header cell, not the whole column.

Even if you manage to hide the column by using the client API or some custom Javascript, it will be displayed again once you scroll right and then return left. As I said, such a behavior is not supported.

I can suggest you to hide columns server-side.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 15 Jan 2010, 08:03 PM

Thanks for the update. Also is there anyway to get a client or server-side event fired when the horizontal scroll bar is scrolled to the left?

I was able to hide/Show header and columns on the client-side and server-side. However, once I scroll to the right and back to the left than the first column after the frozen column disappears, as you indicated would happen. I realize you said this is not a supported feature but I could this be a bug in the scroll event. We have an legacy asp application that can freeze columns/hide columns and scroll right or left with no problem. Our goal was to use your controls to convert the leagacy asp applicaton to .NET.

answered on 18 Jan 2010, 11:18 AM

Hi Michael,

When using frozen columns, there is one <div> with a "fake" scrollbar, which does not actually scroll the RadGrid columns, but causes them to hide and show (otherwise it is not possible to keep frozen columns always visible). You can subscribe to the onscroll event of this <div> as demonstrated below.

Currently RadGrid does not distinguish between "regularly hidden columns" and "columns hidden temporarily during frozen scrolling", that's why we don't support frozen columns with columns hiding/showing at the same time.

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="600px"

OnNeedDataSource="RadGrid1_NeedDataSource">

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="1" />

<ClientEvents OnGridCreated="MyGridCreated" />

</ClientSettings>

</telerik:RadGrid>

<script type="text/javascript">

function MyGridCreated(sender, args)

{

var frozenWrapper = $get(sender.get_id() + "_Frozen");

if (frozenWrapper)

$addHandler(frozenWrapper, "scroll", gridscroll);

}

function gridscroll(e)

{

document.title = new Date();

}

</script>

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.