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.
以下是我的要求:
- 在显示时，剑道网格应显示所有选定值的逗号分隔列表.
- 在添加时，kendo网格应显示多选列表，并允许选择多个值.
- 在编辑时，kendo网格应显示具有已选择值的多选列表.用户应该能够修改选择并从列表中添加/删除项目.
当用户单击更新/保存"按钮时，多重选择列表中的选定值应在行后面的代码中(在更新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.
以下是我截至目前的工作:
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.
以下是代码:
@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)
说明:我将模型类的列表绑定到multiselect并在读取操作中设置数据源.为了在编辑时选择选定的值，我创建了一个函数，该函数返回选定值的id并将其放入read动作中的View Data中.
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();
}
说明:我已经使用了ForeignKey.将其绑定到字符串列"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屋！
