Combobox dropdown width

5 posts, 1 answers
  1. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 20 Sep 2013 Link to this post

    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
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 24 Sep 2013 Link to this post

    Hello Jason,

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

    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 24 Sep 2013 Link to this post

    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>
  5. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 24 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 24 Sep 2013 Link to this post

    Georgi, thank you for your help with this!  Much appreciated!
Back to Top
Kendo UI is VS 2017 Ready