Pass Parameter from Select2 Dropdown to Kendo UI MVC DataSource

Question

We just got Telerik controls today and I am trying to "switch out" the old controls for the new Kendo UI MVC Controls.

I have a select2 multi-selection dropdownlist and I am trying to send the "selected to parameters through the Kendo UI dataSource to the controller method to return the specific records.

Here is my .cshtml Razor code:

@(Html.Kendo().Grid<ICAN.Models.Competency.ViewModels.AssessmentModel>()
    .Name("grid")
    .Columns(columns =>
    {
      columns.Bound(c => c.AssessmentId).Width(50);
      columns.Bound(c => c.AssessmentName).Width(350);
      columns.Bound(c => c.NumOfUnits).Width(150);

    })
    .Sortable()
    .Pageable()
    .Scrollable()
    .ClientDetailTemplateId("unitTemplate")
    .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("GetAssessmentSearch", "Config", new { area = "Competency" }))
    )
    .Events(events=>events.DataBound("dataBound"))
)

Here is my select2 Html and jQuery:

<div class="form-group"><label>Assessments:</label>@Html.ListBoxFor(x => x.Assessments, new MultiSelectList(Model.assessmentSelect, "Id", "Text"), new { Id = "AssessmentId", @class = "form-control select-multiple", multiple = "multiple" })</div>

$('#AssessmentId').select2({ width: "100%", placeholder: "Select an Assessment" });

Here is the controller code:

public ActionResult GetAssessmentSearch([DataSourceRequest]DataSourceRequest request, string Assessments)
{
  var result = service.GetAssessmentSearch(Assessments);
  return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

I have a "submit" button for the user to click after they have made multiple selections in the select2 dropdown:

<button class="btn btn-alt3 mySubmit" id="submitButton" style="background-color:#bbc4cc; color:#2A4351" onclick="loadUnitTable();"> <i class="lnir lnir-checkmark-circle"></i> Submit Search Criteria</button>

Answer 1

In my loadAssessmentTable() which was assigned to onclick of my submit button, all that was needed was the following:

        var values = $('#AssessmentId').val().toString();
    grid.dataSource.read({ "Assessments": values })