Combobox dropdown width

[Jason]

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

[Georgi Krustev]

Hello Jason,

 
You can control the width of the list element like this. Let me know if does not help.

Regards,
Georgi Krustev
Telerik

[Jason]

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>

[Georgi Krustev]

Hello Jason,

 
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>

Regards,
Georgi Krustev
Telerik

[Jason]

Georgi, thank you for your help with this!  Much appreciated!