Incorporating Jquery Kendo Dropdownlist to showcase information in a list has been quite beneficial. My current objective is to introduce the mentioned styles (.k-list-container and .k-list-scroller) into the Dropdownlist via JavaScript.
Moreover, I aim to establish dynamic height for ".k-list-scroller", so that when selected, the dropdown list area extends beyond the screen or window height. To achieve this, I have manually set the height to be 500px !important.
.k-list-container{
width: auto !important;
height: auto !important;
}
.k-list-scroller{
height: 500px !important;
overflow-y: scroll !important;
}
The following code snippet serves as a reference -
<style>
.k-list
{
white-space: nowrap;
}
.k-list-container{
width: auto !important;
height: auto !important;
}
.k-list-scroller{
height: 500px !important;
overflow-y: scroll !important;
}
</style>
<div id="example">
<p>
data: <select id="local"></select>
</p>
</div>
<script>
$(function() {
var data = [
{ text: "Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey ", value: "13" },
{ text: "Black 1", value: "1" },
{ text: "Orange 2", value: "2" },
{ text: "Black 3", value: "3" },
{ text: "Orange 4", value: "4" },
{ text: "Black 5", value: "5" },
{ text: "Orange 6", value: "6" },
{ text: "Black 7", value: "7" },
{ text: "Orange 8", value: "8" },
{ text: "Black 9", value: "9" },
{ text: "Orange 10", value: "10" },
{ text: "Black 11", value: "11" },
{ text: "Orange 12", value: "12" }
];
$("#local").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
});
});
</script>
Appreciate your understanding.