从外部网格模型的集合属性填充剑道详细信息网格

Question

我有一个包含 ICollection 的 StudentViewModel。我想在剑道 UI 网格中显示学生，并在嵌套的详细信息网格中显示每个学生的注释。我可以像在 telerik 的例子中一样做到这一点：http://demos.telerik.com/aspnet-mvc/grid/hierarchy

我需要最初扩展所有细节网格。使用javascript函数来扩展它们非常容易。这里的问题是，服务器每行在学生网格中被调用一次。

我正在寻找一种方法，即在网格的初始加载时从 StudentViewModel 的 Notes 属性填充所有详细信息网格，而无需为每个学生调用服务器。我想我必须为某种自定义方式配置内部网格的数据源，但是如何配置呢？

我目前有以下代码：

模型：

public class StudentViewModel
    {
        private ICollection<NoteViewModel> notes;
        public StudentViewModel()
        {
            this.notes = new List<NoteViewModel>();
        }
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime SomeDate { get; set; }
        public ICollection<NoteViewModel> Notes { get; set; }
    }
public class NoteViewModel
    {
        public int Id { get; set; }
        public string Discipline { get; set; }
        public DateTime Date { get; set; }
        public double Grade { get; set; }
    }

控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Models;
public class KendoController : Controller
{
    private static IQueryable<StudentViewModel> data = new List<StudentViewModel>()
    {
        // TODO: HTML Helper could be created to receive controller, view model and columns
        // done in course 200, tiketing system in exam preparation theme
        new StudentViewModel()
        {
            Id=1,
            Name= "Pesho",
            SomeDate = DateTime.Now.AddDays(-100)
        },
        new StudentViewModel()
        {
            Id=2,
            Name= "Gosho",
            SomeDate = DateTime.Now.AddDays(-20)
        },
        new StudentViewModel()
        {
            Id=3,
            Name= "Misho",
            SomeDate = DateTime.Now.AddDays(-120),
            Notes = new List<NoteViewModel>()
            {
                new NoteViewModel()
                {
                    Discipline = "Math",
                    Grade=4,
                    Date = DateTime.Now.AddDays(-12),
                    Id=1
                },
                new NoteViewModel()
                {
                    Discipline = "English",
                    Grade=5.36,
                    Date = DateTime.Now.AddDays(-10),
                    Id=2
                },
                new NoteViewModel()
                {
                    Discipline = "BG",
                    Grade=3.22,
                    Date = DateTime.Now.AddDays(-22),
                    Id=3
                },
            }
        },
        new StudentViewModel()
        {
            Id=4,
            Name= "Borko",
            SomeDate = DateTime.Now.AddDays(-1000),
            Notes = new List<NoteViewModel>()
            {
                new NoteViewModel()
                {
                    Discipline = "IT",
                    Grade=5.66,
                    Date = DateTime.Now.AddDays(-18),
                    Id=4
                },
                new NoteViewModel()
                {
                    Discipline = "English",
                    Grade=5.16,
                    Date = DateTime.Now.AddDays(-1),
                    Id=5
                },
                new NoteViewModel()
                {
                    Discipline = "BG",
                    Grade=3.22,
                    Date = DateTime.Now.AddDays(-32),
                    Id=6
                },
            }
        },
        new StudentViewModel()
        {
            Id=5,
            Name= "Ganka",
            SomeDate = DateTime.Now.AddDays(-1)
        },
        new StudentViewModel()
        {
            Id=6,
            Name= "Lubo",
            SomeDate = DateTime.Now.AddDays(-10)
        },
    }.AsQueryable();
    // GET: Kendo
    public ActionResult Index()
    {
        return View();
    }
    [HttpPost]
    public ActionResult GridData([DataSourceRequest]DataSourceRequest request)
    {
        var result = data
            .ToDataSourceResult(request);
        return Json(result);
    }
    [HttpPost]
    public ActionResult Create([DataSourceRequest]DataSourceRequest request, StudentViewModel model)
    {
        if (this.ModelState.IsValid)
        {
            // add to database
            // same for edit, delete
        }
        return Json(new[] { model }.ToDataSourceResult(request, this.ModelState));
    }
    [HttpPost]
    public ActionResult Update([DataSourceRequest]DataSourceRequest request, StudentViewModel model)
    {
        if (this.ModelState.IsValid)
        {
            // add to database
            // same for edit, delete
        }
        return Json(new[] { model }.ToDataSourceResult(request, this.ModelState));
    }
}

查看： 索引.cshtml

@using KendoUIDemos.Models
<h2>Kendo Grid</h2>
<div>
    @(Html.Kendo().Grid<StudentViewModel>()
    .Name("grKendo")
    .ToolBar(tools => tools.Create().Text("Create Student"))
    .ColumnMenu()
    .Columns(columnsFactory =>
    {
        columnsFactory.Bound(col => col.Id);
        columnsFactory.Bound(col => col.Name);
        columnsFactory.Bound(col => col.SomeDate).Title("Some Renamed Date").Sortable(true);
        columnsFactory.Command(com => com.Edit().Text("Edit Student"));
        columnsFactory.Command(com => com.Destroy().Text("Delete Student"));
    })
    .DataSource(data =>
    {
        data
        .Ajax()
        .Model(m => m.Id(student => student.Id))
        .PageSize(4)
        .Sort(sort => sort.Add(st => st.SomeDate))
        .Read(read => read.Action("GridData", "Kendo"))
        .Create(create => create.Action("Create", "Kendo"))
        .Update(edit => edit.Action("Update", "Kendo"))
        .Destroy(del => del.Action("Destroy", "Kendo"));
    })
    .ClientDetailTemplateId("notes-template")
    .Pageable(pageConfigurator =>
    {
        pageConfigurator.Refresh(true);
    })
    .Sortable(sort =>
    {
        sort
        .AllowUnsort(true)
        .SortMode(GridSortMode.MultipleColumn);
    })
    .Filterable()
    .Groupable()
    .Editable(edit => edit.Mode(GridEditMode.InLine)))
</div>
<script id="notes-template" type="text/kendo-tmpl">
    @(Html.Kendo()
       .Grid<NoteViewModel>()
       .Name("notes_grid_#=Id#")
       .DataSource(ds =>
       {
           //???????????? How should I configure the datasource so that the nested details for every row of the external grid
           //are populated initially from the Notes property of the StudentViewModel without calling the server for each student
       })
    )
</script>

Answer 1

我建议对视图进行以下更改

@using KendoUIDemos.Models
<h2>Kendo Grid</h2>
<div>
    @(Html.Kendo().Grid<StudentViewModel>()
    .Name("grKendo")
    .ToolBar(tools => tools.Create().Text("Create Student"))
    .ColumnMenu()
    .Columns(columnsFactory =>
    {
        columnsFactory.Bound(col => col.Id);
        columnsFactory.Bound(col => col.Name);
        columnsFactory.Bound(col => col.SomeDate).Title("Some Renamed Date").Sortable(true);
        columnsFactory.Command(com => com.Edit().Text("Edit Student"));
        columnsFactory.Command(com => com.Destroy().Text("Delete Student"));
    })
    .DataSource(data =>
    {
        data
        .Ajax()
        .Model(m => m.Id(student => student.Id))
        .PageSize(4)
        .Sort(sort => sort.Add(st => st.SomeDate))
        .Read(read => read.Action("GridData", "Kendo"))
        .Create(create => create.Action("Create", "Kendo"))
        .Update(edit => edit.Action("Update", "Kendo"))
        .Destroy(del => del.Action("Destroy", "Kendo"));
    })
    .ClientDetailTemplateId("notes-template")
    .Events(ge =>
    {
         ge.DetailInit("grKendo_onDetailInit");
    })
    .Pageable(pageConfigurator =>
    {
        pageConfigurator.Refresh(true);
    })
    .Sortable(sort =>
    {
        sort
        .AllowUnsort(true)
        .SortMode(GridSortMode.MultipleColumn);
    })
    .Filterable()
    .Groupable()
    .Editable(edit => edit.Mode(GridEditMode.InLine)))
</div>
<script id="notes-template" type="text/kendo-tmpl">
    @(Html.Kendo()
       .Grid<NoteViewModel>()
       .Name("notes_grid_#=Id#")
       .Columns(col =>
       {
          col.Bound(p => p.Discipline );
          col.Bound(p => p.Date );
          col.Bound(p => p.Grade);
       })
       .ToClientTemplate()
    )
</script>
<script type="text/javascript">
   function grKendo_onDetailInit(e) {
      var notesGrid = e.detailCell.find("[id^='notes_grid_']").data("kendoGrid");
      if (notesGrid) {
         notesGrid.dataSource.data(e.data.Notes);
      }
   }
</script>