将 Select2 下拉列表中的参数传递给 Kendo UI MVC 数据源

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 paramters 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 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 })