Populating a kendo multiselect with ajax data

Question

I am using a kendo multiselect widget for users to select different values pulled from the database via an ajax call. The ajax call takes one parameter, searchValue, which will narrow down the returned data. Here is my controller:

[HttpPost]
    public JsonResult ProfitabilitySearch(string searchValue)
    {
        return Json(InventoryDataAccess.ProfitabilitySearch(searchValue));
    }

1) How do you get the value from the text box to use as your searchValue? I commented the area in question below. Here is my dataSource:

    var searchDataSource = new kendo.data.DataSource({
    transport: {
        read: function () {
            $.ajax({
                type: 'POST',
                url: Firm.ProfitabilitySearchURL,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                         //'SuperClient' is test data to see if it works, but what do i
                         //need to make searchValue = what I type?
                data: JSON.stringify({ searchValue:  'SuperClient'}),
                success: function (data) {
                    return data.RESULT;
                }
            });
        }
    },
    group: { field: 'category' },
    serverFiltering: true
});

And here is where I create the multiselect widget:

var TKSearch = $("#TKSearch").kendoMultiSelect({
        dataSource: searchDataSource, 
        autoBind: false,
        minLength: 3,
        placeholder: 'Search Timekeepers...',
        dataTextField: 'label',
        dataTextValue: 'value',
        delay: 200
    }).data("kendoMultiSelect");

I'm not sure if this will help, but here is the structure of the json that is returned from the ajax call:

{"label":"SUNFLOWER REALTY CORP. (023932)","value":"023932","category":"RC"}

Solving the first question above may answer my second question so I will wait to ask that until after.

Answer 1

You can use functions for the request parameters.

var searchDataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            $.ajax({
                type: 'POST',
                url: Firm.ProfitabilitySearchURL,
                contentType: 'application/json; charset=utf-8',
                data: {
                    searchValue: function () {
                        // better: use a model property instead of this
                        return $("#TKSearch").data('kendoMaskedTextBox').value();
                    }
                },
                success: function (data) {
                    options.success(data.RESULT);
                }
            });
        }
    },
    group: { field: 'category' },
    serverFiltering: true
});

Notes

• This really should be a GET request. Use POST for requests that actually change data on the server and GET for requests that merely retrieve data from the server.
• You do not have to JSON.stringify() yourself. jQuery does that transparently.
• Specifying dataType is completely superfluous, jQuery will figure this out from the response headers.
• Reading the input value via jQuery is not clean. Use the data-bound model property instead.
• The callback invocation (options.success())
• This sample lacks HTTP error handling, you must add that.