Kendo MultiSelect 未在 Kendo Grid 弹出窗口中呈现

如何解决Kendo MultiSelect 未在 Kendo Grid 弹出窗口中呈现

我正在尝试在带有 ASP.NET MVC 的 Kendo Grid 中使用 Kendo MultiSelect。我并不特别需要带有 MultiSelect 的列在网格中可见，但我需要能够在弹出视图中对其进行编辑。当网格加载时，带有 MultiSelect 的列具有 [object Object] 的值，当我单击编辑打开弹出窗口时，MultiSelect 根本不显示在弹出窗口中。当我将网格的编辑模式更改为 inline 或 incell 并按编辑时，MultiSelect 出现在列中，其中包含数据库中每个对象的正确预选值以及 ViewData 中正确的有界值列表。我不知道我做错了什么。

这是我的代码：

视图模型：

public class QMkeyvM
{  
    [HiddenInput(displayValue = false)]
    public int Id { get; set; }

    [StringLength(100)]
    public string Code { get; set; }

    [StringLength(255)]
    public string Title { get; set; }

    [UIHint("Enum")]
    public ScopeType Scope { get; set; }

    [UIHint("InstituteTypes_MultiSelect")]
    public List<InstituteTypeVM> InstituteTypes { get; set; }        
}


public class InstituteTypeVM
{
    public int Id { get; set; }

    public string Name { get; set; }
}

MultiSelect 的编辑器模板文件 InstituteTypes_MultiSelect.cshtml：

@(Html.Kendo().MultiSelect()
    .Name("InstituteTypes")
    .DataValueField("Id")
    .DataTextField("Name")
    .Filter("contains")
    .HtmlAttributes(new { style = "width:250px;height:50px" })
    .BindTo((IEnumerable<InstituteTypeVM>)ViewData["InstituteTypes"])
    .HtmlAttributes(new { data_value_primitive = false })

)

视图中的网格：

@(Html.Kendo().Grid<QMkeyvM>()
.Name("qmkeysGrid")
.Columns(columns =>
{
    columns.Bound(p => p.Id).Hidden();
    columns.Bound(p => p.Code);
    columns.Bound(p => p.Title);   
    columns.Bound(p => p.Scope).EditorTemplateName("Enum");
    columns.Bound(p => p.InstituteTypes).EditorTemplateName("InstituteTypes_MultiSelect");
})
.Pageable(p =>
{
    p.Messages(m => m.Page("Page").Empty("No entries").ItemsPerPage("per page").display("{0} to {1} from {2}"));
    p.Refresh(true);
    p.Input(true);
    p.PageSizes(new int[] { 20,50,100,200 });
})
.ClientDetailTemplateId("qmkeydetailtemplate")
.sortable().Groupable(g => g.Messages(m => m.Empty("Grouping")))
.Scrollable(s => s.Height("auto"))
.Resizable(resize => resize.Columns(true))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
    FileName("qmkeys.xlsx")
    .Filterable(true)
    .ProxyURL(Url.Action("Excel_Export_Save","Grid"))
)
.Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
        .ForString(str => str.Clear()
            .Contains("Contains")
        )
        .ForDate(dr => dr.Clear().IsEqualTo("ForDate"))
        ).Messages(m => m.Filter("Apply Filter").Clear("Clear Filter").Info("")))
.ToolBar(toolbar =>
{
    toolbar.Create().Text("Add qmkey");
    toolbar.Custom().Text("Add Section").HtmlAttributes(new { id = "addSectionsBtn" });
    toolbar.Custom().Text("Add Subsection").HtmlAttributes(new { id = "addSectionGroupsBtn" });
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.Window(w => w.Title("Edit").Resizable().Draggable(true).Width(700))
.displayDeleteConfirmation("Confirm Delete"))
.Events(e => e.Edit("onEdit"))
.DataSource(dataSource => dataSource
    .Ajax().ServerOperation(false)
    .PageSize(200)
    .Read(read => read.Action("qmkeysRead","qmkeys"))
    .Create(create => create.Action("qmkeyCreate","qmkeys"))
    .Update(update => update.Action("qmkeyUpdate","qmkeys"))
    .Destroy(destroy => destroy.Action("qmkeyDelete","qmkeys"))
    .Events(events => events.Error("GridOnError").RequestEnd("qmkeysGrid_OnRequestEnd"))
    .Model(model =>
    {
        model.Id(p => p.Id);
    })
).AutoBind(true).Deferred())

非常感谢。

解决方法

尝试放置 Datasource 属性以从 Database 获取数据以下代码将帮助您：

@(Html.Kendo().MultiSelect()
        .Name("multiselect")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .Value(new[] { 2,7 })
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Products_Read","Home");
            })
            .ServerFiltering(true);
        })
    )