Kendo Autocomplete not working after upgrading the kendo version

Question

We have an ASP.NET MVC application using KendoUI jQuery components. The KendoUI version used is 2014.3.1411 and every thing works very good here.

Recently I have been assigned to upgrade the KendoUI version to 2022.3.1109 and after Kendo upgrade, all the Kendo controls are working fine except for autocomplete.

Below is the code which is used for Autocomplete which works well with old Kendo reference and now giving console errors.

<div class="item">
        <div class="claim-info-description">
            <label>Provider<span class="icon icon-question-mark help-text" title="Enter the Provider Name who hosted the course.  You can search the PMI Education Provider Directory or type in a third-party provider name."></span></label>
        </div>
        <div class="claim-info-data">
            @(Html.Kendo().AutoCompleteFor(m => m.ProviderName)
                    .Name("ProviderName")
                    .IgnoreCase(true)
                    .DataTextField("ProviderName")
                    .MinLength(3)
                            .HtmlAttributes(new { placeholder = "Provider Name or ID", required = "required", validationmessage = "Enter Provider Name or ID", data_maxprovidertextlength = "150", data_maxprovidertextlength_msg = "Text must be less than 150 characters.", data_providernospaces_msg = "A value must be entered for the Provider." })
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("ProviderAutoComplete", "Search")
                                .Data("onProviderData");
                        })
                        .ServerFiltering(true);
                    })
                    .HeaderTemplate("<span class=\"k-state-default list-header\"><span>Provider #</span><em>Name</em></span>")
                    .Template("<span class=\"k-state-default\"><span>#: data.ProviderNumber #</span><em>#:data.ProviderName # </em></span>")
                    .Events(e =>
                    {
                        e.Filtering("clearProviderValues").Select("onProviderSelect");
                    })
            )
            <span class="invalid-msg-placeholder"><span class="k-invalid-msg" data-for="ProviderName"></span></span>
        </div>
    </div>

This is the error getting for autocomplete after the Kendo update:

Please suggest and help me fix this issue as I'm not understanding what's wrong here.

Answer 1

Your header template does indeed look invalid. I've expanded it to make it easier to read:

<span class="k-state-default list-header">
  <span>Provider #</span>
  <em>Name</em>
</span>

My experience with kendo doesn't go back as far as 2014 but I know that the current templating rules mean that the number of # symbols should be even and there is only one. I think it should become this:

<span class="k-state-default list-header">
  <span>#:Provider #</span>
  <em>Name</em>
</span>

Hence change your code to this and let us know if that helps:

.HeaderTemplate("<span class=\"k-state-default list-header\"><span>#:Provider #</span><em>Name</em></span>")