I have a grid with a nested TabStrip and a Grid nested in the TabStrip. Everything works fine until I add in-line editing to the nested tabstrip grid then I get :
Uncaught ReferenceError: CONTACT_ID is not defined. Any help would be appreciated Heres my code.
@using Kendo.Mvc.UI
@{
ViewBag.Title = "ManageAlarms";
}
<h2>ManageAlarms</h2>
@section PageSpecificNavBarLinks
{
@Html.Partial("~/Views/Shared/_PageSpecificNavBarLinks.cshtml")
}
@(Html.Kendo().Grid<ALARM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ALARM_ID).Visible(false);
columns.Bound(p => p.FIELD_NAME).Visible(true).Title("Alarm Name");
columns.Bound(p => p.OBJECT_TYPE).Visible(true).Title("Type");
columns.Bound(p => p.OBJECT_ID).Visible(true).Title("Object ID");
columns.Bound(p => p.THRESHOLD_LOWER).Visible(true).Title("Threshold Lower");
columns.Bound(p => p.THRESHOLD_UPPER).Visible(true).Title("Threshold Upper");
columns.Bound(p => p.IS_ACTIVE).Visible(true).Title("ON/OFF");
columns.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new {style = "height:800px;"})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ALARM_ID))
.Model(model => model.Field(p => p.FIELD_NAME).Editable(false))
.Model(model => model.Field(p => p.OBJECT_TYPE).Editable(false))
.Model(model => model.Field(p => p.OBJECT_ID).Editable(false))
.Model(model => model.Field(p => p.THRESHOLD_LOWER).Editable(true))
.Model(model => model.Field(p => p.THRESHOLD_UPPER).Editable(true))
.Model(model => model.Field(p => p.IS_ACTIVE).Editable(true))
.Read(read => read.Action("GetAllAlarms", "Alarm"))
.Update(update => update.Action("EditingInline_Update", "Alarm"))
)
)
<script id="template" type="text/kendo-tmpl" >
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=ALARM_ID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.HtmlAttributes((new {style = "width:1000px;"}))
.Items(items =>
{
items.Add().Text("Email List").Content(@<text>
@(Html.Kendo().Grid<AllworxCRAModel.CONTACT>()
.Name("grid_#=ALARM_ID#")
.Columns(columns =>
{
columns.Bound(o => o.CONTACT_ID).Visible(false);
columns.Bound(o => o.FIRST_NAME).Title("First Name");
columns.Bound(o => o.LAST_NAME).Title("Last Name");
columns.Bound(o => o.EMAIL).Title("Email");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes((new {style = "width:950px;"}))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.CONTACT_ID))
.Model(model => model.Field(p => p.FIRST_NAME).Editable(true))
.Model(model => model.Field(p => p.LAST_NAME).Editable(true))
.Model(model => model.Field(p => p.EMAIL).Editable(true))
//.Create(update => update.Action("EditingInline_Create", "Alarm"))
.Read(read => read.Action("GetEmailList", "Alarm", new {alarmID = "#=ALARM_ID#"}))
.Update(update => update.Action("EditingInline_Update", "Alarm", new {alarmID = "#=ALARM_ID#"}))
.Destroy(update => update.Action("EditingInline_Destroy", "Alarm", new {contactId = "#=CONTACT_ID#", alarmID = "#=ALARM_ID#"}))
).ToClientTemplate()
)
</text>
);
items.Add().Text("Add Contact").Content(
@<text>
<fieldset>
<legend style="color:blue;font-weight:bold;">Add New Contact</legend>
<table>
<tr>
<td><span style="text-decoration:underline">F</span>irst Name:</td>
<td><input type="text" name='firstName#=ALARM_ID#' id='firstName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
<tr>
<td><span style="text-decoration:underline">L</span>ast Name:</td>
<td><input type="text" name='lastName#=ALARM_ID#' id='lastName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
<tr>
<td><span style="text-decoration:underline">E</span>mail Address:</td>
<td><input type="text" name='email#=ALARM_ID#' id='email#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend style="color:blue;font-weight:bold;">Select From Existing Contact</legend>
@(Html.Kendo().DropDownList()
.Name("email_#=ALARM_ID#")
.OptionLabel("Select a contact...")
.DataTextField("EmailName")
.DataValueField("EmailID")
.HtmlAttributes(new {style = "width:400px"})
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetEmailAddress", "DropdownMenus", new {area = "Shared"});
});
}).ToClientTemplate()
)
</fieldset>
<button onclick="onSubmit('#=ALARM_ID#')">Add Contact</button>
</text>
);
}).ToClientTemplate()
)
</script>
<script>
$(document).ready(function () {
});
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function onSubmit(data) {
var alarmid = data.toString();
var firstname = $("input#firstName" + alarmid).val();
var lastname = $("input#lastName" + alarmid).val();
var email = $("input#email" + alarmid).val();
var dropdownlist = $("#email_" + alarmid).data("kendoDropDownList");
var emailDropdown = dropdownlist.text();
$.ajax({
type: 'POST',
data: JSON.stringify({ fname: firstname, lname: lastname, email: email, alarmId: alarmid }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
url: '/Alarm/AddContact',
complete: function (msg) {
if (msg.responseText == "Success") {
$("input#firstName" + alarmid).val("");
$("input#lastName" + alarmid).val("");
$("input#email" + alarmid).val("");
$("#email_" + alarmid).val("").data("kendoDropDownList").text("Select a contact...");
}
}
});
}
</script>
<style scoped="scoped">
.k-detail-cell .k-tabstrip .k-content {
padding: 0.2em;
}
.contact-details ul
{
list-style:none;
font-style:italic;
margin: 15px;
padding: 0;
}
.contact-details ul li
{
margin: 0;
line-height: 1.7em;
}
.contact-details label
{
display:inline-block;
width:90px;
padding-right: 10px;
text-align: right;
font-style:normal;
font-weight:bold;
}
</style>
<script type="text/javascript">
function error_handler(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);
}
}
</script>
Uncaught ReferenceError: CONTACT_ID is not defined. Any help would be appreciated Heres my code.
@using Kendo.Mvc.UI
@{
ViewBag.Title = "ManageAlarms";
}
<h2>ManageAlarms</h2>
@section PageSpecificNavBarLinks
{
@Html.Partial("~/Views/Shared/_PageSpecificNavBarLinks.cshtml")
}
@(Html.Kendo().Grid<ALARM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ALARM_ID).Visible(false);
columns.Bound(p => p.FIELD_NAME).Visible(true).Title("Alarm Name");
columns.Bound(p => p.OBJECT_TYPE).Visible(true).Title("Type");
columns.Bound(p => p.OBJECT_ID).Visible(true).Title("Object ID");
columns.Bound(p => p.THRESHOLD_LOWER).Visible(true).Title("Threshold Lower");
columns.Bound(p => p.THRESHOLD_UPPER).Visible(true).Title("Threshold Upper");
columns.Bound(p => p.IS_ACTIVE).Visible(true).Title("ON/OFF");
columns.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new {style = "height:800px;"})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ALARM_ID))
.Model(model => model.Field(p => p.FIELD_NAME).Editable(false))
.Model(model => model.Field(p => p.OBJECT_TYPE).Editable(false))
.Model(model => model.Field(p => p.OBJECT_ID).Editable(false))
.Model(model => model.Field(p => p.THRESHOLD_LOWER).Editable(true))
.Model(model => model.Field(p => p.THRESHOLD_UPPER).Editable(true))
.Model(model => model.Field(p => p.IS_ACTIVE).Editable(true))
.Read(read => read.Action("GetAllAlarms", "Alarm"))
.Update(update => update.Action("EditingInline_Update", "Alarm"))
)
)
<script id="template" type="text/kendo-tmpl" >
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=ALARM_ID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.HtmlAttributes((new {style = "width:1000px;"}))
.Items(items =>
{
items.Add().Text("Email List").Content(@<text>
@(Html.Kendo().Grid<AllworxCRAModel.CONTACT>()
.Name("grid_#=ALARM_ID#")
.Columns(columns =>
{
columns.Bound(o => o.CONTACT_ID).Visible(false);
columns.Bound(o => o.FIRST_NAME).Title("First Name");
columns.Bound(o => o.LAST_NAME).Title("Last Name");
columns.Bound(o => o.EMAIL).Title("Email");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes((new {style = "width:950px;"}))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.CONTACT_ID))
.Model(model => model.Field(p => p.FIRST_NAME).Editable(true))
.Model(model => model.Field(p => p.LAST_NAME).Editable(true))
.Model(model => model.Field(p => p.EMAIL).Editable(true))
//.Create(update => update.Action("EditingInline_Create", "Alarm"))
.Read(read => read.Action("GetEmailList", "Alarm", new {alarmID = "#=ALARM_ID#"}))
.Update(update => update.Action("EditingInline_Update", "Alarm", new {alarmID = "#=ALARM_ID#"}))
.Destroy(update => update.Action("EditingInline_Destroy", "Alarm", new {contactId = "#=CONTACT_ID#", alarmID = "#=ALARM_ID#"}))
).ToClientTemplate()
)
</text>
);
items.Add().Text("Add Contact").Content(
@<text>
<fieldset>
<legend style="color:blue;font-weight:bold;">Add New Contact</legend>
<table>
<tr>
<td><span style="text-decoration:underline">F</span>irst Name:</td>
<td><input type="text" name='firstName#=ALARM_ID#' id='firstName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
<tr>
<td><span style="text-decoration:underline">L</span>ast Name:</td>
<td><input type="text" name='lastName#=ALARM_ID#' id='lastName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
<tr>
<td><span style="text-decoration:underline">E</span>mail Address:</td>
<td><input type="text" name='email#=ALARM_ID#' id='email#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend style="color:blue;font-weight:bold;">Select From Existing Contact</legend>
@(Html.Kendo().DropDownList()
.Name("email_#=ALARM_ID#")
.OptionLabel("Select a contact...")
.DataTextField("EmailName")
.DataValueField("EmailID")
.HtmlAttributes(new {style = "width:400px"})
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetEmailAddress", "DropdownMenus", new {area = "Shared"});
});
}).ToClientTemplate()
)
</fieldset>
<button onclick="onSubmit('#=ALARM_ID#')">Add Contact</button>
</text>
);
}).ToClientTemplate()
)
</script>
<script>
$(document).ready(function () {
});
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function onSubmit(data) {
var alarmid = data.toString();
var firstname = $("input#firstName" + alarmid).val();
var lastname = $("input#lastName" + alarmid).val();
var email = $("input#email" + alarmid).val();
var dropdownlist = $("#email_" + alarmid).data("kendoDropDownList");
var emailDropdown = dropdownlist.text();
$.ajax({
type: 'POST',
data: JSON.stringify({ fname: firstname, lname: lastname, email: email, alarmId: alarmid }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
url: '/Alarm/AddContact',
complete: function (msg) {
if (msg.responseText == "Success") {
$("input#firstName" + alarmid).val("");
$("input#lastName" + alarmid).val("");
$("input#email" + alarmid).val("");
$("#email_" + alarmid).val("").data("kendoDropDownList").text("Select a contact...");
}
}
});
}
</script>
<style scoped="scoped">
.k-detail-cell .k-tabstrip .k-content {
padding: 0.2em;
}
.contact-details ul
{
list-style:none;
font-style:italic;
margin: 15px;
padding: 0;
}
.contact-details ul li
{
margin: 0;
line-height: 1.7em;
}
.contact-details label
{
display:inline-block;
width:90px;
padding-right: 10px;
text-align: right;
font-style:normal;
font-weight:bold;
}
</style>
<script type="text/javascript">
function error_handler(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);
}
}
</script>