AutoComplete with Server filtering in a Html Form Tag

[STEPHAN]

We have an Issue with the Server-side filtering feature from the kendoAutoComplete. This autocomplete is contained in a html form tag. When the request is performed on the asp.net mvc endpoint the DataSourceRequest is completly empty, becuase all the values for this object are in HttpContext.Request.Form, from where the DataSourceRequestAttribute doesn't parse it from. What should we do, to get the DataSourceRequest correctly bound?

HTML Code

<form class="navbar-form" role="search" method="post" action="@Url.Action("Results","Search")">

// some other controls

<div class="input-group">
<span class="k-widget k-autocomplete k-header k-state-default myClass">
<input type="text" id="autoCompleteSearch" name="autoCompleteSearch" class="form-control" />

</span>
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>

 

JS Code:

$('#autoCompleteSearch').kendoAutoComplete({
minLength: 1,
dataTextField: 'Caption',
dataValueField: 'Value',
filter: "contains",
dataSource: {
serverFiltering: true,
transport: {
read: {
type: "post",
dataType: "json",
url: '@Url.Action("AdvancedSearchAutoComplete_Read", "AjaxValues")?searchType=' + window.searchType
}
},
schema: {
data: "Data"
}
}
});

Server-side:

[System.Web.Mvc.HttpPost]
public JsonResult AdvancesSearchAutoComplete_Read(int searchType, [DataSourceRequest] DataSourceRequest request)
{

//...

}

 

Thank you in advance!

[Peter Milchev]

Hello Stephan,

There is a typo in the Method's name and that may be the reason for the issue. Would you please renaming it from AdvancesSearchAutoComplete_Read to AdvancedSearchAutoComplete_Read and check if the problem persists?

Regards,
Peter Milchev
Telerik

[STEPHAN]

Hi Peter

I saw the typo while posting the code fragments, which I've corrected in our sourcecode afterwards. This typo was not part of the Problem. The request is reaching the API Endpoint, but the [DataSourceRequest] DataSourceRequest request Parameter is empty (not null), because all relevant values are in HttpContext.Request.Form.

How can I fix this Problem?

 

Thank you in advance!

[Peter Milchev]

Hi Stephan,

If you want to use DataSourceRequest and ToDataSourceResult instances you should set the DataSources' property type to "aspnetmvc-ajax". You can find an example in the documentation for Parameter Sending to Server. In your case the JavaScript code should look like the following:

$('#autoCompleteSearch').kendoAutoComplete({
    minLength: 1,
    dataTextField: 'Caption',
    dataValueField: 'Value',
    filter: "contains",
    dataSource: {
        serverFiltering: true,
        type: "aspnetmvc-ajax",
        transport: {
            read: {
                type: "post",
                dataType: "json",
                url: '@Url.Action("AdvancedSearchAutoComplete_Read", "AjaxValues")?searchType=' + window.searchType
            }
        },
        schema: {
            data: "Data"
        }
    }
});

Regards,
Peter Milchev
Telerik