Kendo Grid 内联编辑中的多选列表 [英] 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.

以下是我的要求:

1. 在显示时，剑道网格应显示所有选定值的逗号分隔列表.
2. 在添加时，剑道网格应显示多选列表并允许选择多个值.
3. 在编辑时，剑道网格应显示具有已选择值的多选列表.用户应该能够修改选择并从列表中添加/删除项目.

当用户点击更新/保存按钮时，从多选列表中选择的值应该在后面的代码中可用(在更新 ajax 操作中)以及行的 id.

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.

按照我现在所做的:

我采用的方法类似于在剑道内联网格中使用下拉列表.

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.

代码如下:

@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)

说明:我将模型类列表绑定到多选并在读取操作中设置数据源.为了在编辑时选择选定的值，我创建了一个函数，该函数返回选定值的 id，并将其放在读取操作中的查看数据中.

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();
                            }

说明:我使用过外键.将其绑定到字符串列connector_name".Connector_name 是我从控制器发送的以逗号分隔的 ID 列表.此处使用编辑器模板.

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?

推荐答案

试试下面的代码:

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);


}

我假设 propertyName 是您的集合列表，它包含 id 作为属性.

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

这篇关于Kendo Grid 内联编辑中的多选列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！