or
1.@model ComponentViewModel<T>2.@Html.Kendo().Grid<T>() ...01.@using System.Text.RegularExpressions02.@using App.Models03.@model ComponentViewModel04.@{05. var rootId = Model.TypeName + Model.ObjectId + "_Editor";06. var modelName = Model.TypeName + Model.ObjectId + "_EditorModel";07. var m = Activator.CreateInstance(Model.Type);08. var dependency = "emedia.dependency.get('" + Model.TypeName + "');";09.}10. 11.<div id="@(rootId)" class="component k-content" data-type="@Model.TypeName" data-item-id="@Model.ObjectId">12. <h2><span class="k-sprite edit"></span> @Regex.Replace(Model.Type.Name, @"(?<!_)([A-Z])", " $1"): @Model.ObjectId <img src="@Url.Content("~/Content/close.png")" /></h2>13. <script>14. $(function () {15. @if(Model.CustomDependencyExists)16. {17. @Html.Raw(dependency)18. }19. 20. var @modelName = emedia.createModel('@Model.TypeName', '@Model.ObjectId');21. var component = $("#@(rootId)");22. 23. kendo.bind(component, @modelName);24. $(".details", component).validate();25. });26. </script>27. <form class="details">28. <div data-description="non dynamic templated stuff">29. <input type="hidden" name="ID" data-rule-required="true" data-bind="value: ID" />30. </div>31. <ul class="fieldList">32. @{ Html.RenderPartial("EditorTemplates/Object", m); }33. </ul>34. <hr />35. <button class="k-button" data-bind="events: { click: save }">Save</button>36. </form>37.</div>... Notice the call to Html.RenderPartial where an instance of a T is then MVC templated, pretty neat huh, that works a treat!
All good so far.
So then I thought, ok lets take this a step a further and see if we can template grids, taking things slow I figured it best to start with non editable grids.
Following the same convention I did this ...
01.@using System.Text.RegularExpressions02.@using App.Models03.@model GridComponentViewModel04.@{05. var gridName = Model.TypeName + "Grid";06. var modelName = Model.TypeName + "Model";07. var dependency = "emedia.dependency.get('" + Model.TypeName + "');";08. var m = Activator.CreateInstance(Model.Type);09.}10. 11.<div class="component k-content" data-type="@Model.TypeName">12. <h2><span class="k-sprite folder"></span> @Regex.Replace(Model.TypeName, @"(?<!_)([A-Z])", " $1")s <img src="@Url.Content("~/Content/close.png")" /></h2>13. <script>14. $(function () {15. //TODO: add signalR behaviour to allow grid update notifications from the server16. @if(Model.CustomDependencyExists)17. {18. @Html.Raw(dependency)19. }20. 21. @(gridName)Change = function (arg) {22. if(typeof emedia.@(Model.TypeName).gridItemClick != 'undefined') {23. var grid = $("#@(gridName)").data("kendoGrid");24. var item = grid.dataItem(grid.select());25. emedia.@(Model.TypeName).gridItemClick(item);26. }27. };28. 29. var @modelName = emedia.createModel('@Model.TypeName');30. 31. $("#@(gridName)").kendoGrid({32. dataSource: @modelName,33. rowTemplate: kendo.Template.compile($("#@(Model.TypeName)Row").html()),34. selectable: "row",35. columns: emedia.type.columnsFor("@Model.TypeName"),36. change: @(gridName)Change,37. error: page.error38. });39. });40. </script>41. <script id="@(Model.TypeName)Row" type="text/x-kendo-template">42. @{ Html.RenderPartial("DisplayTemplates/Row", m); }43. </script>44. <div id="@(gridName)" class="details"></div>45.</div>01.<script id="BusinessTaskRow" type="text/x-kendo-template">02. <tr>03. <td><span data-bind="text: ID"></span></td>04. <td><a href="" data-ref-type="Workflow" data-bind="attr: { data-ref: WorkflowID }, events: { click: refClick }">View Workflow</a></td>05. <td><span data-bind="text: Title"></span></td>06. <td><pre data-bind="text: Description"></pre></td>07. <td><span data-format="dd MMM yyyy" data-bind="text: Created"></span></td>08. <td><span data-format="dd MMM yyyy" data-bind="text: Due"></span></td>09. <td><span data-bind="text: BusinessTaskStatusID"></span></td></td>10. </tr>11.</script><html> <head> <meta charset="utf-8" /> <title>OData CRUD</title> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script> </head> <body> <div id="grid"></div> <script> $(document).ready(function () { var crudServiceBaseUrl = "/Northwind.svc/Products", dataSource = new kendo.data.DataSource({ type: "odata", transport: { read: { url: crudServiceBaseUrl, dataType: "json" }, update: { url: function(data) { return crudServiceBaseUrl + "(" + data.ProductID + ")"; } }, create: { url: crudServiceBaseUrl }, destroy: { url: function(data) { return crudServiceBaseUrl + "(" + data.ProductID + ")"; } }, parameterMap: function (data, operation) { if (operation !== "read" && data.models) { //return { items: kendo.stringify(data.models) }; return { data: kendo.stringify(data.models) }; } } }, batch: true, pageSize: 10, serverPaging: true, schema: { data: "d", model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } }); $("#grid").kendoGrid({ dataSource: dataSource, height: 400, pageable: true, editable: true, toolbar: ["create", "save", "cancel"], columns: [ "ProductName", { field: "UnitPrice", format: "{0:c}", width: "150px" }, { field: "UnitsInStock", width: "150px" }, { field: "Discontinued", width: "100px" }, { command: ["destroy"], title: " ", width: "110px" }] }); }); </script> </body></html>