I have an autocomplete that users may type in long queries into - the problem is that when they type in long queries the ends of the suggestions are cut of with an ellipsis

We want to keep it a single line, but we want the ellipsis to be on the left of the suggestion so the user can see the end of the autocomplete suggestion instead

See attached

Does anyone know of an easy way to do this? I've tried applying text-align:right and various right based attributes to the autocomplete structure but so far it hasn't worked...

Hello. I am using a custom column editor as shown in your example : https://docs.telerik.com/kendo-ui/knowledge-base/custom-editor-autocomplete. Even in the example that you provided, if I type a value that is not in the list, on focus out the field will display "undefined" and will remain this way even if i try to select another value. Is there a fix for this situation? Thank you in advance :)

I attached a screenshot from your working example.

I have a Autocomplete kendo control. I am selecting some values by doing a filtering after selecting 5 items as shown in the attached image. I am able to retrieve value after individual selection. But I want to get dataValueField for the all the selected items of Autocomplete control in change event. Please find the below code. Kindly suggest in this

$("#Products").kendoAutoComplete({
                        dataSource: result,
                        dataTextField: "TagName",
                        dataValueField:"TagID",
                        filter: "startswith",
                        placeholder: "Select Product...",
                        separator: ", ",
                        select: function (e) {
                            if (e.dataItem) {
                                var dataItem = e.dataItem;
                                alert(dataItem.TagID);//Returns dataValueField value for individual selected item
                                alert(dataItem.TagName);//Returns dataTextField value for individual selected item
                            }
                            if (e.item)
                            {
                                //var dataItem = e.dataItem;
                                var item = e.item;
                                var text = item.text();  //Returns dataTextField value for individual selected item                              
                            }
                        },
                        change: function (e) {
                            alert($("#Products").data("kendoAutoComplete").value());//Returns dataTextField value for multiple selected items
                            var s=$("#Products").data("kendoAutoComplete").value(); //Returns dataTextField value for multiple selected items
                           //Need to get dataValueField for multiple selected items
                        }
                    });

I have an auto complete field that pulls in my vendors.  Related to my vendors are pay terms.  On the UI the pay terms is a drop down list.  When I select vendor from the auto complete, how do I get the pay terms to be selected on the drop down list?  Thanks in advance.  

<div class="form-group row mt-4">
            @Html.LabelFor(model => model.VendorName, new { @class = "col-sm-3 col-form-label" })
            <div class="col-sm-9">
                @Html.TextBoxFor(model => model.VendorName, new { @class = "form-control", maxlength = "50", type = "text", @id = "txtVendorName" })
                @Html.ValidationMessageFor(model => model.VendorName, "", new { @class = "text-danger" })

                <script id="noDataTemplate" type="text/x-kendo-tmpl">
                    <div>
                        No data found. Do you want to add new vendor - '#: instance.element.val() #' ?
                    </div>
                    <br />
                    <button class="k-button" onclick="addNewVendor('#: instance.element[0].id #', '#: instance.element.val() #')">Add new vendor</button>
                </script>
            </div>
        </div>

 <div class="form-group row mt-4">
            @Html.LabelFor(model => model.InvoiceTermID, new { @class = "col-sm-3 col-form-label" })
            <div class="col-sm-9">
                @(Html.Kendo().DropDownListFor(x => x.InvoiceTermID)
                               .OptionLabel("Select Terms")
                               .DataTextField("Text")
                               .DataValueField("Value")
                               .HtmlAttributes(new { style = "width: 100%" , @required = "required", @validationMessage = "The Terms field is required.", id="ddlTermID" })
                               .DataSource(source =>
                               {
                                   source.Read(read =>
                                   {
                                       read.Action("GetInvoiceTermsSelectList", "Dropdown");
                                   });
                               })
                               .Value(Convert.ToString(Model.InvoiceTermID))
                           )
                @Html.ValidationMessageFor(model => model.InvoiceTermID, "", new { @class = "text-danger" })
            </div>
        </div>

   $(document).ready(function () {
        $("#Date").attr("readonly", true);

        $("#txtVendorName").kendoAutoComplete({
            dataSource: {
                type: "json",
                severFiltering: true,
                serverPaging: true,
                transport: {
                    read: '@Url.Action("GetVendors", "PurchaseOrder")',
                    parameterMap: function (data, type) {
                        return { filter: $('#txtVendorName').val() };
                    }
                }
            },
            clearButton: true,
            filter: "contains",
            dataTextField: "Name",
            minLength: 3,
            placeholder: "Search Vendor Name ...",
            noDataTemplate: $("#noDataTemplate").html(),
            select: onSelectVendor,
            change: function (e) {
                var vendorId = $("#hdnVendorID").val();
                if (vendorId == "" || vendorId == 0) {
                    $("#hdnVendorID").val("");
                    $("#txtVendorName").val("");
                }
            },
            filtering: function (e) {
                $("#hdnVendorID").val("");
            }
        });

    function onSelectVendor(e) {
        var dataItem = this.dataItem(e.item.index());        
        if (dataItem && dataItem.VendorID > 0) {
            $("#hdnVendorID").val(dataItem.VendorID);              
            //$("#ddlTermID").val(1);
        }
    }

In my Autocomplete I need to show grouped items, but groups have to be sorted non-alphabetically.

As the Autocomplete doesn't have such option, I tried using the serverGrouping option, but I guess I'm doing something wrong.

In fact the list of groups and items is correctly displayed (see attached picture #1), but typing any character in the input shows the NO DATA FOUND message (see attached picture #2 - typing "c" should show "Coffee" and "Cake"). Additionally items sorting doesn't seem to work.

This is the Autocomplete and its DataSource initialization code:

This is the json data returned by the server call:

Why the Autocomplete doesn't seem to work? Am I missing something in the Autocomplete settings, or DataSource settings, or JSON being sent by the server?

And why the sorting of items doesn't work?

The name of the topic is from the docs. But this recipe doesn't work for  Kendo 2015 Q2 

Open the link bellow 

http://docs.telerik.com/kendo-ui/web/dropdownlist/how-to/prevent-close-on-scroll

And press 'Edit this example'.

In dojo You will see the 'bug'. If You choose library  Q2 or Q2 SP1, You can't scroll list at all.

Work perfectly for Q1 branch.

Video. http://screencast.com/t/3z0uEDleCP​

Need to prevent closing dropdown popup, when user scrolls the page. 

Movie to explain the issue. https://drive.google.com/a/productiveedge.com/file/d/0Bzruk8_x7z70TnFaNVdxYXpiSzg/edit

 In fact, dropdown should be closed only by user click on opened autocomplete again.

Result should be like the dropdowns on this page. http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Thanks in advance.

This is my func userNameAutoCompleteEditor

    "" " I want to Catch autosearc value go connroller and come back with user name contains value just give me way to take value PLEASE!!!!""

This is my grid column area