Multiselect list in Kendo Grid inline editing

问题

I need to use multiselect list in kendo grid (inline editing) so that user can select multiple values from the list per row.

Following are my requirements:

1. At the time of display, kendo grid should show comma separated list of all the selected values.
2. At the time of Add, kendo grid should show multiselect list and allow to select multiple values.
3. At the time of Edit, kendo grid should show multiselect list with already selected values. User should be able to modify the select and add/remove items from the list.

When user clicks on update/save button, selected values from multiselect list should be available in code behind (in update ajax action) along with id of row.

Following what I do as of now:

I am taking an approach similar to using a drop down list in kendo inline grid.

I have created an Editor Template for displaying multiselect at the time of add/edit.

Following is the code:

@model List<Namespace.CompanyConnector>
@using Kendo.Mvc.UI

@(Html.Kendo().MultiSelectFor(c=>c)

      .Name("company_connector_id")
      .DataTextField("connector_name")
      .DataValueField("company_connector_id")
      .Placeholder("Select connector...")

              .AutoBind(false)
                        .Value((List<int>)ViewData["SelectedValues"])
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetCompanyConnectors", "BrandConnector");
                    })
                    .ServerFiltering(true);
                })
           )
@Html.ValidationMessageFor(m => m)

Explanation: I bind a list of model class to the multiselect and set data source in the read action. For selecting the selected values at the time of edit, I have created a function that returns the ids of selected values and put that in View Data in the read action.

I've used this Editor template in my Index page as following code:

@{Html.Kendo().Grid<Cee.DomainObjects.DomainObjects.BrandConnector>()
.Name("BrandConnectorGrid")
.Filterable()
.Events(e => e.Edit("onEdit"))
.DataSource(dataSource => dataSource
.Ajax()
.Events(e => e.Error("error_handler").RequestEnd("onRequestEnd"))
.ServerOperation(false)
.Model(model =>
{
  model.Id(p => p.brand_id);
  model.Field(e => e.CompanyConnectorList).DefaultValue(new 
  List<Cee.DomainObjects.DomainObjects.CompanyConnector>());
})
.Read(read => read.Action("_AjaxBinding", "BrandConnector",new{companyID = 0 }).Type(HttpVerbs.Post))
.Update(update => update.Action("_UpdateBinding", "BrandConnector").Type(HttpVerbs.Post)))
                               .Columns(columns =>
                               {
                                   columns.Bound(c => c.brand_connector_id).Width(0).Hidden(true);
                                   columns.Bound(c => c.company_id).Width(0).Hidden(true);
                                   columns.Bound(c => c.brand_id).Width(0).Hidden(true);
                                   columns.Bound(u => u.brand_name).Title("Brand").Width("18%").HtmlAttributes(new { @class = "brkWord", @readonly = "readonly" });
                                   columns.ForeignKey(u => u.connector_name, Model.CompanyConnectorList, "company_connector_id", "connector_name").Title("Connector").Width

("16%").HtmlAttributes(new { @class = "brkWord"     }).EditorTemplateName("company_connector_id");
 columns.Command(p => p.Edit().Text("Edit").HtmlAttributes(new { @title = "Edit" })).Width("16%").Title("Edit");
                               })
.Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Top))
                            .Pageable(pageable => pageable.Refresh(true).PageSizes(GlobalCode.recordPerPageList).ButtonCount(GlobalCode.PageSize).Input(true).Numeric(true))
                                                        .HtmlAttributes(new { @class = "dynamicWidth" })
                                       .Sortable(sorting => sorting.Enabled(true))
                                                        .Render();
                            }

Explanation: I've used ForeignKey. Bound it to the string column "connector_name". Connector_name is a comma separated list of IDs that I send from controller. Editor template is used here.

Issue: It works fine at the time of View/Display in Index but Edit does not show selected value. Also we do not get updated value in code behind on update click.

Is this correct way of implementing multiselect list or do I need to bind a collection property as a column in grid? If I bind a collection property as a column then how would I be able to show comma separated string at the time of display?

回答1:

Try below code:

function onEdit(e) {

 var multiselect = $("#YourMutliselectDropdown").data("kendoMultiSelect");

            var IDArray = [];

            $(e.model.propertyName).each(function (index) {
                var ID = e.model.propertyName[index].id;
                IDArray.push(ID);
            });    

            multiselect.value(IDArray);


}

I assume that propertyName is List of your collection and it contains id as property.

回答2:

try it:

c.Bound(p => p.CompanyConnectorList).ClientTemplate("#= connectorsToString(data)#").EditorTemplateName("company_connector_id");

and js:

function connectorsToString(data) {
        var list = data.company_connector_id;
        var result = "";
        for (var i = 0; i < list.length; i++) {
            result += list[i].Name + ';'; 
        }
        return result;
    }

来源：https://stackoverflow.com/questions/30067630/multiselect-list-in-kendo-grid-inline-editing