AutoComplete error/crash/bug/pain/help

[ERIC]

Hello,

I am using the autocomplete widget from the kendo ui web library and experiencing a reproduceable bug. The client javascript error being thrown is "toLowerCase is an undefined function or method". Below is my code.

DATASOURCE
===================================================

var transport = {
        read: {
            url: "ServicePackageOffers",
            dataType: "json",
            data: {},
            cache: true
        }
    };

    var filterDataSource = new kendo.data.DataSource({
        transport: transport,
        serverFiltering: false,
        sort: {
            field: "PackageName",
            dir: "asc"
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    PackageName: { editable: false, nullable: false, type: "string" },
                    PackageOfferName: { editable: false, nullable: false, type: "string" },
                    ClubName: { editable: false, nullable: false, type: "string" },
                }
            }
        }
    });

CONTROL RENDERING
===================================================

@(Html.Kendo().AutoComplete()
.Name("autocomplete")
.MinLength(1)
.DataTextField("PackageOfferName")
.Placeholder("Search Products...")
.Filter(FilterType.Contains)
.HtmlAttributes(new { style = "width: 100%; height: 100%" })
)

BIND
===================================================

$(document).ready(function () {
        $("#autocomplete").closest('.k-autocomplete.k-widget').keyup(function (e) {
            var val = $('#autocomplete').data().kendoAutoComplete.value();
            onFilterValueChanged(val);
        });

        filterDataSource.read();

        $("#autocomplete").data("kendoAutoComplete").setDataSource(filterDataSource);
    });

The exception gets thrown any time I select an item from the autocomplete list popup. The error occurs here, when I call datasource.filter.

ERROR
===================================================

function onFilterValueChanged(e) {
        setFilterText(e);

        sharedDataSource.filter({
            filters: [
                { field: "PackageOfferName", operator: "contains", value: e }
            ]
        });
    }

However, if i change the control renderer to this:
CONTROL RENDERER
===================================================

<span class="k-textbox k-space-left" style="width: 100%; height: 30px">
<a href="#" id="itemFilterCommand" class="k-icon k-i-search"> </a>
<input id="autocomplete" style="width: 100%; height: 100%; padding: 0px" />
</span>

$("#autocomplete").kendoAutoComplete({
            minLength: 1,
            dataTextField: "PackageOfferName",
            filter: "contains",
            placeholder: "Search Products..."
        });

The error no longer throws, and everything works fine. But I dont want to do that, I want to do what I want to do and use the server wrappers. So... can someone try to explain why I am experiencing what I am experiencing.

[Georgi Krustev]

Hello Eric,

 
It is hard to determine what cause the problem depending on the given information. I attached a simple test project, which shows different AutoComplete setups and everything works as expected. I will ask you to modify the attached one or prepare a separate test project, which replicates the problem. Thus we will be able to observe the issue locally and advice you further.

Kind regards,
Georgi Krustev
the Telerik team