I have a context menu where I add new nodes. I used this example to create the context menu:
http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/contextmenu/defaultcs.aspx. My issue is that when a user add's a new node I need to capture what the user names the node, so that I can add it to the database. Currently the code uses javascript to set the node as editable on Page Load.
How do I go about capturing the text value the user inputs when adding a new node?
JAVASCRIPT
<script type="text/javascript">
//<!--
function onClientContextMenuShowing(sender, args) {
var treeNode = args.get_node();
treeNode.set_selected(true);
//enable/disable menu items
setMenuItemsState(args.get_menu().get_items(), treeNode);
}
function onClientContextMenuItemClicking(sender, args) {
var menuItem = args.get_menuItem();
var treeNode = args.get_node();
menuItem.get_menu().hide();
switch (menuItem.get_value()) {
case "Rename":
treeNode.startEdit();
break;
case "addLocation":
break;
}
}
//this method disables the appropriate context menu items
function setMenuItemsState(menuItems, treeNode) {
for (var i = 0; i < menuItems.get_count(); i++) {
var menuItem = menuItems.getItem(i);
switch (menuItem.get_value()) {
case "Rename":
formatMenuItem(menuItem, treeNode, 'Rename "{0}"');
break;
case "addLocation":
if (treeNode.get_parent() == treeNode.get_treeView()) {
menuItem.set_enabled(false);
}
else {
menuItem.set_enabled(true);
}
break;
}
}
//formats the Text of the menu item
function formatMenuItem(menuItem, treeNode, formatString) {
var nodeValue = treeNode.get_value();
if (nodeValue && nodeValue.indexOf("_Private_") == 0) {
menuItem.set_enabled(false);
}
else {
menuItem.set_enabled(true);
}
var newText = String.format(formatString, extractTitleWithoutMails(treeNode));
menuItem.set_text(newText);
}
//checks if the text contains (digit)
function hasNodeMails(treeNode) {
return treeNode.get_text().match(/\([\d]+\)/ig);
}
//removes the brackets with the numbers,e.g. Inbox (30)
function extractTitleWithoutMails(treeNode) {
return treeNode.get_text().replace(/\s*\([\d]+\)\s*/ig, "");
}
}
//-->
</script>
ASPX
C#
protected void LocationsTreeView_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e)
{
RadTreeNode clickedNode = e.Node;
switch (e.MenuItem.Value)
{
case "addLocation":
RadTreeNode newLocation = new RadTreeNode(string.Format("Add Location"));
newLocation.Selected = true;
newLocation.ImageUrl = clickedNode.ImageUrl;
clickedNode.Nodes.Add(newLocation);
clickedNode.Expanded = true;
//update the number in the brackets
if (Regex.IsMatch(clickedNode.Text, unreadPattern))
clickedNode.Text = Regex.Replace(clickedNode.Text, unreadPattern, "(" + clickedNode.Nodes.Count.ToString() + ")");
clickedNode.Font.Bold = true;
//set node's value so we can find it in startNodeInEditMode
newLocation.Value = newLocation.GetFullPath("/");
startNodeInEditMode(newLocation.Value);
// Add Location Record to Database
string ParentID = clickedNode.Value;
Guid ID = Guid.NewGuid();
string LocationID = ID.ToString();
string Name = newLocation.Text;
LocationsTreeView_AddLocation(ParentID, LocationID, Name);
break;
case "Delete":
clickedNode.Remove();
break;
}
}
private void startNodeInEditMode(string nodeValue)
{
//find the node by its Value and edit it when page loads
string js = "Sys.Application.add_load(editNode); function editNode(){ ";
js += "var tree = $find(\"" + LocationsTreeView.ClientID + "\");";
js += "var node = tree.findNodeByValue('" + nodeValue + "');";
js += "if (node) node.startEdit();";
js += "Sys.Application.remove_load(editNode);};";
RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "nodeEdit", js, true);
}
// Used when adding a Location
protected void LocationsTreeView_AddLocation(string ParentID, string LocationID, string Name)
{
// Set parameters for insert
locationDataSource.InsertParameters["LocationID"].DefaultValue = LocationID;
locationDataSource.InsertParameters["ParentID"].DefaultValue = ParentID;
locationDataSource.InsertParameters["Name"].DefaultValue = Name;
// locationDataSource.Insert();
}
// Used when renaming a Location
protected void LocationsTreeView_NodeEdit(object sender, RadTreeNodeEditEventArgs e)
{
// Update Name on client side
e.Node.Text = e.Text;
// Update Name in database
locationDataSource.UpdateParameters["Name"].DefaultValue = e.Text;
locationDataSource.UpdateParameters["ID"].DefaultValue = e.Node.Value;
locationDataSource.Update();
}