Telerik Forums
Kendo UI for jQuery Forum
1 answer
23 views
I've got a grid that uses a Kendo Wizard in the grid edit popup window.  The first step in the wizard has 3 AutoComplete controls (among other controls).  The first 2 AutoCompletes do not save the value selected back to the model and grid, but the 3rd one does and they're all configured exactly the same.  The code was working before we upgraded to 2024.3.806.  Are there breaking changes for the wizard or AutoComplete in this release?  A demo for this kind of scenario would be helpful because I inherited this code, and I'm not even sure if it was done correctly.  Here is a sample of the js that defines the grid and the wizard (in the grid edit method):

    $gridDiv.kendoGrid({
        autoBind: true,
        columns: [
            {
                field: "DealNumber",
                title: "Deal Number",
                filterable: {
                    extra: false,
                    operators: {
                        string: { contains: "contains" }
                    }
                },
                sortable: true,
                template: 'dealUrl',
                editable: () => false
            },
            {
                field: "CustomerName",
                title: Customer Name",
                filterable: {
                    extra: false,
                    operators: {
                        string: { contains: "contains" }
                    }
                },
                sortable: true
            },
            {
                field: "SalesPersonName",
                title: "Sales Person",
                filterable: {
                    extra: false,
                    operators: {
                        string: { contains: "contains" }
                    }
                },
                sortable: true
            },
            {
                field: "CreatedDate",
                type: "date",
                title: "Created Date",
                sortable: true,
                filterable: true,
                format: "{0: M/d/yyyy}",
                width: 100,
                editable: function () { return false; }
            }
        ],
        editable: {
            mode: "popup",
            window: {
                title: "Add/Edit",
                width: "500px"
            }
        },
        edit: function (e) {
            const popupWindow = e.container.data("kendoWindow");
            popupWindow.center();

            let model = e.model;

            $(e.container).kendoWizard({
                pager: true,
                done: function (e) {
                    e.preventDefault();

                    $gridDiv.dataSource.sync();

                    $($(".k-popup-edit-form")[0]).data("kendoWindow").close();
                },
                reset: function (e) {
                    e.preventDefault();

                    $gridDiv.cancelChanges();

                    $($(".k-popup-edit-form")[0]).data("kendoWindow").close();
                },
                steps: [
                    {
                        title: "Sale Info",
                        buttons: [{
                            name: "next",
                            primary: true,
                        },
                        {
                            name: "reset",
                            text: "Cancel"
                        }],
                        form: {
                            id: "page1",
                            orientation: "vertical",
                            formData: model,
                            items: [

                                {
                                    field: "CustomerName",
                                    title: "Customer Name",
                                    editor: "AutoComplete",
                                    editorOptions: {
                                        dataSource: {
                                            serverFiltering: true,
                                            transport: {
                                                read: {
                                                    url: "/Customer/Search",
                                                    dataType: "json",
                                                    type: "POST"
                                                },
                                                parameterMap: (options, operation) => {
                                                    return {
                                                        text: (options.filter.filters[0] !== void 0) ?
                                                            options.filter.filters[0].value :
                                                            null
                                                    };
                                                }
                                            }
                                        },
                                        dataTextField: "FullName",
                                        minLength: 3,
                                        highlightFirst: true,
                                        suggest: true,
                                        valuePrimitive: true,
                                        select: (e) => {
                                            model.set("CustomerId", e.dataItem.Id);
                                        },
                                        enforceMinLength: true,
                                        filter: 'contains'
                                    }

                                },
                                {
                                    field: "CustomerId",
                                    title: "Customer Id",
                                },
                                {
                                    field: "SalesPersonName",
                                    title: "Sales Person",
                                    editor: "AutoComplete",
                                    editorOptions: {
                                        dataSource: {
                                            serverFiltering: true,
                                            transport: {
                                                read: {
                                                    url: "/SalesPerson/Search",
                                                    dataType: "json",
                                                    type: "POST"
                                                },
                                                parameterMap: (options, operation) => {
                                                    return {
                                                        text: (options.filter.filters[0] !== void 0) ?
                                                            options.filter.filters[0].value :
                                                            null
                                                    };
                                                }
                                            }
                                        },
                                        dataTextField: "FullName",
                                        template: '#: data.FullName #',
                                        minLength: 3,
                                        highlightFirst: true,
                                        suggest: true,
                                        valuePrimitive: true,
                                        select: (e) => {
                                            model.set("SalesPersonId", e.dataItem.Id);
                                        },
                                        enforceMinLength: true,
                                        filter: 'contains'
                                    }

                                },
                                {
                                    field: "Manager",
                                    title: "Manager",
                                    editor: "AutoComplete",
                                    editorOptions: {
                                        dataSource: {
                                            serverFiltering: true,
                                            transport: {
                                                read: {
                                                    url: "/Manager/Search",
                                                    dataType: "json",
                                                    type: "POST"
                                                },
                                                parameterMap: (options, operation) => {
                                                    return {
                                                        text: (options.filter.filters[0] !== void 0) ?
                                                            options.filter.filters[0].value :
                                                            null
                                                    };
                                                }
                                            }
                                        },
                                        dataTextField: "FullName",
                                        template: '#: data.FullName #',
                                        minLength: 3,
                                        highlightFirst: true,
                                        suggest: true,
                                        valuePrimitive: true,
                                        select: (e) => {
                                            model.set("ManagerId", e.dataItem.Id);
                                        },
                                        enforceMinLength: true,
                                        filter: 'contains'
                                    }

                                }

                            ]
                        }
                    },
                    {
                       //step 2 code here//
                    },

                ]
            })
        },
        sortable: true,
        resizable: true,
        pageable: {
            pageSizes: false,
            messages: {
                empty: ""
            }
        },
        filterable: true,
        persistSelection: true,
        noRecords: true,
        messages: {
            noRecords: "No records found"
        },
        dataSource: gridDataSource(),
    }).data("kendoGrid");
},
Paul
Top achievements
Rank 1
Iron
 answered on 13 May 2025
1 answer
40 views

Hello!

Is there a simple way to remove autocomplete from gridfilter?
I want to use filterbox. I need filterbox. But I don't want autocomplete.

https://dojo.telerik.com/hYMEJZcB

Thank you

Neli
Telerik team
 answered on 09 Apr 2025
1 answer
29 views
Hello,

I'm trying to retrieve data from the kendoAutoComplete component, but I'm encountering an issue when the input is hidden.

The happy path works perfectly when the input is visible. For example:

<input id="test">

var data = ["One", "Two"];
$("#test1").kendoAutoComplete({
  dataSource: data
});

$("#test1").data('kendoAutoComplete').dataSource.data() // return  ["One", "Two"]

However, the problem arises when the input is not visible (e.g., using style="display: none;"). I use the same code, but when I call the data() method, it does not return the original data. Instead, it returns undefined until I make the input visible again and reload the data source. Only then does it start working correctly.

Example:

<input id="test" style="display: none;>

var data = ["One", "Two"];
$("#test1").kendoAutoComplete({
  dataSource: data
});

$("#test1").data('kendoAutoComplete').dataSource.data() // return  "undefined"

Is there a workaround or specific configuration to ensure the data() method behaves as expected, even when the input is hidden?

Thank you in advance for your assistance!
Martin
Telerik team
 answered on 26 Mar 2025
2 answers
184 views
When I use the auto complete with the auto separator and use spaces after the separator, it does not work. As shown below in the image, I type 'France,denm', the suggest will not appear. If I type, 'France, denm' it will suggest Denmark.


Darron
Top achievements
Rank 1
Iron
 answered on 29 Jan 2025
0 answers
136 views

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.


Zafer
Top achievements
Rank 1
 asked on 29 Dec 2022
1 answer
120 views

I am having a kendo autocomplete combo box, when typing out the keys i get the list of options. But it is not highlighting (focusing) the first option. when i try to hover with mouse it is focused. Adding the sample screenshots.

Kindly do the needful. Thanks in  advance

It is working fine with the dropdown

But for the autocomplete

 

When i hover this with cursor it is working. This is our expectation when typing in the autocomplete.

Martin
Telerik team
 answered on 07 Oct 2022
0 answers
124 views

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?


Oz
Top achievements
Rank 1
 updated question on 25 Aug 2022
0 answers
210 views

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?

Rod
Top achievements
Rank 1
 asked on 19 Aug 2022
3 answers
784 views

Hey

 

I'm trying to do the most simple example in my solution, but I can't seem to get it working.

 

I'm using this example: http://demos.telerik.com/kendo-ui/autocomplete/angular

 

but getting e.removeData(....).stop is not a function.

 

any ideas?

David
Top achievements
Rank 1
Iron
 answered on 09 Jun 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?