Combobox Using MVC Controller Action For Remote Data

[Nick]

I've created a combobox that should pull remote data from an MVC 4 controller action.

Html:

<label for="contactFilter">Filter by contact name:</label>
<input id="contactFilter" type="search" value="" />

Javascript:

$(document).ready(function () {

  $("#contactFilter").kendoComboBox({
    placeholder: "contact name",
    dataTextField: "Name",
    dataValueField: "Id",
    filter: "contains",
    autoBind: false,
    minLength: 3,
    dataSource: {
      type: "json",
      serverFiltering: true,
      transport: {
        read: {
          url: siteRoot + "Groupings/ContactsTypeahead"
        }
      }
    }
  });

});

Controller action:

Public Function ContactsTypeahead(filterString As String) As JsonResult

  Dim contacts As Attenda.Cmdb.ServerGroups.Core.SupportworksService.Contacts = _supportworks.SearchContacts(filterString)

  Dim retVal = contacts.Select(Function(x) New With {.Id = x.ContactID, .Name = x.FirstName & " " & x.Surname}).ToList()

  Return Json(retVal, JsonRequestBehavior.AllowGet)

End Function

The problem is rather than just getting the value that's been typed in to the combobox the request looks something like:
http://localhost/myApp/myController/ContactsTypeahead?filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=bob&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=Name&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=contains&filter%5Bfilters%5D%5B0%5D%5BignoreCase%5D=true

What I actually want is something like:
http://localhost/myApp/myController/ContactsTypeahead?filterString=Bob

Is there any way to get the combobox to just send the value in the box, rather than that serialised filter object?

Thanks,
Nick

[Georgi Krustev]

Hello Nick,

One possible way to accomplish your goal is using the data callback method of the DataSource:

$("#contactFilter").kendoComboBox({
    placeholder: "contact name",
    dataTextField: "Name",
    dataValueField: "Id",
    filter: "contains",
    autoBind: false,
    minLength: 3,
    dataSource: {
      type: "json",
      serverFiltering: true,
      transport: {
        read: {
          url: siteRoot + "Groupings/ContactsTypeahead",
          data: function() {
             return {
filterString: $("#contactFilter").data("kendoComboBox").input.val()
             };
          }
        }
      }
    }
  });

The other option is to translate the query parameters of the data source in its parameterMap function.

Regards,
Georgi Krustev
Telerik

 

 

[Nick]

Perfect, thanks Georgi.

:)