CODEWITHSUNDEEP
c#asp.net-corekendo-ui
BurnsBA
BurnsBA

Reputation: 4929

How to pass array from kendo preflight to MVC list parameter?

I have a web endpoint

public JsonResult GetCompanyPersonnelMany(string text, IEnumerable<int> includeIds)
{

I want to pass some data from a kendo multiselect. The multi select uses server side filtering; it uses a remote datasource; and it needs to process the data pre-flight.

My problem is that the text parameter will be set, but includeIds is always empty.

The pre-flight method looks like

var employeeComboDataPreFlight_loading = true;
function employeeComboDataPreFlight() {
    var data = multiSelectPreFlightCommon(getMultiSelectByName('personnel'));
    if (employeeComboDataPreFlight_loading) { data.includeIds = [568,572,585] || []; }
    return data;
}

The multiselect is defined in the view as 

@(Html.Kendo().MultiSelect()
    .Name("personnel")
    .Filter(FilterType.Contains)
    .Placeholder("Select an option...")
    .DataTextField(nameof(PersonnelEmployerViewModel.DisplayName))
    .DataValueField(nameof(PersonnelEmployerViewModel.PersonnelId))
    .MinLength(2)
    .Value(Model.Select(x => x.PersonnelId))
    .DataSource(source =>
    {
      source.Read(read =>
      {
          read.Action(nameof(PersonnelController.GetCompanyPersonnelMany),
              ControllerName.Personnel
              )
          .Data("employeeComboDataPreFlight")
          ;
      })
      .ServerFiltering(true);
    })
    )

Evaluating the pre-flight method (in chrome console) shows the following:

> employeeComboDataPreFlight()
<- {text: "", includeIds: Array(3)}
    includeIds: Array(3)
      0: 568
      1: 572
      2: 585
> JSON.stringify(employeeComboDataPreFlight())
<- "{"text":"","includeIds":[568,572,585]}"

Opening the chrome network tab, it shows Query String Parameters: 

text:
includeIds[]: 568
includeIds[]: 572
includeIds[]: 585

And my request URL:

Request URL: https://localhost:44363/Personnel/GetCompanyPersonnelMany?text=&includeIds%5B%5D=568&includeIds%5B%5D=572&includeIds%5B%5D=585

So it looks like there is an array of data for a variable named includeIds being sent to the server.

My problem is that the controller isn't getting the the includeIds parameter (the text parameter works correctly), the List is always empty (non-null, length: 0). How do I get the kendo multiselect to pass my javascript array into a format the controller will accept?

Upvotes: 0

Views: 452

Answers (1)

BurnsBA
BurnsBA

Reputation: 4929

Well, the problem is the same as seen here or here.

As pointed out in the documentation the read transport is a wrapper to jquery ajax method, so (some of) the same configuration parameters can be passed through. The fix is to pass traditional: true to the read transport configuration. This is not possible using the MVC wrappers, so you have to define the kendo widget in javascript.

I tried setting the option after the widget was initialized like in this post but couldn't get this to work: 

multiselect.dataSource.transport.options.read.traditional = true; // doesn't do anything

I also tried to use JSON.stringify instead of traditional but couldn't ever get a working request. In the end, I had to (1) change from MVC to javascript definition of the widget and (2) add traditional: true to transport options. The view now looks like

<div id="personnelWrapper" name="personnel"></div>
<script>
    $("#personnelWrapper").kendoMultiSelect({
        "filter": "contains",
        "placeholder": "Select an option...",
        "dataTextField": "@nameof(PersonnelEmployerViewModel.DisplayName)",
        "dataValueField": "@nameof(PersonnelEmployerViewModel.PersonnelId)",
        "minLength": 2,
        "value": [@(string.Join(",", Model.Select(x => x.PersonnelId)))],
        "dataSource": {
            "transport": {
                "read": {
                    "url": "@(Url.Action(nameof(PersonnelController.GetCompanyPersonnelMany),
                          ControllerName.Personnel) )",
                    "dataType": "json",
                    "data":employeeComboDataPreFlight,
                    "traditional": true, // <- this is the solution
                },
                "prefix":""
            },
            "serverFiltering":true,
            "filter":[],
            "schema":{
                "errors":"Errors"
            }
        }
    });
</script>

Upvotes: 1

Related Questions