Kendo UI grid pagination takes search field placeholder text as request parameter in IE

[Paulius]

We have a page with Kendo UI grid and simple search field with Kendo UI Autocomplete inititated on it. Search field has a placeholder "Type resource key".

On any version of internet explorer, when user navigates grid using pagination, the "GetResourceValues" function, that populates grid, gets search field's placeholder value as request parameter:

sort=&page=2&pageSize=25&group=&filter=&language=-&searchKeyword=Type+resource+key&resourceType=

While in other browsers the request looks like this:

sort=&page=3&pageSize=25&group=&filter=&language=-&searchKeyword=-&resourceType=

This leads to empty grid results after using pagination. Can it be Kendo UI bug?

Here is part of the code:

@(Html.Kendo().Grid<ResourceViewModel>()
          .Name("resourcesList")
          .Events(e => e.DataBound("handleDataBound"))
          .Pageable()
          .Resizable(resizable => resizable.Columns(true))
          .ClientDetailTemplateId("resourceDetailsTemplate")
          .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Events(events => events.Error("errorHandler"))
                                        .ServerOperation(true)
                                        .Batch(false)
                                        .Model(model => model.Id(res => res.Id))
                                        .Create(create => create.Action("CreateResource", "Resources"))
                                        .Update(update => update.Action("UpdateResource", "Resources"))
                                        .Destroy(destroy => destroy.Action("DeleteResource", "Resources"))
                                        .Read(read => read.Action("GetResources", "Resources").Data("searchCriteria"))
                                        .PageSize(25))
          .Sortable()
          .Scrollable()
          .ToolBar(factory =>
                   factory.Template(@<text>
        <div class="k-grid-toolbar-row">
            <input id="resourceSearch" class="k-grid-toolbar-search-field" />
        </div>
    </text>)))

<script>
    $(document).ready(function () {
        var autocompleteSymbol = $("#resourceSearch").kendoAutoComplete({
            dataTextField: "Key",
            minLength: 2,
            dataValueField: "Key",
            filter: "contains",
            placeholder: "Type resource key",
            dataSource: {
                type: "json",
                transport: {
                    read: "Resources/GetAutoComplete",
                    maxRows: 50000
                }
            },
            change: filterResources
        });
    });
</script>

[Nikolay Rusev]

Hello Paulius,

I suspect that you are not retrieving the AutoComplete value correctly. Are you using the value() method of the AutoComplete object instance?

For example in the following jsbin, the second console.log in IE9 will return the placeholder text. But you should always use the value method of the Kendo UI AutoComplete as in the first console.log

Regards,
Nikolay Rusev
Telerik

[Paulius]

Perfect, that was my problem, thank you.