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

8 posts, 1 answers
  1. orim
    orim avatar
    29 posts
    Member since:
    Mar 2012

    Posted 05 Aug 2013 Link to this post

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

    Thanks
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. orim
    orim avatar
    29 posts
    Member since:
    Mar 2012

    Posted 07 Aug 2013 Link to this post

    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
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Aug 2013 Link to this post

    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.
  6. Ehsan
    Ehsan avatar
    10 posts
    Member since:
    Nov 2014

    Posted 11 Dec 2014 in reply to Shinu Link to this post

    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>

  7. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 16 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Ehsan
    Ehsan avatar
    10 posts
    Member since:
    Nov 2014

    Posted 20 Dec 2014 in reply to Hristo Valyavicharski Link to this post

    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?
  9. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 25 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017