How to pass Additional parameter in Kendo Multi select

Question

I want to load positions based on selected employee. I have tried to pass additional value "IDs" Parameter, but it didn't work.

Index.Cshtml

$("#employees").kendoMultiSelect({
                placeholder: "Select employees...",
                dataTextField: "EmployeeFullName",
                dataValueField: "EmployeeId",
                autoBind: false,
                filter: "contains",
                dataSource: { 
                    serverFiltering: true,
                    transport: { 
                        read: baseUrl + "Schedules/GetEmployees_New",
                    }
                }
            }).data('kendoMultiSelect');
             
           $("#positions").kendoMultiSelect({
                placeholder: "Select positions...",
                dataTextField: "Code",
                dataValueField: "PositionId",
                autoBind: false,
                filter: "contains",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                         read: baseUrl + "Schedules/GetPositions_New?IDs=" + $("#employees").data('kendoMultiSelect').value().join() //I am not getting this value in controller
                    }
                }
            }).data('kendoMultiSelect');

SchedulesController.cs

public ActionResult GetEmployees_New(Filters filter, string IDs)
    {
        return Json(ReturnData, JsonRequestBehavior.AllowGet);
    }
    public ActionResult GetPositions_New(Filters filter, string IDs)
    {
        // I am not getting employee value in IDs parameter.
        return Json(ReturnData, JsonRequestBehavior.AllowGet);
    }

Model

public class Filters
{
    public string logic { get; set; }
    public DateTime? FromDate { get; set; }
    public DateTime? ToDate { get; set; }
    public List<Filter> filters { get; set; }

    public bool IsDailyHours { get; set; }
}

Any help would be much appreciated.

Answer 1

Add a transport.read.data function. This way you can send additional parameters to the remote service.

          transport: {
            read: {
              url: "parth/to/my/endpoint",
              data:function(){
                var ms = $("#employees").getKendoMultiSelect();
                var selectedItems = ms.value();
                return {
                    ids: selectedItems
                }
              }
            }
          }

Here is an example - select items in the first MultiSelect and inspect the Network tab - note the additional parameters sent. The endpoint should expect a parameter of the type submitted, in the example an array of int's.

public ActionResult GetEmployees_New(int[] ids)
{
   
}