Autocomplete width

10 posts, 0 answers
  1. Alexius
    Alexius avatar
    13 posts
    Member since:
    Nov 2012

    Posted 03 Jan 2013 Link to this post

    Hi all,

    I have an input field what uses autocomplete, but the text I am displaying wraps in lines, so I want to make the dropdown list quite wider. tryied some solutions over the net but didn't find something, can someone help?

    <form id="searchflightfrm">
    search: <input type="text" id="fromair" name="fromair"  />
    </form>
     
    <script type="text/javascript">
             $(document).ready(function() {
                        $("#fromair").kendoAutoComplete({
                            minLength: 3,
                            dataTextField: "name",
                            filter: 'contains',
                            dataSource: {
                                type: "json",
                                serverFiltering: true,
                                serverPaging: false,
                                pageSize: 20,
                                transport: {
                                    read: "json/data.jsp"
                                },
                            }
                        });
     </script>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 04 Jan 2013 Link to this post

    Hello Alexius,

    To achieve that you could use the following code:
    var autoComplete = $("#autoComplete").data("kendoAutoComplete");
    autoComplete.list.width(400); //adjust width of the drop-down list

    I hope this will help.

    Kind regards,
    Alexander Valchev
    the Telerik team
    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. Alexius
    Alexius avatar
    13 posts
    Member since:
    Nov 2012

    Posted 04 Jan 2013 Link to this post

    Thanks! That really did the trick ;)

    Can you pinpoint me where in the documentation I can find this so next time I know where to look?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 04 Jan 2013 Link to this post

    Hello Alexius,

    This is not a configuration setting which is why it is not documented. The approach uses jQuery width method and is demonstrated in the ComboBox "Customizing templates" demo. I have to admit that it is not very noticeably so we will consider adding a code snippet example in the overview topics.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. SysDev
    SysDev avatar
    2 posts
    Member since:
    Jan 2012

    Posted 15 Mar 2014 Link to this post

    I am having the same problem, but I am using the MVC wrappers. I have set the with of the autocomplete to 350px using the 
    .HtmlAttributes but this sets the with of the autocomplete wrapper but not the dropdown list. for some reason this only goes to 280px...

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 17 Mar 2014 Link to this post

    Hi SysDev,

    You should access the existing autoComplete widget after it is initialized and changed the width of its popup via JavaScript as described in my previous reply.
    Please check the following help resources:

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Michael
    Michael avatar
    6 posts
    Member since:
    Oct 2015

    Posted 20 Jan Link to this post

    Alexander Valchev, might I trouble you for your input on how to adjust the width of my autocomplete in the code listed below?

     

    @model EmployeeDirectory.Web.Mvc.Models.EmployeeEditViewModel
     
    <div class="control-label form-group">
        @Html.LabelFor(model => model.Employee.Title, htmlAttributes: new { @class = "control-label col-xs-4" })
        <div class="col-xs-8 control">
            @if (Model.Permissions.CanEditEmployeeStatus)
            {
                @Html.TextBoxFor(model => model.Employee.Title.Name, htmlAttributes: new { @class = "col-xs-8 form-control", id = "titleAutoComplete" })
                @Html.ValidationMessageFor(model => model.Employee.Title, "", new { @class = "text-danger" })
            }
            else
            {
                @Html.TextBoxFor(model => model.Employee.Title.Name, htmlAttributes: new { @disabled = "disabled", @class = "col-xs-8 form-control" })
            }
        </div>
    </div>
     
    <script>
     
        $(document).ready(function() {
     
            // create ComboBox from input HTML element
            $("#titleAutoComplete").kendoAutoComplete({
                dataTextField: "Name",
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            url: "/EmployeeDirectory/GetTitles"
                        }
                    }
                },
                filter: "contains",
                suggest: true,
                index: 2,
                change: onTitleChange
            });
     
            function onTitleChange() {
                var newValue = $("#titleAutoComplete").val();
     
     
                $.ajax({
                    url: "/EmployeeDirectory/UpdateTitle/" + @Model.Employee.Id,
                    dataType: 'json',
                    contentType: "application/json",
                    data: "title=" + newValue,
                    complete: function(response) {
                        $("#titleAutoComplete").data("kendoAutoComplete").dataSource.read();
                    }
                });
     
                return true;
            }
     
        });
    </script>

  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 22 Jan Link to this post

    Hello Michael,

    You can find example in the AutoComplete overview topic.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Roger
    Roger avatar
    21 posts
    Member since:
    Nov 2008

    Posted 16 May in reply to Alexander Valchev Link to this post

    Hi Alexander:

    I also am having problems widening the autocomplete dropdown.  3 years ago, you said " I have to admit that it is not very noticeably so we will consider adding a code snippet".  I have not been able to find one.  Could you let me know where I might find it or perhaps provide me with an example of how to do this using the mvc wrapper.

    Thanks,

    Roger

  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 May Link to this post

    Hi Roger,

    At first you should obtain a reference to the widget using this approach. Then use this approach to modify the width of the list.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready