or
<div data-role="grid" data-sortable="true" data-editable="true" data-columns="source: myColumns" data-bind="source: entities" data-row-template="rowTemplate"></div>var event_datasource = new kendo.data.DataSource({ transport: { read: { url: "/event/datawidget", dataType: "json", type: "POST" }, parameterMap: function(data) { return kendo.stringify(data); } }, schema: { data: "data", total: "total", model: { id: "event_id", fields: { event_id: { type: "number" }, description: { type: "string" } } } }, sort: { field: "description", dir: "desc" } pageSize: 10, serverFiltering: true, serverPaging: true});var event_widget = $("#event_id").kendoComboBox({ dataTextField: "description", dataValueField: "event_id", filter: "contains", minLength: 2, dataSource: event_datasource, placeholder: "Select an event", value: '99', text: 'Some event', change : function (e) { if (this.value() && this.selectedIndex == -1) this.value(null); // clears the selection when an invalid selection was made },
autoBind: false }).data('kendoComboBox');Html.Kendo().Window() .Name(windowId) .Width(680) .Height(430) .Title(Model.ChartTitle) .Visible(false) .Modal(true) .Draggable(true) .Animation(animation => { animation.Open(open => { open.Fade(FadeDirection.In); }); })01.function onCommitmentEdit(e) {02. console.log("onCommitmentEdit");03. //debugger;04. var cell = e.container;05. 06. var $bigStringEditor = cell.find(".big-string-editor");07. 08. if ($bigStringEditor.length == 1) {09. $bigStringEditor.keydown(function (ev) {10. stop(ev);11. });12. 13. 14. $bigStringEditor.mousedown(function (ev) {15. if (ev.button == 0) {16. ev.stopPropagation();17. }18. });19. 20. }21. 22. //debugger;23. switch (cell[0].cellIndex) {24. case PROJECT_COLUMN:25. //only enabled if Type = "Separately Budgeted"26. if (e.model.CommitmentTypeId != 3) {27. this.closeCell();28. }29. break;30. case OFF_TRACK_IMPLICATION_COLUMN:31. //only enabled if Execution is "Behind" or "Failing", or Budget= "Over"32. if (e.model.CommitmentStatusTypeId != 3 && e.model.CommitmentStatusTypeId != 4 && e.model.BudgetStatusTypeId != 1) {33. this.closeCell();34. }35. break;36. case DEPARTMENTS_INVOLVED_COLUMN:37. //only enabled if Cross Department = True38. if (!e.model.CrossDepartment) {39. this.closeCell();40. }41. break;42. case CANCEL_OK_COLUMN:43. //only enabled if Execution is "Cancelled"44. if (e.model.CommitmentStatusTypeId != 6) {45. this.closeCell();46. }47. break;48. 49. }50. e.model.SubGroupId = getSubGroupIdVal();51. e.model.DashboardId = getDashBoardIdVal();52. 53. }01.namespace ProofOfConcept.BO02.{03. public class Ticket04. {05. public int ID { get;set; }06. public int CategoryID { get;set; }07. public string Name { get;set; }08. public string Content { get;set; }09. public DateTime DateSubmitted { get;set; }10. }11. 12. public class Category13. {14. public int ID { get;set; }15. public string Name { get;set; }16. public List<Ticket> Tickets { get;set; }17. }18.}01.namespace ProofOfConcept.JSONModels02.{03. 04. public class Ticket05. {06. // Key values are encrypted into a string before being sent to the client07. public string ID { get;set; }08. public string CategoryID { get;set; }09. public string Name { get;set; }10. public string Content { get;set; }11. 12. // I would prefer a DateTime value but I don't know if 13. // converting the value and displaying it properly is supported14. public string DateSubmitted { get; set; }15. }16. 17. public class Category18. {19. // Key values are encrypted into a string before being sent to the client20. public string ID { get;set; }21. public string Name { get;set; }22. 23. // I read that the property for the nested object(s) should 24. // be removed from the JSON model -- is this correct? 25. // public List<Ticket> Tickets { get;set; }26. }27. 28.}01.[02. {03. "ID": "1",04. "Name": "CategoryName1",05. "Tickets": [06. {07. "ID": "10",08. "Name": "name value",09. "CategoryID": "1",10. "Content": "content here",11. "DateSubmitted": "serialized DateTime here"12. },13. {14. "ID": "11",15. "Name": "name value",16. "CategoryID": "1",17. "Content": "content here",18. "DateSubmitted": "serialized DateTime here"19. },20. {21. "ID": "12",22. "Name": "name value",23. "CategoryID": "1",24. "Content": "content here",25. "DateSubmitted": "serialized DateTime here"26. }27. ]28. }, // ... Removed for readability29.]01.$(document).ready(function ()02.{03. // Objects are defined individually as I want to create04. // a single file with all object definitions so that other05. // developers can recycle them.06. var Ticket = kendo.data.Model.define(07. {08. id: "ID",09. fields:10. {11. ID: { type: "string" },12. CategoryID: { type: "string" },13. Name: { type: "string" },14. Content: { type: "string" },15. 16. // Is there a Date (or DateTime) type?17. DateSubmitted: { type: "string" },18. hasChildren: false19. }20. });21. 22. var Category = kendo.data.Model.define(23. {24. id: "ID",25. fields:26. {27. ID: { type: "string" },28. Name: { type: "string" },29. hasChildren: true,30. children: Tickets31. }32. });33. 34. // The ID of the Category is passed to the handler 35. // in this format: Tickets.ashx?CID=236. // If possible, I'd also like to pass the ID of the ticket, 37. // Tickets.ashx?ID=44 which would return the full Ticket (ie: with Content)38. var Tickets = 39. {40. transport:41. {42. read:43. {44. url: "Tickets.ashx",45. type: "GET",46. dataType: "json",47. contentType: "application/json; charset=utf-8"48. }49. },50. schema: 51. {52. data: "d",53. model: Ticket54. }55. };56. 57. 58. var Categories = new kendo.data.HierarchicalDataSource(59. {60. transport: 61. {62. read:63. {64. url: "Categories.ashx",65. type: "GET",66. dataType: "json",67. contentType: "application/json; charset=utf-8"68. }69. },70. schema: 71. {72. data: "d",73. model: Category74. }75. });76. 77. 78. var viewModel = kendo.observableHierarchy(79. {80. Categories: Categories81. });82. 83. kendo.bind($("#divCategory"), viewModel);84. 85.});01.<section>02. 03. <div id="divCategory" data-template="category-template" data-bind="source: Categories" >04. <ul data-template="ticket-template" data-bind="source: Tickets" id="divTicket">05. </ul>06. </div>07. 08. <script id="category-template" type="text/x-kendo-template">09. <h2 data-bind="text: Name"></h2>10. </script>11. 12. <script id="ticket-template" type="text/x-kendo-template">13. <li>14. <a data-bind="attr: { href: ID }">15. <span data-bind="text: Name" ></span>16. </a>17. <span data-bind="text: DateSubmitted" ></span>18. </li>19. </script>20. 21.</section>