Autocomplete width

[Alexius]

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>

[Alexander Valchev]

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

[Alexius]

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?

[Alexander Valchev]

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

[SysDev]

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...

[Alexander Valchev]

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:

• http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/autocomplete/overview#accessing-an-existing-autocomplete
• http://docs.telerik.com/kendo-ui/getting-started/web/autocomplete/overview#customizing-the-width-of-the-drop-down-list
  

Regards,
Alexander Valchev
Telerik

 

 

[Michael]

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>

[Alexander Valchev]

Hello Michael,

You can find example in the AutoComplete overview topic.

Regards,
Alexander Valchev
Telerik

 

 

[Roger]

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

[Alexander Valchev]

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