I'm having trouble with getting a inline cell drop-down that's in a grid, inside a tab strip which is for a pop-up editor for another grid (complicated I know).
The drop-down in question that is causing the error is called "NoteType"
The error I keep getting is the following:
VM1563:1 Uncaught SyntaxError: Invalid or unexpected token
at eval (<anonymous>)
at eval (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:2651)
at Function.globalEval (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:2662)
at Ha (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:53272)
at n.fn.init.append (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:54801)
at M.fn.init.n.fn.(anonymous function) [as appendTo] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:56520)
at init._createPopupEditor (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:21766)
at init.editRow (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:19002)
at HTMLAnchorElement.eval (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:14868)
at HTMLDivElement.dispatch (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:44454)
(anonymous) @ jquery.min.js:1
globalEval @ jquery.min.js:1
Ha @ jquery.min.js:1
append @ jquery.min.js:1
n.fn.(anonymous function) @ jquery.min.js:1
_createPopupEditor @ kendo.all.min.js:24
editRow @ kendo.all.min.js:24
(anonymous) @ kendo.all.min.js:24
dispatch @ jquery.min.js:1
r.handle @ jquery.min.js:1
Here is my parent grid - Index.cshtml
---------------------------------------
@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;
@model PatientViewModel
@{
ViewBag.Title = "Patients";
}
<h3>Patients</h3>
@(Html.Kendo().Grid(Model.Patients)
.Name("patientGrid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Title("First Name").Filterable(true);
columns.Bound(p => p.LastName).Title("Last Name").Filterable(true);
columns.Bound(p => p.PatientId).Visible(false);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Patient")
.Window(w => w.Title("Edit Patient").Name("Patient").Width(800))
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(3))
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(false)
.PageSize(20)
.Model(model =>
{
model.Id(patient => patient.PatientId);
model.Field(e => e.PatientNotes).DefaultValue(new List<PatientNoteModel>());
})
.Read(read => read.Action("GetPatients", "Patient"))
.Create(create => create.Action("EditingPopup_Create", "Patient"))
.Update(update => update.Action("EditingPopup_Update", "Patient"))
.Destroy(delete => delete.Action("EditingPopup_Delete", "Patient"))
.Events(e =>
{
e.RequestEnd("onGridDataSourceRequestEnd");
e.Error("onError");
e.Change("Grid_OnRowSelect");
})
.Sort(sort => sort.Add("FullName"))
)
)
<script type="text/javascript">
function onError(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function onGridDataSourceRequestEnd(e) {
// Check request type
if (e.type == "create" || e.type == "update") {
//check for errors in the response
if (e.response == null || e.response.Errors == null) {
$('#patientGrid').data().kendoGrid.dataSource.read();
}
else {
alert("Update Failed");
}
}
}
function Grid_OnRowSelect(e) {
if (e != null) {
if (e.index != null && e.items != null) {
var model = e.items[e.index];
$.post("Patient/SetPatientId", { patientId: model.id }, function (r) {
if (r.Status != "Success") {
alert("Issue with patient")
}
});
}
}
}
</script>
<style>
.k-header.k-grid-toolbar, .k-button.k-button-icontext.k-grid-add, .k-window-titlebar.k-header {
background-color: #393536;
border-color: #605d5e;
}
.k-button.k-button-icontext.k-grid-add:hover {
background-color: #605d5e;
border-color: #4c494a;
}
</style>
Here is my pop-up editor template - _Patient.cshtml
---------------------------------------
@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;
<div style="width:800px;">
@(Html.Kendo().TabStrip().Animation(false)
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Patient Information")
.Selected(true)
.Content(@<text>
<div style="width:100%">
@Html.HiddenFor(m => m.PatientId)
@Html.HiddenFor(m => m.ClinicId)
<div style="float:left; width:300px;">
<div class="editor-label">
@Html.LabelFor(m => m.FirstName)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.FirstName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.FirstName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.MiddleName)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.MiddleName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.MiddleName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.LastName)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.LastName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.LastName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Address1)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.Address1).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Address1)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Address2)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.Address2).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Address2)
</div>
</div>
<div style="float:left; width:300px;">
<div class="editor-label">
@Html.LabelFor(m => m.City)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.City).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.City)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.State)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.State).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.State)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Zip)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.Zip).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Zip)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.HomePhone)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.HomePhone).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.HomePhone)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.CellPhone)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.CellPhone).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.CellPhone)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Email)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Email)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.PreferContact)
</div>
<div class="editor-field">
@(Html.Kendo().DropDownListFor(m => m.PreferContact)
.HtmlAttributes(new { style = "width:100%" })
.DataTextField("Name")
.DataValueField("Name")
.DataSource(ds =>
{
ds.Read(read => read.Action("GetModeContact", "Patient"));
})
.AutoBind(true)
)
@Html.ValidationMessageFor(m => m.PreferContact)
</div>
</div>
<div style="clear:both"></div>
</div>
</text>);
tabstrip.Add().Text("Insurance").Content(@<text>
<div style="width:100%">
<div class="editor-label">
@Html.LabelFor(m => m.InsuranceCompany)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.InsuranceCompany).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsuranceCompany)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.InsuranceGroupNumber)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.InsuranceGroupNumber).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsuranceGroupNumber)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.InsurancePolicyNumber)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.InsurancePolicyNumber).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsurancePolicyNumber)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.InsurancePolicyHolderName)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(m => m.InsurancePolicyHolderName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsurancePolicyHolderName)
</div>
</div>
</text>);
tabstrip.Add().Text("Therapy Note").Content(@<text>
<div style="width:100%">
@(Html.Kendo().Grid(Model.PatientNotes)
.Name("PatientNote")
.Sortable()
.Columns(cols =>
{
cols.Bound(b => b.NoteType).ClientTemplate(
(Html.Kendo().DropDownList()
.Name("NoteType")
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetNoteTypes", "Patient");
});
})
).ToClientTemplate().ToHtmlString());
cols.Bound(b => b.Note);
cols.Bound(b => b.EnteredBy);
cols.Bound(b => b.EnteredOn);
})
.ToolBar(toolbar => toolbar.Create())
.Editable( ed => ed.Mode(GridEditMode.InCell))
// .AutoBind(false)
.DataSource(ds => ds.Ajax().Model(mo =>
{
mo.Id(m => m.PatientNoteId);
mo.Field(f => f.PatientNoteId).Editable(false);
mo.Field(f => f.PatientId).Editable(false);
mo.Field(f => f.NoteType).Editable(true);
mo.Field(f => f.Note).Editable(true);
mo.Field(f => f.Version).Editable(false);
mo.Field(f => f.EnteredBy).Editable(false);
mo.Field(f => f.EnteredOn).Editable(false);
})
.Read(read => read.Action("GetPatientNotes", "Patient"))
.Create(create => create.Action("EditingPopup_PatientNoteCreate", "Patient"))
)
.ToClientTemplate()
)
</div>
</text>);
}))
</div>
@model PatientModel
1 Answer, 1 is accepted
Thank you for the provided information.
After inspecting it I noticed the DropDown is initialized inside the ClientTemplate which is not supported as the ClientTemplate is used for display purposes only, and it is executed on the client which may be causing the syntax error having in mind that the ClientTemplate contains Razor.
We have an example of hierarchical Grid with editing and a DropDown editor which can be helpful and used for reference:
https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/edit-three-level-hierarchical-grid
Also, the following article in regards to the DropDown editors can be helpful as well:
https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates
I hope this will help to achieve the desired result.
Regards,
Stefan
Progress Telerik