Hi,

I checked your  AutoComplete and MultiColumnComboBox examples.But any example , you did not send a parameter to Controller using by UI Jquery AutoComplete and MultiColumnCombobox.How to send a parameter to Controller for server filtering? When I try to implement your example codes, The parameter i send to controller returns null.

I am trying to implement kendo autocomplete and I am new to Kendo.  When the user enters a character query is taken and a list is made using the database and returned to the view. Everything works fine except when the first character is typed search box loses its focus and I need to click on the search box again to type more characters. For some reason also other buttons gets doubled pic below

Here is my code

 $("#query").keyup(e => {
        e.preventDefault();
        if (e.keyCode === 13) {
            $("#btnSearch").click();
        }

        let ds = new DataServices(`${bc.apiBaseUrl}TrendStations/SearchAutoComplete`);
        let xhr = ds.GetData({ query: $("#query").val() });
        $('#query').attr('autocomplete', 'CUSTOM');
        xhr.done((results) => {
            if (results != null) {
                var data = results;
                $("#query").kendoAutoComplete({
                    dataSource: data,
                    filter: "startswith",
                    placeholder: "Enter your search here...",
                    separator: ", "
                });

            } else {
                window.location.reload();
            }


        }).fail(ex => {
            new ErrorHandler().HandleError(ex);
        });
    });
 
I have looked for an answer but no luck! anybody knows what is going on?

We're still getting used to using Telerik's Kendo UI for jQuery. So far, we've only used one component, AutoComplete. Which works great, BTW!

There's something we'd like to do, but don't know how to do. On an ASP.NET MVC Core page (.NET 6) we want to be able to allow the user to enter multiple items of the same type. It seems like either the Grid or ListView Kendo components would work. Personally, I'm favoring the ListView. But we also need to use AutoComplete work when the user is entering values to a new row. So, for example, we need to collect LotNumber and ProgramName, multiple times, because there can be and often is, multiple items to be entered, along with other details on the same page. I've looked at the ListView component, the Add method, etc. In the example given, it references an identified (by using the HTML id property) control on the page. So, how does one apply AutoComplete to both LotNumber and ProgramName, when entering a new LotNumber/ProgramName pair in a ListView?

Auto complete for Document type works as expected when i add new file (Tool bar add file).
How do I achieve the same auto complete and validation if user clicks edit/Update? I am using ScaffoldColumn to make the Doc type editable when user clicks Edit in Kendo Grid??

 @(Html.Kendo().Grid<FileDataModel>()
                  .Name("grid")
                  .Columns(columns =>
                  {
                  columns.Bound(c => c.FileName);
                  columns.Bound(c => c.Title);
                  columns.Bound(c => c.SelectedDocType);
                  columns.Template(@<text></text>).Title("<b>Download</b>")
                          .ClientTemplate("<a href='" + Url.Action("Download", "Home", new { @id = "#=Id#" }) + "'>Download</a>")
                          .HtmlAttributes(new { style = "text-align: left;" });
                      columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                      }).Title("<b>Action</b>");
                  }).Events(e => e.DataBound("onDataBound"))
                  .Scrollable(a=>a.Height("auto"))
                  .Selectable()
                  .Groupable()
                  .Sortable()
                  .Editable(config => config.Mode(GridEditMode.PopUp))
                  .Pageable(pageable => pageable
                      .Refresh(true)
                      .PageSizes(true)
                      .ButtonCount(5))
                  .ToolBar(toolBar => toolBar.Template("<a class='k-button  k-button-icontext' onclick='addFilePopup()' href='#' id='addNewFile'></span>Add new file</a>"))
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .Batch(false)
                      .PageSize(20)
                  .Model(model =>
                  {
                      model.Id(p => p.Id);
                      model.Field(p => p.Id).Editable(false);
                      model.Field(p => p.CreatedDate).Editable(false);
                      model.Field(p => p.DateSigned).Editable(false);
                      model.Field(p => p.DateSubmitted).Editable(false);
                      model.Field(p => p.DjjNumber).Editable(false);
                      model.Field(p => p.ScanDate).Editable(false);
                      model.Field(p => p.ScanUser).Editable(false);
                  })
                  .Read(read => read.Action("GetFiles", "Home", new { djjNumber = Model.DjjNumber }))
                  .Update(update => update.Action("EditingInline_Update", "Home"))
                  .Destroy(destroy => destroy.Action("EditingInline_Destroy", "Home"))
          ))

</div>


Kendo Autocomplete and Validation function.
$("#txtDocType").kendoAutoComplete({
            dataSource: new kendo.data.DataSource({
                type: "json", // specifies data protocol
                pageSize: 3,//This is to set search limit
                serverFiltering: true,
                transport: {
                    read: '@Url.Action("GetDocumentTypes", "Home")',
                    parameterMap:function(){
                        return {filterKey:$("#txtDocType").data("kendoAutoComplete").value()};
                    }
                },
            }),
            dataTextField:"Type",
            filter: "contains",
            minLength: 3,//This is to set minimum character length for autocomplete
        });
    });

    function ValidateDocumentType(){
        var isValidDocType=true;
        $.ajax({
            data:{documentType:$("#txtDocType").val()},
            url:'@Url.Action("GetDocumentType", "Home")',
            async: false,
            success:function(data) {
                if(data==false)
                    isValidDocType=false;
                complete=true;
            },
        });
        return isValidDocType;
    }

1. In Internet Explorer the color of the placeholder text was equal to the color of the text typed in the input field, all other browsers showed the placeholder in light grey.
2. When clicking in the field the placeholder would not disappear in browsers like Firefox for example, but simply changed color to the normal input color. It only disappeared as soon as you started typing. IE, however, removed the placeholder text as soon as the input field is clicked in and shows the user a empty input field, which was my desired behaviour.

To fix these issues i came up with some event handlers that can be easily attached to your autocomplete setup script plus two lines browser specific of CSS code.

JS Autocomplete setup code:

$("input.autoComplete")
        .kendoAutoComplete({...})
        .focusin(function () {         
            //If IE the placeholder will be hidden, but typed text
            // would be in the placeholders colour, so change it here to your normal
            // input color
            if ($.browser.msie === true) {
                $(this).css('color', 'black');
            }
        }).focusout(function () {
            //If IE and the value is empty, the placeholder will be shown;
            // make sure it has the right colour
            if ($.browser.msie === true && $(this).val() === '') {
                $(this).css('color', '#6d6d6d');
            }       
        }).ready(function () {
            var el = $("input.autoComplete");
            var value = $(el).val();
 
            if (value !== $(el).data('kendoAutoComplete').options.placeholder) {
                //every browser except IE return empty value if input is empty    
                // but placeholder is shown
                if (value !== '') {
                    $(el).css('color', 'black');
                }
            }  else {
                //if IE change color for your place holder;
                if ($.browser.msie === true) {
                    $(el).css('color', '#6d6d6d');
                }
            }
        });

CSS Code:
/*This will make the placeholder invisible in Gecko/WebKit browsers on focus*/
input:focus::-webkit-input-placeholder { color: transparent !important; }
input:focus:-moz-placeholder {color: transparent !important; }


I hope the code helps others, with the same cross browser issues.