This is a migrated thread and some comments may be shown as answers.

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

7 Answers 64 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
orim
Top achievements
Rank 1
orim asked on 05 Aug 2013, 03:59 PM
Hi,
how can check if a node already exits on ADD/RENAME a node. Clients Side (Javascript)
onClientContextMenuItemClicking

Thanks

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 06 Aug 2013, 12:31 PM
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.
0
orim
Top achievements
Rank 1
answered on 07 Aug 2013, 07:51 AM
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
0
Accepted
Shinu
Top achievements
Rank 1
answered on 08 Aug 2013, 01:02 PM
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.
0
Ehsan
Top achievements
Rank 1
answered on 11 Dec 2014, 09:55 AM
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>

0
Hristo Valyavicharski
Telerik team
answered on 16 Dec 2014, 09:04 AM
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.

 
0
Ehsan
Top achievements
Rank 1
answered on 20 Dec 2014, 01:21 PM
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?
0
Hristo Valyavicharski
Telerik team
answered on 25 Dec 2014, 08:16 AM
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.

 
Tags
TreeView
Asked by
orim
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
orim
Top achievements
Rank 1
Ehsan
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Share this question
or