How to add an entry from client-side in RadDropdownTree

[SUNIL]

I could not find any api on the client-side to add an entry to the RadDropdownTree. Is this possible and if yes, then what would be some sample code? AutoPostBack property of RadDropdownTree  is false, so I need to use client-side code.

I did find a method on the client side, but not sure how to use it. The api I found on my own is as below, but not sure what parameter can I pass to it and whether it will end up updating the dropdown tree automatically.

dropDownTree.get_entries()._add

[SUNIL]

I found a way of adding an Entry to the RadDropdownTree using client-side code.  No need to to use the method dropDownTree.get_entries()._add

Note that the AutoPostBack property of RadDropdownTree  is false and so I have to use JavaScript to update the RadDropdownTree state.

First, we get the node that we want to select in the tree of the RadDropdownTree. In example code, this node is node0.

Then, we simply trigger the code dropDownTree._handleAddedEvent(node0)  for the selected node node0 and this will automatically add the Entry for the selected node to the RadDropdownTree and also update the state of RadDropdownTree .

 var dropDownTree = $find(pageBag.dropDownTreeId);
 var tree = $find(pageBag.dropDownTreeId).get_embeddedTree();
 if (tree.get_selectedNode()) {
     return;
 }
 var nodes = tree.get_nodes();
 if (nodes && nodes.get_count() >= 1) {
      var node0 = nodes.getNode(0);
       if (!node0.get_selected()) {
             node0.select();
             categoryId = parseInt(node0.get_value());
            //the line below will automatically add the Entry to the RadDropdownTree and also update its state
             dropDownTree._handleAddedEvent(node0);
             dropDownTree.closeDropDown();
         } 
}

[Vasko]

Hello Sunil,

You can add a node on the client-side by getting the parent node, and creating a new instance of the Telerik.Web.UI.RadTreeNode object:

<telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server"
    DefaultMessage="Select location" ExpandNodeOnSingleClick="true" >
</telerik:RadDropDownTree>

<telerik:RadButton runat="server" ID="RadButton1" Text="Add node" AutoPostBack="false" OnClientClicked="addNode" />

function addNode(sender, args) {
    var ddt = $find("<%= RadDropDownTree1.ClientID %>");
    var tree = ddt.get_embeddedTree();
    var parent = tree.get_nodes().getItem(0); // My parent Node
    var node = new Telerik.Web.UI.RadTreeNode();

    node.set_value(1);
    node.set_text('Item TEXT');
    parent.get_nodes().add(node);
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadDropDownTree1.DataFieldID = "ID";
        RadDropDownTree1.DataFieldParentID = "ParentID";
        RadDropDownTree1.DataValueField = "Value";
        RadDropDownTree1.DataTextField = "Text";
        RadDropDownTree1.DataSource = GetData();
        RadDropDownTree1.DataBind();
    }
}

public DataTable GetData()
{
    DataTable table = new DataTable();
    table.Columns.Add("ID");
    table.Columns.Add("ParentID");
    table.Columns.Add("Value");
    table.Columns.Add("Text");

    table.Rows.Add(new String[] { "1", null, "World_Continents", "World Continents" });
    table.Rows.Add(new String[] { "2", null, "World_Oceans", "World Oceans" });

    table.Rows.Add(new String[] { "3", "1", "Asia", "Asia" });
    table.Rows.Add(new String[] { "4", "1", "Africa", "Africa" });
    table.Rows.Add(new String[] { "5", "1", "Australia", "Australia" });
    table.Rows.Add(new String[] { "6", "1", "Europe", "Europe" });
    table.Rows.Add(new String[] { "7", "1", "North_America", "North America" });
    table.Rows.Add(new String[] { "8", "1", "South_America", "South America" });

    table.Rows.Add(new String[] { "9", "2", "Arctic_Ocean", "Arctic Ocean" });
    table.Rows.Add(new String[] { "10", "2", "Atlantic_Ocean", "Atlantic Ocean" });
    table.Rows.Add(new String[] { "11", "2", "Indian_Ocean", "Indian Ocean" });
    table.Rows.Add(new String[] { "12", "2", "Pacific_Ocean", "Pacific Ocean" });
    table.Rows.Add(new String[] { "13", "2", "South_Ocean", "SouthOcean" });

    return table;
}

Regards,
Vasko
Progress Telerik

[SUNIL]

Thanks for your answer. You have shown how to add a node on the client-side, but I am not looking for that.

What I am looking for is how to add an Entry to the RadDropdownTree, which is different from adding a node to the RadTree.

A RadTree has nodes, but the RadDropdownTree will have no Entries unless and untill a node is selected and clicked.