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

RadTreeView in RadCombobox with Checkbox and TriState

3 Answers 213 Views

ComboBox

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

Kaushal asked on 20 Jan 2012, 07:21 AM

Hi All,

Here I am sharing my one of script which may help to other.

What script doing:

1. RadTreeView is in RadComboBox with CheckBoxes="true" and TriStateCheckBoxes="true".
2. Need to get all selected (Checked) nodes of radtreeview in comma separated string in radcombobox.
3. If radtreeview is not expanded still it will get all that child nodes in comma separated string.

HTML:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Width="500px" ShowToggleImage="True"

Style="vertical-align: middle;" OnClientDropDownOpened="OnClientDropDownOpenedHandler"

AfterClientCheck="AfterCheckHandler" EmptyMessage="Choose a destination" ExpandAnimation-Type="None"

CollapseAnimation-Type="None">

<ItemTemplate>

<div id="div1">

<telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeChecked="nodeChecked" OnClientNodeClicked="nodeClicked"

CheckBoxes="true" Width="100%" Height="140px" TriStateCheckBoxes="true">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Africa" Expanded="true">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Egypt">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Cairo">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="South Africa">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Cape Town">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Kenya">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Nairobi" Value="1999">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Australia">

<Nodes>

<telerik:RadTreeNode runat="server" Text="South East Australia">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Sydney">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Melbourne">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Asia" Expanded="true">

<Nodes>

<telerik:RadTreeNode runat="server" Text="China">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Bejing">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="India">

<Nodes>

<telerik:RadTreeNode runat="server" Text="New Delhi">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Bombay">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Indonesia">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Jakarta">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Europa" Expanded="true">

<Nodes>

<telerik:RadTreeNode runat="server" Text="England">

<Nodes>

<telerik:RadTreeNode runat="server" Text="London">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Liverpool">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Manchester">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="France">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Paris">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Cannes">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Nice">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Germany">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Bonn">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Berlin">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Frankfurt">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

</div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem Text="" />

</Items>

</telerik:RadComboBox>

JavaScript:

<script type="text/javascript">

function StopPropagation(e) {

if (!e) {

e = window.event;

}

e.cancelBubble = true;

}

function OnClientDropDownOpenedHandler(sender, eventArgs) {

var tree = sender.get_items().getItem(0).findControl("RadTreeView1");

var selectedNode = tree.get_selectedNode();

if (selectedNode) {

selectedNode.scrollIntoView();

}

function nodeClicked(sender, args) {

var node = args.get_node();

if (node.get_checked()) {

node.uncheck();

} else {

node.check();

}

nodeChecked(sender, args)

}

function nodeChecked(sender, args) {

var comboBox = $find("<%= RadComboBox1.ClientID %>");

//check if 'Select All' node has been checked/unchecked

var tempNode = args.get_node();

if (tempNode.get_text().toString() == "(Select All)") {

// check or uncheck all the nodes

} else {

var nodes = new Array();

nodes = sender.get_checkedNodes();

var vals = "";

var i = 0;

for (i = 0; i < nodes.length; i++) {

var n = nodes[i];

var nodeText = n.get_text().toString();

if (nodeText != "(Select All)") {

vals = vals + n.get_text().toString() + ",";

}

//prevent combo from closing

supressDropDownClosing = true;

comboBox.set_text(vals);

}

</script>

This all code credit goes to:
http://blog.ropardo.ro/2011/07/15/multiple-selection-treeview-in-combobox/

Enjoy Telerik,

Thanks,

Kaushal Jani

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadTreeView in RadCombobox with Checkbox and TriState

3 Answers, 1 is accepted