Pending Review
Last Updated: 26 May 2017 20:12 by Lou
Dan Avni
Created on: 29 Mar 2017 07:33
Category: DropDownTree
Type: Feature Request
4
Show number of items checked when too many items checked
when there are a lot of items checked, the RadDropDownTree displays the names of the checked items and an ellipsis, Unlike the RadComboBox which displays "X items checked" or "All items checked" if the list of checked items is too long. Please add an option for behaving like the combobox UX "[N | All] Items checked". Users do not understand this is a different control and they think it's a combo but unlike the RadComboBox they are getting a different type of behavior when selecting multiple items
6 comments
Lou
Posted on: 26 May 2017 20:12
It would also be useful to be able to set some completely custom text here (not just something out of the box). So for example the text could read "3 countries selected" instead of "3 items checked". Basically the ability to set the text directly (via a setter) and override the control's default text would be very useful. 
ADMIN
Marin Bratanov
Posted on: 17 May 2017 13:24
Indeed, this can be extended in a similar way, Michael. There is no event for the check all option. A workaround could hardly be as good as the real feature.
Michael
Posted on: 17 May 2017 12:56
Hello Marin,

Thank you for the workaround! I tried it, and it works so far, but IMO it has 4 disadvantages:
1.	The custom message shows the checked items, instead of the selected entries (as they are listed by default), which is not always the same.
2.	The custom message is not displayed on the initial pageload when items are preselected, and it gets lost after a postback.
3.	The custom message is empty when the user deselects all items manually.
4.	The custom message does not appear when the user clicks on the Check All’ button.

Here’s my solution for 1. – 3. Put the following code into the <script> block:


function set_fakeInputText (sender, args) {
    var entries = sender.get_entries();
    if (entries.get_count() > 3) {
        var text = entries.get_count()) + “ entries selected”;
        $telerik.$(sender.get_element()).find(".rddtFakeInput").text(text);
    }
}

function OnClientLoad(sender, args) {
    set_fakeInputText(sender, args);

    var tree = sender.get_embeddedTree();
    tree.add_nodeChecked(function (tree, eventArgs) {
        set_fakeInputText(sender, eventArgs);
    });
}


I could not find a solution for 4., because there seems to be no OnClientCheckAllButton handler. Or did I miss something?

However, I agree with Dan that this feature should be built in.

ADMIN
Marin Bratanov
Posted on: 15 May 2017 14:33
I'd also like to see this implemented, yet in the meantime I hope the workaround above will help.
Dan Avni
Posted on: 15 May 2017 13:50
Thanks. will check it out. I do think though that built in support should be added just like in the combo control
ADMIN
Marin Bratanov
Posted on: 15 May 2017 13:28
Workaround that may suit some scenarios

<telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" Width="300px" CheckBoxes="SingleCheck"
						 DefaultMessage="Please select" DataFieldID="EmployeeID" DataFieldParentID="ReportsTo"
						 DataTextField="LastName" DataSourceID="SqlDataSource1" OnClientLoad="OnClientLoad">
	<DropDownSettings OpenDropDownOnLoad="true" />
</telerik:RadDropDownTree>
<script>
	function OnClientLoad(sender, args) {
		var tree = sender.get_embeddedTree();
		tree.add_nodeChecked(function(tree, eventArgs) {
			var checkedNodes = tree.get_checkedNodes();
			var text = "";
			if (checkedNodes.length > 3) {
				text = checkedNodes.length + " items selected";
			} else {
				for (var i = 0; i < checkedNodes.length; i++) {
					text += checkedNodes[i].get_text() + ", ";
				}
				text = text.replace(/,\s*$/, "");
			}
			$telerik.$(sender.get_element()).find(".rddtFakeInput").text(text);
		});
	}
</script>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
				   SelectCommand="SELECT * From Employees"></asp:SqlDataSource>