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
ASPX
C#
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
<
telerik:RadAjaxLoadingPanel
ID
=
"LocationsLoadingPanel"
runat
=
"server"
Transparency
=
"30"
Skin
=
"Vista"
></
telerik:RadAjaxLoadingPanel
>
<
telerik:RadAjaxPanel
ID
=
"LocationsPanel"
runat
=
"server"
LoadingPanelID
=
"LocationsLoadingPanel"
>
<
telerik:RadTreeView
ID
=
"LocationsTreeView"
runat
=
"server"
EnableDragAndDrop
=
"true"
MultipleSelect
=
"true"
EnableDragAndDropBetweenNodes
=
"true"
AllowNodeEditing
=
"true"
OnContextMenuItemClick
=
"LocationsTreeView_ContextMenuItemClick"
OnClientContextMenuItemClicking
=
"onClientContextMenuItemClicking"
OnClientContextMenuShowing
=
"onClientContextMenuShowing"
OnNodeEdit
=
"LocationsTreeView_NodeEdit"
>
<
ContextMenus
>
<
telerik:RadTreeViewContextMenu
ID
=
"MainContextMenu"
runat
=
"server"
>
<
Items
>
<
telerik:RadMenuItem
Value
=
"Rename"
Text
=
"Rename ..."
Enabled
=
"true"
ImageUrl
=
"images/icons/edit_48.png"
PostBack
=
"false"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
IsSeparator
=
"true"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Value
=
"addLocation"
Text
=
"Add Location"
ImageUrl
=
"images/icons/add_16.png"
>
</
telerik:RadMenuItem
>
</
Items
>
<
CollapseAnimation
Type
=
"none"
/>
</
telerik:RadTreeViewContextMenu
>
</
ContextMenus
>
</
telerik:RadTreeView
>
</
telerik:RadAjaxPanel
>
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();
}