Show/hide grid columns with RadMenu as context menu

Thread is closed for posting
4 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 23 Mar 2007 Link to this post

    Requirements

    RadControls version

    RadGrid, RadMenu
    or
    Telerik.Web.UI 2007.3.12.18+

    .NET version

    NET 2.x

    Visual Studio version

    2005

    programming language

    Javascript

    browser support

    IE and Gecko-based browsers 


     
  2. PROJECT DESCRIPTION
    This demo project demonstrates how to show/hide grid columns client-side by means of context menu (shown when you right-click an arbitrary grid column header). The functionality is accomplished taking advantage of the Client-side APIs of RadGrid and RadMenu. Below is the relevant code section:

      

                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
     
                    <script type="text/javascript">  
                     var activeTable;  
                     var colIndex;  
                       
                     function ColumnContextMenu(sender, eventArgs)  
                     {  
                        activeTable = sender.get_masterTableView();  
                        colIndex = GetRealCellIndex(sender.get_masterTableView(), eventArgs.get_gridColumn().get_element());  
                          
                     }  
                     function GetRealCellIndex(tableView, cell)  
                     {  
                         for(var i = 0; i < tableView.get_columns().length; i++)  
                         {  
                             if(tableView.get_columns()[i].get_element()== cell)  
                             {  
                                 return i;  
                             }  
                         }  
                     }  
                     function ClientItemClicked(sender, eventArgs)  
                     {  
                        switch(eventArgs.get_item().get_text())  
                        {  
                            case "CustomerID":  
                               activeTable.showColumn(0);  
                              break;     
                            case "CompanyName":  
                              activeTable.showColumn(1);  
                              break;  
                            case "ContactName":  
                               activeTable.showColumn(2);  
                              break;     
                            case "ContactTitle":  
                              activeTable.showColumn(3);  
                              break;      
                            case "Address":  
                              activeTable.showColumn(4);  
                              break;  
                            case "PostalCode":  
                              activeTable.showColumn(5);  
                              break;    
                            case "Hide column":  
                              activeTable.hideColumn(colIndex);  
                              break;     
                            default:  
                             break;  
                        }    
                           
                     }  
                     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> 




           <script type="text/javascript">  
             var activeTable;  
             var colIndex;  
               
             function ColumnContextMenu(columnIndex, e)  
             {  
                activeTable = this;  
                colIndex = columnIndex;  
                  
                DisplayPopUpMenu(e);  
             }  
             function ClientItemClicked(sender, eventArgs)  
             {  
                switch(eventArgs.Item.Text)  
                {  
                    case "CustomerID":  
                       activeTable.ShowColumn(0);  
                      break;     
                    case "CompanyName":  
                      activeTable.ShowColumn(1);  
                      break;  
                    case "ContactName":  
                       activeTable.ShowColumn(2);  
                      break;     
                    case "ContactTitle":  
                      activeTable.ShowColumn(3);  
                      break;      
                    case "Address":  
                      activeTable.ShowColumn(4);  
                      break;  
                    case "PostalCode":  
                      activeTable.ShowColumn(5);  
                      break;    
                    case "Hide column":  
                      activeTable.HideColumn(colIndex);  
                      break;     
                    default:  
                     break;  
                }    
                   
             }  
             function DisplayPopUpMenu(e)  
             {  
                    var menu = <%= RadMenu1.ClientID %>;  
                    menu.Show(e);  
                      
                    e.cancelBubble = true;  
                    e.returnValue = false;  
     
                    if (e.stopPropagation)  
                    {  
                       e.stopPropagation();  
                       e.preventDefault();  
                    }  
             }  
             function RestoreColumns()   
             {  
                var grid = window["<%=RadGrid1.ClientID %>"];  
                  
                for(i = 0; i < grid.MasterTableView.Columns.length; i++)  
                {  
                  grid.MasterTableView.ShowColumn(i);  
                }  
             }  
          </script> 

    The RestoreColumns method is invoked when you click the [Show all columns] button below the grid. This is useful when you hide all columns at some point or when you want to display the full set of columns in the grid at some stage.
  • DCoop
    DCoop avatar
    7 posts
    Member since:
    Sep 2006

    Posted 20 Jun 2007 Link to this post

    Stephen,

    I would like to have a right mouse menu on a row level with available options. I was looking for a context menu similiar to RadTreeView for RadGrid1.  It appears that it is not available striaght out the box, but it can be done.  Can you provide a vb.net reference to your scripting below.

    Dan
  • Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 21 Jun 2007 Link to this post

    Hi DCoop,

    I believe that the following integration example will get you started in your implementation:

    http://www.telerik.com/demos/aspnet/Controls/Examples/Integration/GridAndMenu/DefaultVB.aspx?product=grid

    Review the code logic/description from the relevant sections for further details. You may also be interested in testing the sample project from the knowledge base article linked below:

    http://www.telerik.com/support/kb/article/b454K-kgt-b454T-cbb-b454c-cbb.aspx

    Regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  • Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 29 Oct 2008 Link to this post

    Hi guys,

    With the new version Q3 2008 of RadGrid for ASP.NET AJAX we introduced 'header context menu' feature which exposes client show/hide of grid columns as well as sorting/grouping capabilities:

    http://demos.telerik.com/aspnet-ajax/Grid/Examples/GeneralFeatures/HeaderContextMenu/DefaultCS.aspx

    Best,
    Stephen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Back to Top