I'm trying to implement a context menu in a grid with Prometheus. I've done it in RadControls for ASP.NET without any problems.
When calling the radContextMenu1.Show() method I will get an error message saying that the method is not supported.
Any idea about what is wrong?
Thanks
/Mats
-----------------------------------------------------------------------
default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function ShowContextMenu()
{
var contextMenu = <%= RadContextMenu1.ClientID %>;
contextMenu.Show();
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
<ExportSettings>
<Pdf FontType="Subset" PaperSize="Letter" />
<Excel Format="Html" />
</ExportSettings>
<ClientSettings>
<ClientEvents OnRowContextMenu="ShowContextMenu" />
</ClientSettings>
<MasterTableView CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
Dir="LTR" Frame="Border" TableLayout="Auto">
<EditFormSettings>
<EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
</EditColumn>
</EditFormSettings>
<ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
Resizable="False" Visible="False">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
Visible="False">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
</MasterTableView>
</telerik:RadGrid>
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" Flow="Horizontal">
<DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" />
<CollapseAnimation Duration="200" Type="OutQuint" />
<ExpandAnimation Type="OutQuart" />
<Items>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Rad 1">
<GroupSettings ExpandDirection="Auto" Flow="Vertical" />
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Rad 2">
<GroupSettings ExpandDirection="Auto" Flow="Vertical" />
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>
</div>
</form>
</body>
</html>
-----------------------------------------------------------------------
default.aspx.cs:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public DataView Source()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Item", Type.GetType("System.String")));
DataRow dr;
dr = dt.NewRow();
dr[0] = "Use context menu on me...";
dt.Rows.Add(dr);
DataView dv = new DataView(dt);
return dv;
}
protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
RadGrid1.DataSource = Source();
}
}
8 Answers, 1 is accepted
Please find below a sample code how to achieve this:
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <div> |
| <script type="text/javascript"> |
| function RowContextMenu(sender, args) |
| { |
| args.get_tableView().selectItem($get(args.get_id())); |
| $find("<%= RadContextMenu1.ClientID %>").show(args.get_domEvent()); |
| $get("radGridClickedRowIndex").value = args.get_itemIndexHierarchical(); |
| } |
| </script> |
| <input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" /> |
| <p> |
| Right-click the grid to open context menu.</p> |
| <div style="margin-right: 20px;"> |
| <telerik:RadGrid ID="RadGrid1" runat="server" CssClass="RadGrid" Width="100%" GridLines="None" |
| BorderWidth="0" OnNeedDataSource="RadGrid1_NeedDataSource"> |
| <MasterTableView AllowCustomPaging="False" AllowSorting="False" PageSize="10" AllowPaging="False" |
| Width="100%"> |
| <RowIndicatorColumn Visible="False" UniqueName="RowIndicator"> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </RowIndicatorColumn> |
| <EditFormSettings> |
| <EditColumn UniqueName="EditCommandColumn"> |
| </EditColumn> |
| </EditFormSettings> |
| <ExpandCollapseColumn ButtonType="ImageButton" Visible="False" UniqueName="ExpandColumn"> |
| <HeaderStyle Width="19px"></HeaderStyle> |
| </ExpandCollapseColumn> |
| </MasterTableView> |
| <PagerStyle Mode="NumericPages" CssClass="GridPager" Height="20"></PagerStyle> |
| <HeaderStyle Height="41" CssClass="GridHeader" ForeColor="#242500"></HeaderStyle> |
| <ItemStyle Height="24" CssClass="GridRow"></ItemStyle> |
| <AlternatingItemStyle Height="24" CssClass="GridAltRow"></AlternatingItemStyle> |
| <SelectedItemStyle Height="24" CssClass="GridSelectedRow"></SelectedItemStyle> |
| <ClientSettings> |
| <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents> |
| </ClientSettings> |
| <GroupPanel Visible="False"> |
| </GroupPanel> |
| </telerik:RadGrid> |
| </div> |
| <telerik:RadContextMenu ID="RadContextMenu1" runat="server" Skin="Default" OnItemClick="RadContextMenu1_ItemClick"> |
| </telerik:RadContextMenu> |
Hope this helps.
Greetings,
Helen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Thanks
/Mats
Rank 1
I need this same solution to work for a dynamically loaded user control that contains the grid and the context menu. When using...
<ClientEvents OnRowContextMenu="RowSelected" />
... and having the javascipt method embedded on the .ascx, the application throws error "RowSelected is undefined." I read on another post to use RegisterClientScriptBlock in the user control code behind which does get works for getting the RowSelected method recognized; however, the .show method of the context menu is undefined. When I code the following using RegisterClientScriptBlock, I get the undefined error for .show()
$find("<%= GridContextMenu.ClientID %>").show(args.get_domEvent());
...so I then tried...
document.getElementById('"
+ GridContextMenu.ClientID + "');
...which didn't work either.
So, the back to the original question: How do I get a context menu to work for a rad grid that is on a dynamically loaded user control?
Thanks for any help!
John D
I just created a small page and a user control loaded by the page. Please, give it a try.
If you still face the problem, please modify the page/user control to demonstrate it and open a formal support ticket to send the reworked files to us.
Kind regards,
Erjan Gavalji
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
John D
Rank 1
You demo works fine; however, I failed to mentioned a very important system feature: On the default.aspx page, I'm dynamcially loading the user control from a link button on the page, using the RadAjaxManager. After clicking the link button, the user control does load on the page AJAX style, but here is where the RadGrids ClientEvents OnRowContextMenu="onRowContextMenu" can't seems to fail the error that the javascript method is undefined. Can you make your demo work this way? Thank you so much for the help!!!
<asp:LinkButton ID="lbSecurityManager" runat="server"
onclick="lbSecurityManager_Click">Security Manager</asp:LinkButton>
<br /><br />
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="lbSecurityManager">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="AjaxLoadingPanel2" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
All you need is declare the JavaScript function in a RadScriptBlock control.
The reworked demo is attached.
Best,
Erjan Gavalji
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1