Show/hide grid columns with RadMenu as context menu

Thread is closed for posting
4 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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.
  • 9ECC85AA-A1D0-494F-B638-5D0615A2C8F5
    9ECC85AA-A1D0-494F-B638-5D0615A2C8F5 avatar
    13 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
  • C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    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
  • C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    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

    This Code Library is part of the product documentation and subject to the respective product license agreement.