AutoComplete error/crash/bug/pain/help

2 posts, 0 answers
  1. ERIC
    ERIC avatar
    1 posts
    Member since:
    Jan 2013

    Posted 19 Mar 2013 Link to this post

    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.


  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 21 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top