How to select a NULL value in a RadTreeView inside RadComboBox

[Nishant]

Hi,

I have a RadTreeView inside a RadComboBox. Once I select a Value from the TreeView, I want to be able to go back to select 'nothing' and see the 'Select a Value' option again without reloading the page.

Basically, this ComboBox is bound to a database field which also supports NULL values, so if the user does not select anything and submits the form, then i store a NULL value. But, if the user opens the form again with a previously selected value and wants to select NULL again, then it is not possible.

Please suggest a solution for this.

Nishant

[Dimitar Terziev]

Hi Nishant,

The desired functionality could be achieved using the MultipleSelect option of the RadTreeView. Once a node is selected it could be deselected by pressing the "Ctrl" key and then clicking on it. I have attached a sample page implementing this approch.

Greetings,
Dimitar Terziev
the Telerik team

[John]

I was looking for a solution for this too.

But the sample provided doesn't work so well. I may not want to allow the user to select multiple nodes, or if they do select multiple nodes there is no value displayed in the RadComboBox.

Is there any other solution for this other than adding an extermal control that clears selection?

Also, is the new RadDropDownTree due in the Q2 2013 release a replacement for RadTreeView in RadComboBox?

[Dimitar Terziev]

Hi John,

My suggestion is to try the new RadDropDownList control which is dedicated for such scenarios. Here is a link to its demos.

Regards,
Dimitar Terziev
Telerik

[Asutosh]

hi 
i am using RadDropDownTree 
now how can i make selected value clear from code behind 
like for radcombobox there is .clearselection method to clear combobox
is there any method for raddropdown tree?

[Shinu]

Hi Asutosh,

Please try the below JavaScript to clear the selection of RadDropDownTree.

JavaScript:

function clearSelection(sender, args) {
    var dropTree = $find("<%=rdroptreeDetails.ClientID%>");
    dropTree.get_entries().clear();
}

Thanks,
Shinu.

[Asutosh]

hi shinu 
thanks for reply
how to call this javascript from code behind?

[Shinu]

Hi Asutosh,

Please try the below code snippet to call the JavaScript from code behind.

C#:

string script = "function f(){clearSelection(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

Thanks,
Shinu.

[Asutosh]

hi shinu
thanks for reply
but in my case it is not working
is there any other way to clear selection of rad drop down tree?

[Shinu]

Hi Asutosh,

Please have a look into the sample code snippet which clears the selection of RadDropDownTree in Button Onclick event.

ASPX:

<telerik:RadDropDownTree ID="rdroptreeDetails" runat="server" DataFieldID="id" DataFieldParentID="parentid" DataTextField="text" DataSourceID="sqldsDetails">
</telerik:RadDropDownTree>
<telerik:RadButton ID="rbtnClearSelection" runat="server" Text="Clear" OnClick="rbtnClearSelection_Click1">
</telerik:RadButton>

C#:

protected void rbtnClearSelection_Click1(object sender, EventArgs e)
{
    string script = "function f(){clearSelection(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
}

JavaScript:

function clearSelection() {
    var dropTree = $find("<%=rdroptreeDetails.ClientID%>");
    dropTree.get_entries().clear();
}

Let me know if you have any concern.
Thanks,
Shinu.

[Asutosh]

thanks shinu
its working

[Asutosh]

hi shinu 
thanks for your reply
now problem is that i want raddropdown collapse after button click event
but it remain open 
i have attached 2 image for that

[Shinu]

Hi Asutosh,

Please try the below JavaScript code snippet to collapse the Node.

JavaScript:

function clearSelection() {
    var dropTree = $find("<%=rdroptreeDetails.ClientID%>");
    var index;
    dropTree.get_entries().clear();
    for (index = 0; index < dropTree.get_embeddedTree().get_nodes().get_count(); index++) {
        if (dropTree.get_embeddedTree().get_nodes().getNode(index).get_expanded()) {
            dropTree.get_embeddedTree().get_nodes().getNode(index).set_expanded(false);
        }
    }
}

Thanks,
Shinu.

[Asutosh]

thanks for your reply
its working

[Asutosh]

hi shinu 
i am using raddropdown tree
in that i have manager employee relation
my database is like
id managerid  empid  departmentname

in that i have many employees in 2 department so it give me error that only unique values are accepted 
how to solve that

[Shinu]

Hi Asutosh,

The Column specified by the DataFieldId property must contain unique values. I guess in your case you have set the EmployeeId as the DataFieldId and it will be repeating for different row which is causing the problem.

Thanks,
Shinu.

[Asutosh]

hi
i have attached screen shot
my data come like that
in that i have set menu name as DataFieldParentID and chart name as DataFieldID
but it give me error that value must be unique because chart8 is in menu2 and in menu 3 also

[Shinu]

Hi Asutosh,

As I already mentioned the column specified by the DataFieldID property must contain unique values. From your table structure I have noticed you are setting ChartName as the DataFieldID and the value  "chart8" is repeating for two MenuName, "menu2" and "menu3".  This is causing the problem. One suggestion is that you have to rearrange the table structure in such a way that DataFieldID as the PrimaryKey of the table.

Thanks,
Shinu.

[Asutosh]

what we are trying to achieve is we have used radtreeview control for menu of our chart and on click of particular item we want to show description and chart type in left square box i have marked in image with pen. and chart types will repeat for many of the charts like bar chart , pie chart etcc.... show any other way we can show description of clicked item before actually clicking submit button to load chart ? 

[Shinu]

Hi Asutosh,

You can use RadTreeView to achieve your scenario. For that you have to make  slight modification in your DataBase design. Try to add a new ID field and set it as primary key of the table and also set it as the DataFieldID of the RadTreeView and MenuName as DataFieldParentID and ChartName as DataTextField. Please have a look into the DataBase Structure.

Id : Integer Type, Primary Key of table
MenuName : Integer Type
ChartName : Varchar

Please have a look into the sample code snippet which shows the TreeView Structure.
ASPX:

<telerik:RadTreeView ID="rtreeviewChartDetails" runat="server" DataSourceID="sqldsChartDetails"
    DataFieldID="Id" DataFieldParentID="MenuName" DataTextField="ChartName">
</telerik:RadTreeView>

Let me know if you have any concern.
Thanks,
Shinu.

[Asutosh]

Thanks Shinu for your quick response. but we need search funttionality for chart names. is it possible with RadTreeView ? how do we achieve that as we will be having 100 charts and we must provide search functionality to our clients 

[Shinu]

Hi Asutosh,

In order to achieve your scenario using RadTreeView you have to add a textbox and button for the search funcation as follows. The below code select the searched chart Name onClientClicked event of RadButton.

ASPX:

<telerik:RadTextBox ID="rtxtSearchChart" runat="server">
</telerik:RadTextBox>
<telerik:RadButton ID="rbtnSearchChart" runat="server" Text="Search" AutoPostBack="false"
    OnClientClicked="searchChartByName">
</telerik:RadButton>
<telerik:RadTreeView ID="rtreeviewChartDetails" runat="server" DataSourceID="sqldsChartDetails"
    DataFieldID="Id" DataFieldParentID="MenuName" DataTextField="ChartName">
</telerik:RadTreeView>

JavaScript:

function searchChartByName(sender, args) {
    var searchText = $find("<%=rtxtSearchChart.ClientID%>").get_value();
    var chartTree = $find("<%=rtreeviewChartDetails.ClientID%>");
    var nodes = chartTree.get_allNodes();
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].get_text() == searchText) {
            nodes[i].set_selected(true);
            expandAllAncestors(nodes[i]);
            return;
        }
    }
}
function expandAllAncestors(node) {
    if (node.get_expanded() !== true)
        node.expand();
    if (node.get_level() != 0) {
        expandAllAncestors(node.get_parent());
    }
}

Thanks,
Shinu.