This is a migrated thread and some comments may be shown as answers.

RadGrid Context Menu Issue

5 Answers 286 Views

Grid

This is a migrated thread and some comments may be shown as answers.

James asked on 06 Nov 2011, 05:20 AM

Hi All,

I have a context menu targeting a RadGrid. I've successfully figured-out some pretty complex stuff with the menu and the grid, but I am stuck on what seems like a very simple issue. To make this easy to discuss, I've simplified my problem.

The bottom line is that I am having a difficulty capturing the "clicked item" in JS. The procedure I am using is almost exactly as described in here: http://www.telerik.com/help/aspnet-ajax/menu-onclientitemclicked.html

In short, my context menu is targeting my grid, no problem. Also, my on click event is firing as well. Here is a simplified version:

function OnContextMenu_Grid(sender, args) {

var myMenuItem = args.get_item().get_value();

alert(myMenuItem)

}

Here is my context menu config:

<telerik:RadContextMenu ID="FlowsContextMenu" Runat="server"

onclientitemclicked="OnContextMenu_Grid">

<Targets>

<telerik:ContextMenuControlTarget ControlID="RadGrid1" />

</Targets>

<Items>

<telerik:RadMenuItem runat="server" Text="EDIT This Item">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="True" Text="Line">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Add One">

<Items>

<telerik:RadMenuItem runat="server" Text="Normal Flow">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Alternate Flow">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Business Rule">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadContextMenu>

However, when the event fires "myMenuItem" is null. The alert window pops up, but still a null value. I figure this is probably something simple, but I cannot spot it. I would really appreciate some help.

The code for my entire page is attached below. Thank you so much for any help!

Jim

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="ContextTest.aspx.vb" Inherits=".ContextTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

function OnContextMenu_Grid(sender, args) {

var myMenuItem = args.get_item().get_value();

alert(myMenuItem)

}

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadContextMenu ID="FlowsContextMenu" Runat="server"

onclientitemclicked="OnContextMenu_Grid">

<Targets>

<telerik:ContextMenuControlTarget ControlID="RadGrid1" />

</Targets>

<Items>

<telerik:RadMenuItem runat="server" Text="EDIT This Item">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="True" Text="Line">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Add One">

<Items>

<telerik:RadMenuItem runat="server" Text="Normal Flow">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Alternate Flow">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Business Rule">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadContextMenu>

<br />

<div>

<br />

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" CellSpacing="0" DataSourceID="SqlDataSource1" GridLines="None">

<ClientSettings>

<Selecting AllowRowSelect="True" />

<ClientEvents />

</ClientSettings>

<MasterTableView DataSourceID="SqlDataSource1" ClientDataKeyNames="UseCaseID">

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="UseCaseID" DataType="System.Int32"

FilterControlAltText="Filter UseCaseID column" HeaderText="UseCaseID"

SortExpression="UseCaseID" UniqueName="UseCaseID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CaseName"

FilterControlAltText="Filter CaseName column" HeaderText="CaseName"

SortExpression="CaseName" UniqueName="CaseName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CrossCase"

FilterControlAltText="Filter CrossCase column" SortExpression="CrossCase"

UniqueName="CrossCase" HeaderText="CrossCase">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Tallys"

FilterControlAltText="Filter Tallys column" SortExpression="Tallys"

UniqueName="Tallys" HeaderText="Tallys">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<EditItemStyle BorderStyle="None" />

<HeaderStyle BorderStyle="None" />

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:DatabaseUseCase1 %>"

SelectCommand="SELECT UseCaseID, CaseName, CrossCase, Tallys FROM v_CaseTree WHERE (CaseParentID = 45) AND (AlternateFlowYN = 2) ORDER BY CaseSort">

</asp:SqlDataSource>

<br />

</div>

</form>

</body>

</html>

5 Answers, 1 is accepted

answered on 07 Nov 2011, 04:51 AM

Hello James,

You can set the Value property of RadMenuItem and then access the value. Here is the sample code.

ASPX:

<telerik:RadContextMenu ID="RadMenu1" runat="server" OnClientItemClicked="OnClientItemClicked"

EnableRoundedCorners="true" EnableShadows="true">

<Items>

<telerik:RadMenuItem Text="Add" Value="A" />

<telerik:RadMenuItem Text="Edit" Value="E"/>

<telerik:RadMenuItem Text="Delete" Value="D" />

</Items>

</telerik:RadContextMenu>

JS:

<script type="text/javascript">

function OnClientItemClicked(sender, args)

{

var txt = args.get_item().get_text(); //to get the text

var val = args.get_item().get_value(); // to get the value

alert(val);

}

</script>

Thanks,
Princy.