Add/Rename RadTreeViewNode - check if exists (client side)

[orim]

Hi,
how can check if a node already exits on ADD/RENAME a node. Clients Side (Javascript)

onClientContextMenuItemClicking

Thanks

[Shinu]

Hi orim,

Please have a look into the following code I tried which works fine at my end.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientContextMenuItemClicking="OnClientContextMenuItemClicking">
    <ContextMenus>
        <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">
            <Items>
                <telerik:RadMenuItem Value="Add" Text="Add">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem IsSeparator="true">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Value="ReName" Text="ReName">
                </telerik:RadMenuItem>
            </Items>
            <CollapseAnimation Type="none"></CollapseAnimation>
        </telerik:RadTreeViewContextMenu>
    </ContextMenus>
    <Nodes>
        <telerik:RadTreeNode Value="_Private_PersonalFolders" ContextMenuID="MainContextMenu"
            AllowEdit="false" Text="Personal Folders">
            <Nodes>
                <telerik:RadTreeNode Value="_Private_PublicFolders" AllowEdit="false" Text="Public folders (2)"
                    Font-Bold="true">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Value="_Private_PersonalFolders" ContextMenuID="MainContextMenu"
            AllowEdit="false" Text="Private Folders" Expanded="true">
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

JavaScript:

<script type="text/javascript">
    var selectedoption = null;
    var selectednode = null;
    function OnClientContextMenuItemClicking(sender, args) {
        selectedoption = args.get_menuItem().get_text();
        selectednode = args.get_node();
        if (selectedoption == "Add") {
            radprompt('Enter Node Name', promptCallBackFn);
        }
        else if (selectedoption == "ReName") {
            radprompt('Enter New Node Name', promptCallBackFn);
        }
    }
    function promptCallBackFn(arg) {
        var radtreeview = $find('<%=RadTreeView1.ClientID %>');
        if (radtreeview.findNodeByText(arg) != null) {
            alert("Node With Same Name Already Exists");
        }
        else {
            if (selectedoption == "Add") {
                radtreeview.trackChanges();
                var newNode = new Telerik.Web.UI.RadTreeNode();
                newNode.set_text(arg);
                selectednode.get_nodes().add(newNode);
                selectednode.expand();
                radtreeview.commitChanges();
            }
            else {
                radtreeview.trackChanges();
                selectednode.set_text(arg);
                radtreeview.commitChanges();
            }
        }
    }
</script>

Thanks,
Shinu.

[orim]

Hi Shinu,
thank you very much. That`s it.
Other Question

...

else {
                    radtreeview.trackChanges();
                    selectednode.set_text(arg);
                    radtreeview.commitChanges();
'In this postion i want to postback to execute the RadTreeView1_NodeEdit(vb) methode in code behind.

can you point me to the right direction - thanks 

[Shinu]

Hi Orim,

Please have a look at the updated code I tried which works fine at my end.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientContextMenuItemClicking="OnClientContextMenuItemClicking"
    OnNodeEdit="RadTreeView1_NodeEdit">
    <ContextMenus>
        <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">
            <Items>
                <telerik:RadMenuItem Value="Add" Text="Add">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem IsSeparator="true">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Value="ReName" Text="ReName">
                </telerik:RadMenuItem>
            </Items>
            <CollapseAnimation Type="none"></CollapseAnimation>
        </telerik:RadTreeViewContextMenu>
    </ContextMenus>
    <Nodes>
        <telerik:RadTreeNode Value="_Private_PersonalFolders" ContextMenuID="MainContextMenu"
            AllowEdit="false" Text="Personal Folders">
            <Nodes>
                <telerik:RadTreeNode Value="_Private_PublicFolders" AllowEdit="false" Text="Public folders (2)"
                    Font-Bold="true">
                    <Nodes>
                        <telerik:RadTreeNode Text="Favorites">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="All Public Folders (2)">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Value="_Private_PersonalFolders" ContextMenuID="MainContextMenu"
            AllowEdit="false" Text="Private Folders" Expanded="true">
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

JavaScript:

<script type="text/javascript">
    var selectedoption = null;
    var selectednode = null;
    function OnClientContextMenuItemClicking(sender, args) {
        selectedoption = args.get_menuItem().get_text();
        selectednode = args.get_node();
        if (selectedoption == "Add") {
            radprompt('Enter Node Name', promptCallBackFn);
        }
        else if (selectedoption == "ReName") {
            nodeEdit();
        }
    }
    function promptCallBackFn(arg) {
        var radtreeview = $find('<%=RadTreeView1.ClientID %>');
        if (radtreeview.findNodeByText(arg) != null) {
            alert("Node With Same Name Already Exists");
        }
        else {
            radtreeview.trackChanges();
            var newNode = new Telerik.Web.UI.RadTreeNode();
            newNode.set_text(arg);
            selectednode.get_nodes().add(newNode);
            selectednode.expand();
            radtreeview.commitChanges();
        }
    }
    function nodeEdit() {
        selectednode.startEdit();
    }
</script>

C#:

protected void RadTreeView1_NodeEdit(object sender, Telerik.Web.UI.RadTreeNodeEditEventArgs e)
{
    RadTreeNode edited = e.Node;
    edited.Text = e.Text.ToString();
}

Thanks,
Shinu.

[Ehsan]

hi
i used this code, i can create a new node, but  (RadTreeView1_NodeEdit) not fired after clicking Add button.

(i need ability to save changes to my database).

this is my code:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
       <AjaxSettings>
           <telerik:AjaxSetting AjaxControlID="GridView_Inbox">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
           <telerik:AjaxSetting AjaxControlID="RadTreeView1">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="GridView_Inbox" LoadingPanelID="RadAjaxLoadingPanel1" />
                   <telerik:AjaxUpdatedControl ControlID="RadToolBar1" />
                   <telerik:AjaxUpdatedControl ControlID="RadTreeList1" />
                   <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
           <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="GridView_Inbox" LoadingPanelID="RadAjaxLoadingPanel1" />
                   <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManager>

<telerik:RadTreeView ID="RadTreeView1" runat="server" AllowNodeEditing="true" OnClientContextMenuItemClicking="OnClientContextMenuItemClicking"   OnNodeCreated="RadTreeView1_NodeCreated"   OnNodeEdit="RadTreeView1_NodeEdit" OnNodeClick="RadTreeView1_NodeClick">
      <ContextMenus>
          <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" runat="server">
              <Items>
                  <telerik:RadMenuItem Value="Add" Text="Add">
                  </telerik:RadMenuItem>
                  <telerik:RadMenuItem IsSeparator="true">
                  </telerik:RadMenuItem>
                  <telerik:RadMenuItem Value="ReName" Text="ReName">
                  </telerik:RadMenuItem>
              </Items>
              <CollapseAnimation Type="none"></CollapseAnimation>
          </telerik:RadTreeViewContextMenu>
      </ContextMenus>
      <Nodes>
          <telerik:RadTreeNode Text="b" ImageUrl="Images/mailbox.gif" Expanded="true"   Selected="True" Value="INBOX">
              <Nodes>
              </Nodes>
          </telerik:RadTreeNode>
          <telerik:RadTreeNode Text="a" ImageUrl="Images/mailbox.gif" Expanded="true"   Selected="false" Value="SENT">
              <Nodes>
              </Nodes>
          </telerik:RadTreeNode>
                </Nodes>
  </telerik:RadTreeView>

<script type="text/javascript">
    var selectedoption = null;
    var selectednode = null;
    function OnClientContextMenuItemClicking(sender, args) {
        selectedoption = args.get_menuItem().get_text();
        selectednode = args.get_node();
        if (selectedoption == "Add") {
            radprompt('نام پوشه را وارد کنید:', promptCallBackFn);
        }
        else if (selectedoption == "ReName") {
            nodeEdit();
        }
    }
    function promptCallBackFn(arg) {
        var radtreeview = $find('<%=RadTreeView1.ClientID %>');
    if (radtreeview.findNodeByText(arg) != null) {
        alert("Node With Same Name Already Exists");
    }
    else {
        radtreeview.trackChanges();
        var newNode = new Telerik.Web.UI.RadTreeNode();
        newNode.set_text(arg);
        selectednode.get_nodes().add(newNode);
        selectednode.expand();
        radtreeview.commitChanges();
    }
}
function nodeEdit() {
    selectednode.startEdit();
}
</script>

[Hristo Valyavicharski]

Hi Ehsan,

This code looks good. The RadTreeView1_NodeEdit should be fired immediately after you exit the edit mode. If this doesn't happen please look in the console if check for javascript errors.

Regards,
Hristo Valyavicharski
Telerik

 

 

[Ehsan]

hi again,
my problem is i dont know which event must be fired when i click on add (for creating new node!) ater clicking on (OK) button on add window dialog. in another world how i can tel server that a new node is created to save to db?

[Hristo Valyavicharski]

TreeView's OnNodeCreated event will be fired, but only if the node is created on the server. You add new node on the client, but the tree does not such client event. Do you really need such event? You can execute your logic immediately after the node is added:

...
else {
        radtreeview.trackChanges();
        var newNode = new Telerik.Web.UI.RadTreeNode();
        newNode.set_text(arg);
        selectednode.get_nodes().add(newNode);
        //nodes was created
        selectednode.expand();
        radtreeview.commitChanges();
    }
...

Regards,
Hristo Valyavicharski
Telerik