Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > General and Integration Projects > Show/hide grid columns with RadMenu as context menu

Show/hide grid columns with RadMenu as context menu

Feed from this thread
  • Telerik Admin Master avatar

    Posted on Mar 23, 2007 (permalink)

    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 

     
  • 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 avatar

    Posted on Jun 20, 2007 (permalink)

    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 Sebastian admin's avatar

    Posted on Jun 21, 2007 (permalink)

    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 Sebastian admin's avatar

    Posted on Oct 29, 2008 (permalink)

    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

    Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > General and Integration Projects > Show/hide grid columns with RadMenu as context menu