Show/hide grid columns with RadMenu as context menu
Cancel
The title field is required!
Thread is closed for posting
4
posts,
0
answers
-
63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
1572
posts
Member since:
Oct 2004
Posted 23 Mar 2007
Link to this post
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.
-
-
9ECC85AA-A1D0-494F-B638-5D0615A2C8F5
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
9934
posts
Member since:
Nov 2016
-
-
C7498A83-7E2E-418C-8791-93EF573A7569
9934
posts
Member since:
Nov 2016
-