剑道网格上的多选编辑器

Question

我试图将集合属性绑定到剑道网格中。

我有这个型号

class Student {
   public int StudentId { get; set; }
   public IEnumerable<Course> Courses { get; set; }
   public string CourseDescriptions {
     get {
       return Courses.Select(x => x.Description).Join(", ");
     }
   }
}

class Course {
   public int CourseId { get; set; }
   public string Description { get; set; }
}

现在我正在尝试绑定课程并创建一个多选下拉列表。

 @(Html.Kendo().Grid<Student>()
 .Name("student-grid")
 .Columns(columns =>
 {
     columns.Bound(x => x.StudentId).Title("StudentId");
     columns.Bound(x => x.Courses)
         .ClientTemplate("#=CourseDescriptions#");
 })
 .ToolBar(toolbar =>
 {
     toolbar.Create().Text(R.Generic.AddNewRecord);
 })
 .Editable(editable => editable.Mode(GridEditMode.InLine))

这个想法是在查看模式下显示以逗号分隔的课程。但在编辑模式下将其更改为具有预选值的多选下拉列表。

有什么建议吗？

Answer 1

您需要为

Courses

列定义自定义编辑器模板，在EditorTemplates中创建一个包含以下内容的“CoursesEditor.cshtml”文件。

@model IEnumerable<Course>

@(
    Html.Kendo().MultiSelectFor(m => m)
        .DataTextField("Description")
        .DataValueField("CourseId")
        .BindTo((IEnumerable<Course>)ViewData["courses"])
)

在模型定义中指定编辑器名称：

class Student {
   public int StudentId { get; set; }
   
   [UIHint("CoursesEditor")]
   public IEnumerable<Course> Courses { get; set; }
   public string CourseDescriptions {
     get {
       return Courses.Select(x => x.Description).Join(", ");
     }
   }
}

不要忘记在控制器中使用多选数据播种

ViewData

：

    public class HomeController : Controller
    {
        private DataRepository repository = new DataRepository();

        public ActionResult Index()
        {
            ViewData["courses"] = repository.Courses;

            return View();
        }

此仓库中有一个可运行的示例：

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/multiselect-in-grid