or
<kendo-grid id="reportGrid" k-sortable="true" k-pageable="true" k-filterable="true" k-resizeable="true" k-selectable="'row'" k-options="reportGridOptions"></kendo-grid>$scope.reportGridOptions = { dataSource: { transport: { read: function (options) { $.ajax({ url: "/Home/GetReports", dataType: "json", success: function (result) { options.success(result); } }); }, update: function (options) { $.ajax({ url: "/Home/UpdateReport", dataType: "json", type: "post", data: options.data, success: function (result) { options.success(result); }, error: function (result) { options.error(result) alert("An error occurred updating the report"); } }); }, create: function (options) { $.ajax({ url: "/Home/UpdateReport", dataType: "json", type: "post", data: options.data, success: function (result) { options.success(result); }, error: function (result) { options.error(result) alert("An error occurred creating the report"); } }); }, batch: false, pageSize: 10, schema: { model: { id: "id", fields: { id: { type: "number", editable: false, nullable: true, defaultValue: 0 }, name: { type: "string", validation: { required: true } }, reportTypeId: { type: "number", validation: { required: true } }, reportType: { type: "string" }, reportDt: { type: "date", validation: { required: true } }, releasedDt: { type: "date" }, updatedBy: { type: "string", editable: false, nullable: true }, updatedDtTm: { type: "date", editable: false, nullable: true }, rowVersion: { type: "string", editable: false, nullable: true }, } } }, sort: [{ field: "reportDt", dir: "asc" }] }, error: function (e) { // The error message returned will contain the name of the procedure followed by a colon followed by the error message; // <procedure name>:<errorr1></br><error2>...</br><errorn> var err = e.errorThrown.split(":"); console.log(err[0]); console.log(err[1]); // Set the error title and message then display the modal error dialogue... $scope.formData.errorTitle = err[0]; $scope.formData.errorMsg = err[1]; // If the changes aren't "applied" the dialogue won't contain the title and the message... $scope.$apply(); // Display the error... $('#errorDialogue').modal('show'); } }, //height: "500px", toolbar: ["create"], editable: { mode: "inline", update: true, destroy: false }, columns: [ { field: "reportTypeId", title: "Rpt Type ID", width: "100px" }, { field: "reportType", title: "Report Type", width: "100px", editor: '<input name="\'reportTypeId\'" kendo-drop-down-list required k-data-text-field="\'name\'" k-data-value-field="\'id\'" k-data-source="lstRptTypes" data-bind="value:' + "reportTypeId" + '"/>' }, { field: "name", title: "Report Name", width: "200px" }, { field: "reportDt", title: "Report Date", format: "{0:d MMM yyyy}", width: "125px" }, { field: "releasedDt", title: "Released", format: "{0:d MMM yyyy}", width: "125px" }, { command: ["edit"], title: " ", width: "220px" } ]};dataSource: { transport: { read: { url: "/Home/GetReports", dataType: "json", type: "post" }, update: { url: "/Home/UpdateReport", dataType: "json", type: "post" }, create: { url: "/Home/UpdateReport", dataType: "json", type: "post" }, batch: false, pageSize: 10, schema: { model: { id: "id", fields: { // Field data types are String (default), Number, Boolean or Date... id: { type: "number", editable: false, nullable: true, defaultValue: 0 }, name: { type: "string", validation: { required: true } }, reportTypeId: { type: "number", validation: { required: true } }, reportType: { type: "string" }, //, validation: { required: true }, defaultValue: { reportTypeId: 1, reportName: "Phase 1" } reportDt: { type: "date", validation: { required: true } }, releasedDt: { type: "date" }, updatedBy: { type: "string", editable: false, nullable: true }, updatedDtTm: { type: "date", editable: false, nullable: true }, rowVersion: { type: "string", editable: false, nullable: true }, } } }, sort: [{ field: "reportDt", dir: "asc" }] }, error: function (e) { // The error message returned will contain the name of the procedure followed by a colon followed by the error message; // <procedure name>:<errorr1></br><error2>...</br><errorn> var err = e.errorThrown.split(":"); console.log(err[0]); console.log(err[1]); // Set the error title and message then display the modal error dialogue... $scope.formData.errorTitle = err[0]; $scope.formData.errorMsg = err[1]; // If the changes aren't "applied" the dialogue won't contain the title and the message... $scope.$apply(); // Display the error... $('#errorDialogue').modal('show'); }},@(Html.Kendo().Grid(Model.ExpenseModels) .Name("ExpenseGrid") .DataSource(ds => ds .Ajax() .PageSize(5) .ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side .Model(model => { // the unique identifier (primary key) of the model model.Id(m => m.ExpenseId); model.Field(f => f.ExpenseId).Editable(false); }) .Read(read => read.Action("GetExpenses", "Warehouse") ) ) .Columns(c => { c.Bound(p => p.ExpenseId).Hidden(); c.Bound(p => p.DriverId).Hidden(); c.Bound(p => p.DriverName).Title("Contractor"); c.Bound(p => p.InvoiceNumber) .ClientTemplate(Ajax.ActionLink( "#= InvoiceNumber #", "ExpenseDetail", @ViewContext.RouteData.Values["controller"].ToString(), new { @id = "#= ExpenseId #", @statusType = @Model.StatusType }, new AjaxOptions { UpdateTargetId = "targetDiv" } ) .ToHtmlString()); c.Bound(p => p.InvoiceDate); c.Bound(p => p.TotalSubmitted); c.Bound(p => p.DateSubmitted); }) .Pageable(pager => pager.PageSizes(true)) // Enable paging)public ActionResult ExpenseDetail(int? id, string statusType) { ExpenseViewModel viewModel = new ExpenseViewModel(); viewModel.SetStatusType(statusType); viewModel.ExpenseModels = GetExpenses(viewModel.StatusType); // load viewModel.ExpenseModel = LoadExpense(id); if (viewModel.StatusType == StatusType.Return) return View("ReturnedForm", viewModel); else return View("_ExpenseItemDetail", viewModel.ExpenseModel); }@using DriverPayroll.BusinessEntities.Enums;@model DriverPayroll.WebUI.Areas.Expense.Models.ExpenseViewModel<h4>Expenses Submitted for Approval</h4><div class="row" style="padding: 1em 0em"> <div class="col-md-12"> @Html.Partial("_ExpenseGrid", Model) </div></div><div id="targetDiv">This is the Expense Grid target div.</div>Unhandled exception at line 10643, column 7342 in eval code0x800a139e - JavaScript runtime error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td style="display:none" role='gridcell'>#:data.ExpenseId==null?'':data.ExpenseId#</td><td style="display:none" role='gridcell'>#:data.DriverId==null?'':data.DriverId#</td><td role='gridcell'>#:data.DriverName==null?'':data.DriverName#</td><td role='gridcell'><a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#targetDiv" href="/Expense/Warehouse/ExpenseDetail/#= ExpenseId #?statusType=Submit">#= InvoiceNumber #</a></td><td role='gridcell'>#:kendo.format("{0:d\}",data.InvoiceDate==null?'':data.InvoiceDate)#</td><td role='gridcell'>#:kendo.format("{0:C\}",data.TotalSubmitted==null?'':data.TotalSubmitted)#</td><td role='gridcell'>#:kendo.format("{0:d\}",data.DateSubmitted==null?'':data.DateSubmitted)#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td style="display:none" role=\'gridcell\'>'+$kendoHtmlEncode(data.ExpenseId==null?'':data.ExpenseId)+'</td><td style="display:none" role=\'gridcell\'>'+$kendoHtmlEncode(data.DriverId==null?'':data.DriverId)+'</td><td role=\'gridcell\'>'+$kendoHtmlEncode(data.DriverName==null?'':data.DriverName)+'</td><td role=\'gridcell\'><a data-ajax="true" data-ajax-mode="replace" data-ajax-update="';targetDiv" href="/Expense/Warehouse/ExpenseDetail/;$kendoOutput+='= ExpenseId ';?statusType=Submit">;$kendoOutput+='= InvoiceNumber ';</a></td><td role='gridcell'>;$kendoOutput+=':kendo.format("{0:d}",data.InvoiceDate==null?\'\':data.InvoiceDate)';</td><td role='gridcell'>;$kendoOutput+=':kendo.format("{0:C}",data.TotalSubmitted==null?\'\':data.TotalSubmitted)';</td><td role='gridcell'>;$kendoOutput+=':kendo.format("{0:d}",data.DateSubmitted==null?\'\':data.DateSubmitted)';</td></tr>;$kendoOutput+=;}return $kendoOutput;'