or
var view = new kendo.View( templateId, { model: viewModel, show: function() { handleRenderDone(); } } );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>