Dropdown grouping

1 Answer 121 Views
DropDownList
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
Kevin asked on 16 Mar 2022, 08:55 PM

Hi,

I'm grouping a dropdown and I'm a little puzzled by the display.

My groups are either "Permanent" or "Temporary"

Temporary shows up quite neatly in corner, Permanent appears as an option that can't be selected and is confusing my users.  Can it show the same for both?


        @(Html.Kendo().DropDownList()
            .Name("addevent-type-dropdown")
            .OptionLabel("Select event type...")
            .DataTextField("EventTypeName")
            .DataValueField("EventTypeId")
            .DataSource(source => source
              .Custom()
              .Group(g => g.Add("ChangeType", typeof(string)))
              .Transport(transport => transport
                .Read(read =>
                {
                    read.Action("GetEventTypesDropDown", "Schedule");
                })))
            .HtmlAttributes(new
            {
                style = "width: 600px",
                data_toggle = "tooltip",
                title = "Select event type"
            })
            .Events(e => e.Change("eventTypeChange"))
        )

Thanks

1 Answer, 1 is accepted

Sort by
1
Accepted
Ivan Danchev
Telerik team
answered on 21 Mar 2022, 03:06 PM

Hi Kevin,

The behavior you notice is by design. You might have quite a lot of items in each group. That is why the group you are currently scrolling is displayed in a header above the list, so that at any moment you have an idea which group the items you are scrolling belong to, even if you don't see the group name in the corner, because the list of items is too long. With that said, there is a way to modify the DropDownList to show all the groups to the side.

@(Html.Kendo().DropDownList()
	.Name("addevent-type-dropdown")
	.OptionLabel("Select event type...")
	.DataTextField("EventTypeName")
	.DataValueField("EventTypeId")
	.DataSource(source => source
		.Custom()
		.Group(g => g.Add("ChangeType", typeof(string)))
		.Transport(transport => transport
		.Read(read =>
		{
			read.Action("GetEventTypesDropDown", "Schedule");
		})))
	.HtmlAttributes(new
	{
		style = "width: 600px",
		data_toggle = "tooltip",
		title = "Select event type"
	})
	.Events(e => e.Change("eventTypeChange").DataBound("onDataBound"))
)

<script>
	function onDataBound(e) {
		var dataItem = e.sender.dataItem(0);
		$("#addevent-type-dropdown_listbox li:first").append('<div class="k-list-item-group-label">' + dataItem.ChangeType + '</div>');
	}

	function eventTypeChange(e) {

	}
</script>

The snippet shows how to handle the dataBound event and append the group label.

To hide the header that shows the current group you can apply the following CSS rule:

<style>
	.k-animation-container .k-list .k-list-group-sticky-header {
		display: none !important;
	}
</style>

Note that the classes used in the js logic and the CSS rule are available since R1 2022, when the DropDownList got its new rendering. In versions older than 2022.1.119 the classes are different.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Kevin
Top achievements
Rank 2
Iron
Iron
Iron
commented on 22 Mar 2022, 02:19 PM | edited

Thanks Ivan!

That worked very nearly flawlessly.  The only change I needed to make was changing the dataItem(0) to dataItem(1) in dataBound() as the option label was being returned as item 0 

.OptionLabel("Select event type...")

This did not have a ChangeType as it didn't come from my data, so I was getting "undefined" as the group name.  Removing the option label made it display perfectly, but changing the dataItem(1) and leaving the label in worked as well.

    function onDataBound(e) {
        var dataItem = e.sender.dataItem(1);
        $("#addevent-type-dropdown_listbox li:first").append('<div class="k-list-item-group-label">' + dataItem.ChangeType + '</div>');
    }

Much appreciated!

Tags
DropDownList
Asked by
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Ivan Danchev
Telerik team
Share this question
or