0
Ich habe ein StudentViewModel, das ICollection < NotesViewModel> enthält. Ich möchte die Schüler in einem Kendo UI-Gitter und die Notizen für jeden Schüler in einem verschachtelten Detailraster zeigen. Ich kann dies genau wie im Beispiel des Telerik tun: http://demos.telerik.com/aspnet-mvc/grid/hierarchyKendo-Details-Raster aus einer Auflistungseigenschaft des externen Rastermodells auffüllen
Ich brauche alle Detail-Grids zunächst erweitert werden. Dies ist sehr einfach mit JavaScript-Funktion, um sie zu erweitern. Und das Problem hierbei ist, dass der Server einmal pro Zeile des Schülerrasters aufgerufen wird.
Ich bin auf der Suche nach einer Möglichkeit, dass alle Detailraster aus den Notes-Eigenschaften des StudentViewModel auf die anfängliche Auslastung des Rasters aufgefüllt werden, ohne den Server für jeden Schüler aufzurufen. Ich nehme an, dass ich die Datenquelle des inneren Gitters für einige benutzerdefinierte Weise konfigurieren muss, aber wie?
Im Moment habe ich den folgenden Code:
Modelle:
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; }
}
Controller:
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));
}
}
Ausblick: Index.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>