Question

我需要在kendo网格中使用多选列表（内联编辑），以便用户可以从每行的列表中选择多个值。

以下是我的要求：

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

当用户点击更新/保存按钮时，多选列表中的选定值应该在后面的代码中（在更新ajax操作中）以及行的id。

按照我现在所做的事情：

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

我创建了一个编辑器模板，用于在添加/编辑时显示多选。

以下是代码：

function maxTp
hvar=0.1:0.2:1; 
hl=length(hvar);
q=hvar; r=hvar;
stepx=0.2;stepy=0.1; 
y0=1.1; x0=0.1;
x=x0:stepx:1; y=y0:stepy:2;
ox = zeros(hl,1); oy = zeros(hl,1);
MaxTp = zeros(hl,1);
for k=1:hl
    Tp = bsxfun(@times,log(1 + (q(k)*r(k)*(1 - 1./y).*(2./x - y))./(1 + r(k)*(1 - 1./y) + q(k)*(2./x - y))).',x);
    MaxTp(k,1)=max(max(Tp));
    [p, q] = ind2sub(size(Tp),find(Tp==MaxTp(k,1)));
    ox(k,1)=x0+(p-1)*stepx; 
    oy(k,1)=y0+(q-1)*stepy; 
end

说明：我将模型类列表绑定到multiselect并在read操作中设置数据源。为了在编辑时选择所选的值，我创建了一个函数，该函数返回所选值的id，并将其放入读取操作的View Data中。

我在我的索引页面中使用了此编辑器模板，如下代码：

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

说明：我使用过ForeignKey。将其绑定到字符串列＆＃34; connector_name＆＃34;。 Connector_name是我从控制器发送的以逗号分隔的ID列表。此处使用编辑器模板。

问题：在索引中查看/显示时工作正常但编辑未显示所选值。此外，我们在更新点击后的代码中没有获得更新值。

这是实现多选列表的正确方法还是我需要将集合属性绑定为网格中的列？如果我将集合属性绑定为列，那么在显示时如何能够显示逗号分隔的字符串？

Answer 1

尝试以下代码：

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作为属性。

Answer 2

试一试：

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

和js：

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

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

Kendo Grid内联编辑中的多选列表

2 个答案: