Hi sir,
context menu not disappearing after select an option from the menu, also context menu is not working in firefox, the sample code is shown below, please help me
.aspx page
<%@ 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.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>Untitled Page</title>
<telerik:RadScriptBlock>
<script language="javascript" type="text/javascript">
function ClientContextMenuItemClicking(sender, eventArgs)
{
var node = eventArgs.get_node();
var item = eventArgs.get_menuItem();
if (item.get_text() == "Add Category")
{
document.getElementById("uxAddCategoryTextBox").value="";
document.getElementById("uxAddCategorypanel").style.display="";
document.getElementById("uxEditCategorypanel").style.display="none";
document.getElementById("uxDeleteCategorypanel").style.display="none";
}
else if (item.get_text() == "Edit Category")
{
document.getElementById("uxEditCategoryTextBox").value=node.get_text();
document.getElementById("uxAddCategorypanel").style.display="none";
document.getElementById("uxEditCategorypanel").style.display="";
document.getElementById("uxDeleteCategorypanel").style.display="none";
}
else if (item.get_text() == "Delete Category")
{
document.getElementById("uxAddCategorypanel").style.display="none";
document.getElementById("uxEditCategorypanel").style.display="none";
document.getElementById("uxDeleteCategorypanel").style.display="";
}
}
</script>
</telerik:RadScriptBlock>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<table width="820px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="padding-top:10px;">
<h3 class="ms-standardheader ms-WPTitle">
<asp:Label ID="uxCaption2" Text="Additional Custom Community Categories" runat="server"></asp:Label>
</h3>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top:10px;">
<asp:Label ID="uxPageDescription2" Text="Custom Categories to be added to your seller's booths in addition to the default collection" runat="server"
Font-Bold="False" Font-Names="Verdana" Font-Size="8pt" Height="15px"></asp:Label>
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<Telerik:RadTreeView ID="uxCustomCategories" BorderWidth="1px" ShowLineImages="false" runat="server"
Height="212px" Font-Bold="true" Font-Size="9" Font-Names="Verdana" OnClientContextMenuItemClicking="ClientContextMenuItemClicking">
<ContextMenus>
<Telerik:RadTreeViewContextMenu runat="server" ID="HelpDeskMenu" ClickToOpen="True"
Skin="Telerik">
<Items>
<Telerik:RadMenuItem Text="Add Category" Value="Add">
</Telerik:RadMenuItem>
<Telerik:RadMenuItem Text="Edit Category" Value="Edit">
</Telerik:RadMenuItem>
<Telerik:RadMenuItem Text="Delete Category" Value="Delete">
</Telerik:RadMenuItem>
</Items>
</Telerik:RadTreeViewContextMenu>
</ContextMenus>
<Nodes>
</Nodes>
</Telerik:RadTreeView>
</td>
<td style="padding-top:10px; padding-left:10px;" valign="top">
<asp:Panel ID="uxAddCategorypanel" runat="server" BorderWidth="1" Height="150px" Width="450px">
<table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
<tr>
<td style="padding-left:5px;" colspan="2">
<h3 class="ms-standardheader ms-WPTitle">
Add Category
</h3>
</td>
</tr>
<tr>
<td style="padding-left:5px; padding-top:10px; width:100px;">
Name
</td>
<td style="padding-top:10px;">
<asp:TextBox ID="uxAddCategoryTextBox" runat="server" Width="240px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:100px; padding-top:10px;">
</td>
<td style="padding-top:10px;">
<asp:Button Text="Submit" runat="server" ID="uxAddCategorySubmit"/>
<asp:Button Text="Cancel" runat="server" ID="uxAddCategoryCancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="uxEditCategoryPanel" runat="server" BorderWidth="1" Height="150px" Width="450px">
<table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
<tr>
<td style="padding-left:5px;" colspan="2">
<h3 class="ms-standardheader ms-WPTitle">
Edit Category
</h3>
</td>
</tr>
<tr>
<td style="padding-left:5px; padding-top:10px; width:100px;">
Name
</td>
<td style="padding-top:10px;">
<asp:TextBox ID="uxEditCategoryTextbox" runat="server" Width="240px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:100px; padding-top:10px;">
</td>
<td style="padding-top:10px;">
<asp:Button Text="Sumbit" runat="server" ID="uxEditCategorySubmit"/>
<asp:Button Text="Cancel" runat="server" ID="uxEditCategoryCancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="uxDeleteCategoryPanel" runat="server" BorderWidth="1" Height="150px" Width="450px" >
<table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
<tr>
<td style="padding-left:5px;" colspan="2">
<h3 class="ms-standardheader ms-WPTitle">
Delete Category
</h3>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px; padding-top:10px;">
Are you sure,you want to delete the category Buisness & Industrial ?
</td>
</tr>
<tr>
<td style="width:20px; padding-top:10px;">
</td>
<td style="padding-top:10px;">
<asp:Button Text="OK" ID="uxDeleteCategoryOK" runat="server" Width="50px"/>
<asp:Button Text="Cancel" ID="uxDeleteCateGoryCancel" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
CS code
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;
using Telerik.Web.UI;
public partial class _Default : System.Web.UI.Page
{
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
AddCategoryNodes();
}
protected void AddCategoryNodes()
{
DataTable dtCustomCategories = new DataTable();
dtCustomCategories.Columns.Add("CategoryName");
dtCustomCategories.Rows.Add("Category1");
dtCustomCategories.Rows.Add("Category2");
dtCustomCategories.Rows.Add("Category3");
dtCustomCategories.Rows.Add("Category4");
for (int i = 0; i < dtCustomCategories.Rows.Count; i++)
{
RadTreeNode categories = new RadTreeNode();
categories.Text = dtCustomCategories.Rows[i][0].ToString().Trim();
categories.Value = dtCustomCategories.Rows[i][0].ToString().Trim();
categories.ExpandMode = Telerik.Web.UI.TreeNodeExpandMode.ClientSide;
uxCustomCategories.Nodes.Add(categories);
}
}
}
context menu not disappearing after select an option from the menu, also context menu is not working in firefox, the sample code is shown below, please help me
.aspx page
<%@ 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.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>Untitled Page</title>
<telerik:RadScriptBlock>
<script language="javascript" type="text/javascript">
function ClientContextMenuItemClicking(sender, eventArgs)
{
var node = eventArgs.get_node();
var item = eventArgs.get_menuItem();
if (item.get_text() == "Add Category")
{
document.getElementById("uxAddCategoryTextBox").value="";
document.getElementById("uxAddCategorypanel").style.display="";
document.getElementById("uxEditCategorypanel").style.display="none";
document.getElementById("uxDeleteCategorypanel").style.display="none";
}
else if (item.get_text() == "Edit Category")
{
document.getElementById("uxEditCategoryTextBox").value=node.get_text();
document.getElementById("uxAddCategorypanel").style.display="none";
document.getElementById("uxEditCategorypanel").style.display="";
document.getElementById("uxDeleteCategorypanel").style.display="none";
}
else if (item.get_text() == "Delete Category")
{
document.getElementById("uxAddCategorypanel").style.display="none";
document.getElementById("uxEditCategorypanel").style.display="none";
document.getElementById("uxDeleteCategorypanel").style.display="";
}
}
</script>
</telerik:RadScriptBlock>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<table width="820px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="padding-top:10px;">
<h3 class="ms-standardheader ms-WPTitle">
<asp:Label ID="uxCaption2" Text="Additional Custom Community Categories" runat="server"></asp:Label>
</h3>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top:10px;">
<asp:Label ID="uxPageDescription2" Text="Custom Categories to be added to your seller's booths in addition to the default collection" runat="server"
Font-Bold="False" Font-Names="Verdana" Font-Size="8pt" Height="15px"></asp:Label>
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<Telerik:RadTreeView ID="uxCustomCategories" BorderWidth="1px" ShowLineImages="false" runat="server"
Height="212px" Font-Bold="true" Font-Size="9" Font-Names="Verdana" OnClientContextMenuItemClicking="ClientContextMenuItemClicking">
<ContextMenus>
<Telerik:RadTreeViewContextMenu runat="server" ID="HelpDeskMenu" ClickToOpen="True"
Skin="Telerik">
<Items>
<Telerik:RadMenuItem Text="Add Category" Value="Add">
</Telerik:RadMenuItem>
<Telerik:RadMenuItem Text="Edit Category" Value="Edit">
</Telerik:RadMenuItem>
<Telerik:RadMenuItem Text="Delete Category" Value="Delete">
</Telerik:RadMenuItem>
</Items>
</Telerik:RadTreeViewContextMenu>
</ContextMenus>
<Nodes>
</Nodes>
</Telerik:RadTreeView>
</td>
<td style="padding-top:10px; padding-left:10px;" valign="top">
<asp:Panel ID="uxAddCategorypanel" runat="server" BorderWidth="1" Height="150px" Width="450px">
<table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
<tr>
<td style="padding-left:5px;" colspan="2">
<h3 class="ms-standardheader ms-WPTitle">
Add Category
</h3>
</td>
</tr>
<tr>
<td style="padding-left:5px; padding-top:10px; width:100px;">
Name
</td>
<td style="padding-top:10px;">
<asp:TextBox ID="uxAddCategoryTextBox" runat="server" Width="240px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:100px; padding-top:10px;">
</td>
<td style="padding-top:10px;">
<asp:Button Text="Submit" runat="server" ID="uxAddCategorySubmit"/>
<asp:Button Text="Cancel" runat="server" ID="uxAddCategoryCancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="uxEditCategoryPanel" runat="server" BorderWidth="1" Height="150px" Width="450px">
<table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
<tr>
<td style="padding-left:5px;" colspan="2">
<h3 class="ms-standardheader ms-WPTitle">
Edit Category
</h3>
</td>
</tr>
<tr>
<td style="padding-left:5px; padding-top:10px; width:100px;">
Name
</td>
<td style="padding-top:10px;">
<asp:TextBox ID="uxEditCategoryTextbox" runat="server" Width="240px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:100px; padding-top:10px;">
</td>
<td style="padding-top:10px;">
<asp:Button Text="Sumbit" runat="server" ID="uxEditCategorySubmit"/>
<asp:Button Text="Cancel" runat="server" ID="uxEditCategoryCancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="uxDeleteCategoryPanel" runat="server" BorderWidth="1" Height="150px" Width="450px" >
<table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
<tr>
<td style="padding-left:5px;" colspan="2">
<h3 class="ms-standardheader ms-WPTitle">
Delete Category
</h3>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px; padding-top:10px;">
Are you sure,you want to delete the category Buisness & Industrial ?
</td>
</tr>
<tr>
<td style="width:20px; padding-top:10px;">
</td>
<td style="padding-top:10px;">
<asp:Button Text="OK" ID="uxDeleteCategoryOK" runat="server" Width="50px"/>
<asp:Button Text="Cancel" ID="uxDeleteCateGoryCancel" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
CS code
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;
using Telerik.Web.UI;
public partial class _Default : System.Web.UI.Page
{
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
AddCategoryNodes();
}
protected void AddCategoryNodes()
{
DataTable dtCustomCategories = new DataTable();
dtCustomCategories.Columns.Add("CategoryName");
dtCustomCategories.Rows.Add("Category1");
dtCustomCategories.Rows.Add("Category2");
dtCustomCategories.Rows.Add("Category3");
dtCustomCategories.Rows.Add("Category4");
for (int i = 0; i < dtCustomCategories.Rows.Count; i++)
{
RadTreeNode categories = new RadTreeNode();
categories.Text = dtCustomCategories.Rows[i][0].ToString().Trim();
categories.Value = dtCustomCategories.Rows[i][0].ToString().Trim();
categories.ExpandMode = Telerik.Web.UI.TreeNodeExpandMode.ClientSide;
uxCustomCategories.Nodes.Add(categories);
}
}
}