Combobox Using MVC Controller Action For Remote Data

3 posts, 1 answers
  1. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 12 Sep 2014 Link to this post

    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



  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 16 Sep 2014 Link to this post

    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
     
    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
  4. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 16 Sep 2014 in reply to Georgi Krustev Link to this post

    Perfect, thanks Georgi.

    :)
Back to Top