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:
"<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
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.