Wrapping option text within MVC DropDownList

[Sean Bintley]

Hi,

The items in my drop down list are quite long - is there a way of wrapping the text in the options used within the dropdown list so that all the text can be displayed?

If so, is there also a way of indenting the "wrapped" lines (all except the first line)?

I was able to do this in chosen.js, but would I am using the telerik dropdown in this instance due to it's virtualisation capabilities.

Regards,

Sean

[Eduardo Serra]

Hello Sean,

To see an example of how the functionality you describe could be implemented, take a look at the following sample in our documentation.

Could you tell me a little bit more about your second requirement to indent the wrapped lines?

I hope this helps!

Regards,
Eduardo Serra
Progress Telerik

[Sean Bintley]

Thank you Eduardo.

I used the databound event to attach a class which I hoped would wrap the options. The problem I have is that there is an inline style of height:26px; - unticking this in DOM explorer gives the text more room but the wrapped text overlaps.

It is not enough to widen the field, as I can't widen the input any further, and this would cause problems with responsiveness - I prefer my applications to be adaptable to the screen they're being used on, and this system is due to be used on tablet screens by a significant amount of users. See the attachment for an example of what it is doing.

Here's my Razor C#:

01.@(
02.               Html.Kendo().DropDownList()
03.                   .Name("SORREF")
04.                   .DataTextField("SOWRef")
05.                   .DataValueField("SOWID")
06.                   .MinLength(1)
07.                   .HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })
08.                   .Template("#= SOWRef # | #= ShortDescription #")
09.                   .Height(350)
10.                   .AutoWidth(true)
11.                   .Filter(FilterType.Contains)
12.                   .Popup(popup =>
13.                   {
14.                       popup.AppendTo("#new-schedule-of-work-item-sorref-container");
15.                   })
16.                   .DataSource(source =>
17.                   {
18.                       source.Custom()
19.                           .ServerFiltering(true)
20.                           .ServerPaging(true)
21.                           .PageSize(80)
22.                           .Type("aspnetmvc-ajax")
23.                           .Transport(transport =>
24.                           {
25.                               transport.Read("GetVirtualisedScheduleItems", "ScheduleOfWork");
26.                           })
27.                           .Schema(schema =>
28.                           {
29.                               schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
30.                                   .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
31.
32.                               });
33.                   })
34.                   .Virtual(v => v.ItemHeight(26).ValueMapper("scheduleItemValueMapper"))
35.                   .Events(events =>
36.                   {
37.                       events.Select("scheduleItemOnSelect");
38.                       events.DataBound("sorRefDropDownDataBound");
39.                   })
40.               )

Any ideas?

I tried this without the ItemHeight on line 34, but the helper still applies an inline-styled height of 25px.

Here's my CSS:

1..wrap-options li {
2.    /* the two lines below indent wrapped text */
3.    padding-left: 1em; /* push all text over 1 em */
4.    text-indent: -0.5em; /* pull first line back 0.5 em */
5.    white-space: pre-line !important;
6.}

Thanks,

Sean

[Sean Bintley]

I think I see the source of the issue, and why the virtualisation needs a height - it uses the height to then calculate a "translateY" style attribute for each li element. So if none is supplied, it still needs it's own internal default in order to correctly calculate the elements position.

Why is translateY used here? Is this for animation? Will turning off animations disable it? Or is it a subsequence of using virtualisation? Is this how it creates elements for the "Loading..." options it displays when waiting for data from the server?

Turning off virtualisation isn't an option - there are 2000+ options in this menu, which is why I thought virtualisation would be perfect for this situation.

the AutoComplete element may be one alternative. But will it also bring with it the height/translateY issue?

Any ideas or thoughts you have would be gratefully received.

Thanks,

Sean

[Dimitar]

Hello Sean,

The DropDownList items are not intended to be multi-line by design. Therefore, customizing their appearance can be achieved by using a template. 

I am attaching a sample ASP.NET MVC solution, where a suggestion approach on how to handle the described scenario is demonstrated. To maintain the normal behavior of the widget, the Name of the item is shown as text, while its Description is shown as Tooltip:

.Template("<p title='#= ProductDescription #'>#= ProductName #</p>")

Checkout the solution above in order to verify if this approach will satisfy your requirements.You can tweak it further with additional CSS and modifying the tooltip position. This provides a flexible way of displaying all of the relevant data from the server, while also maintaining the built-in Virtualization of the widget to improve the performance for loading large data sets. 

Regarding the Virtualization technique - it utilizes a specific strategy for displaying the data in the widget. In the context of data, optimizing the performance is achieved by retrieving only a specific data page from the remote service instead of the whole data set. To further improve the performance, the DOM elements that are displaying the corresponding data chunk are being reused. The number of these DOM elements is determined by the height and itemHeight options. Once the number is calculated, the widget creates those elements and starts reusing them to display the current data source page. This is why, wrapping the items content in such scenario would require to take into consideration those implementation details and can cause undesired side effects.

Alternative way to approach this would be to split the Description into separate paragraphs (<p>) with JavaScript and display them via template. In this way, multi-line content in the items can be achieved, but this will also require you to modify the itemHeight option accordingly with a predefined value. If the description text is longer that the value, it will not be displayed correctly. 

Regards,
Dimitar
Progress Telerik