Filter row on MVVM Grid with server paging

[Lance]

Hi,

I have a Filter row on MVVM Grid with server paging.  The filter works for the most part.  The problem is with some text filters which I believe are AutoComplete boxes.  I want it to work so that the user enters the criteria in the box and no filtering is attempted until they press Enter.  I've configured it so that the minLength is 3000 and it seems to work ok unless I backspace and remove all the text.  Once the last letter is removed the filter is fired even though Enter has not been pressed.  This fires a call to my WCF service which returns a 400 Bad Request error and sets the spinning image going.  If you then press Enter, the WCF is called again and this time succeeds but the spinning icon remains.  In Firefox and Chrome it works as described above but the spinning image disappears so it is ok.  It is only in IE11 that the spinning image remains.  Ideally, I'd like to prevent the call to the WCF that returns the 400 Bad Request error but if I could get rid of the spinning image that would be a big improvement from where I am.  I've seen some examples but they don't seem to apply to an MVVM situation.

The kendo version I am using is 2014.3.1119.

Please help.

[Lance]

Just to give some extra information, Chrome and Firefox actually display the same behaviour as IE11.

Also my datasource configurations is:

  var RequestSummaryDataSource = new kendo.data.DataSource({
            batch: false,
            pageSize: 5,
            serverFiltering: true,
            serverPaging: true,
            serverSorting: true,
            schema: {
                data: function (data)
                {
                    if (data && data.GetRequestSummaryRestResult && data.GetRequestSummaryRestResult.Data)
                    {
                        return data.GetRequestSummaryRestResult.Data;
                    }
                    else
                    {
                        return null;
                    }
                },
                total: function (data)
                {
                    if (data && data.GetRequestSummaryRestResult && data.GetRequestSummaryRestResult.Total)
                    {
                        return data.GetRequestSummaryRestResult.Total;
                    }
                    else
                    {
                        return 0;
                    }
                },
                model: requestsummary
            },
            transport: {
                read: {
                    url: RDVManWcfServiceUrl.value + "/rest/GetRequestSummary",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json"
                },
                parameterMap: function (data, operation)
                {
                    //var paramMap = kendo.data.transports.odata.parameterMap(data);
 
                    return kendo.stringify(data);
                }
            },
            change: function (e)
            {
 
            },
            error: function (e)
            {
                var xhr = e.xhr;
                var statusCode = e.status;
                var errorThrown = e.errorThrown;
                var msg = xhr.responseText;
 
                JL().error(errorThrown + ' ' + msg);
            }
        });

My grid configuration is:
​

    <div
        id="asgrid"
        data-role="grid"
        data-pageable='true'
        data-bind="source: requestSummaryDS, events: { columnMenuInit: gridFilterMenuInit }"
        data-selectable="false"
        data-filterable="{ mode: 'row'}"
        data-editable="false"
        data-sortable="true"
        data-columns='[ 
						{"field": "Id", "title": "Id", "width": "11px", filterable: false, hidden: true}, 							
                        {"field": "RequestId", "title": "Request Id", "width": "50px", filterable: false},
                        {"field": "Creator", "title": "Requester", "width": "90px", filterable: {
                                cell: {
                                    operator: "contains",
                                    minLength: 3000
                                }}}, 							
                        {"field": "Assignee", "title": "Assignee", "width": "90px", filterable: {
                                cell: {
                                    operator: "contains",
                                    minLength: 3000
                                }}}, 							
                        {"field": "RequestType", "title": "Request Type", "width": "90px", filterable: {
                                cell: {
                                    operator: "contains",
                                    minLength: 3000
                                }}}, 							
                        {"field": "Description", "title": "Description", "width": "200px", filterable: {
                                cell: {
                                    operator: "contains",
                                    minLength: 3000                                 
                                }}}, 							
                        {"field": "CreationDate", "title": "Creation Date", "width": "120px", format: "{0:dd/MM/yyyy}", filterable: {
                                cell: {
                                    template: function (input) {
                                      input.element.kendoDatePicker({
                                       format: "dd/MM/yyyy",
                                       parseFormats:["dd/MM/yyyy"],
                                       culture: "en-AU"
                                     });
                                    }
                                  }
                                }},                         
                        {"field": "Status", "title": "Status", "width": "100px", filterable: {
                                cell: {
                                    operator: "contains",
                                    minLength: 3000
                                }}}, 							
                        {"field": "Comments", "title": "Comments", "width": "200px", filterable: {
                                cell: {
                                    operator: "contains",
                                    minLength: 3000
                                }}}]'>
    </div>

​

[Petur Subev]

Hello Lance,

Based on your explanation ti sounds like you want to disable the AutoComplete functionality for the text fields. You can do this in two ways.

- Provide empty object for that column.filterable.cell.dataSource option.
- Define a template which is not doing anything (you can however add some classes to the input to make it look like the autocomplete), check here

If I misunderstood something please elaborate.

Kind Regards,
Petur Subev
Telerik

 

 

[Lance]

Thanks so much Petur!  That was what I needed.  I just added

dataSource: [] to the configuration and it worked as desired so my final configuration for the field looked like 

                        {"field": "Description", "title": "Description", "width": "200px", filterable: {
                                cell: {
                                    operator: "contains",
                                    dataSource: []
                                }}},