Dropdown grouping

[Kevin]

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

[Ivan Danchev]

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

[Kevin]

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!