So I have a combobox that I have given a width of 100px. The dropdown on the combobox however I would like to be about 300px wide. It appears that the width of the dropdown is limited by the width of the actual combobox.
I've tried using templates to make the dropdown wider, but then it just puts a horizontal scrollbar in.
The reason I want this is that for the dropdown we are displaying both a Code and the Description of the code such as "02343 - Some Descrition Here", but then when they select an option just the code goes into the combobox... That being said we have everything working except for the width of the dropdown portion of the combobox.
Thanks
I've tried using templates to make the dropdown wider, but then it just puts a horizontal scrollbar in.
The reason I want this is that for the dropdown we are displaying both a Code and the Description of the code such as "02343 - Some Descrition Here", but then when they select an option just the code goes into the combobox... That being said we have everything working except for the width of the dropdown portion of the combobox.
Thanks
4 Answers, 1 is accepted
0
Hello Jason,
Georgi Krustev
Telerik
You can control the width of the list element like this. Let me know if does not help.
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jason
Top achievements
Rank 1
answered on 24 Sep 2013, 03:11 PM
I couldn't get that example to work. We are using the HTML helpers and I just put script tag with the javascript you recommended (as shown below). That didn't exactly work... So how do you do the List width with the html helpers?
@(Html.Kendo().ComboBox()
.Name("MCRevenueCodeId0")
.HtmlAttributes(new { @class = "span6 add_mc_revenueCodeId", placeholder = "Enter Rev Code or Description" })
.DataTextField("RevenueCodeName")
.DataValueField("RevenueCodeId")
.Filter("contains")
.AutoBind(false)
.MinLength(2)
.DataSource(ds =>
{
ds.Read(r =>
{
r.Action("RevenueCodeData", "Workdriver");
}).ServerFiltering(true);
})
.Template("${data.RevenueCodeDisplayName}")
)
<script type="text/javascript">
var combobox = $('#MCRevenueCodeId0').data('kendoComboBox');
combobox.list.width(600);
</script>
@(Html.Kendo().ComboBox()
.Name("MCRevenueCodeId0")
.HtmlAttributes(new { @class = "span6 add_mc_revenueCodeId", placeholder = "Enter Rev Code or Description" })
.DataTextField("RevenueCodeName")
.DataValueField("RevenueCodeId")
.Filter("contains")
.AutoBind(false)
.MinLength(2)
.DataSource(ds =>
{
ds.Read(r =>
{
r.Action("RevenueCodeData", "Workdriver");
}).ServerFiltering(true);
})
.Template("${data.RevenueCodeDisplayName}")
)
<script type="text/javascript">
var combobox = $('#MCRevenueCodeId0').data('kendoComboBox');
combobox.list.width(600);
</script>
0
Accepted
Hello Jason,
Regards,
Georgi Krustev
Telerik
I will suggest you put the code in a DOM ready event handler. Thus you will be sure that the ComboBox is already initialized:
@(Html.Kendo().ComboBox()
.Name("MCRevenueCodeId0")
.HtmlAttributes(new { @class = "span6 add_mc_revenueCodeId", placeholder = "Enter Rev Code or Description" })
.DataTextField("RevenueCodeName")
.DataValueField("RevenueCodeId")
.Filter("contains")
.AutoBind(false)
.MinLength(2)
.DataSource(ds =>
{
ds.Read(r =>
{
r.Action("RevenueCodeData", "Workdriver");
}).ServerFiltering(true);
})
.Template("${data.RevenueCodeDisplayName}")
)
<
script
type
=
"text/javascript"
>
$(function() {
var combobox = $('#MCRevenueCodeId0').data('kendoComboBox');
combobox.list.width(600);
});
</
script
>
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jason
Top achievements
Rank 1
answered on 24 Sep 2013, 04:10 PM
Georgi, thank you for your help with this! Much appreciated!