I have a master / detail grid with a custom add new button in the child inline record that popups up a partial view. I'm trying to understand why the add new child record doesn't appear on the UI.
Any help would be greatly appreciated.
-----
@{
ViewData["Title"] = "Vendor";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="mt-3">
<h3>Vendor</h3>
@(Html.Kendo().Grid<I2MS.Models.VendorViewModel>()
.Name("gridVendor")
.Columns(columns =>
{
columns.Bound(e => e.VendorID).Hidden(true);
columns.Bound(e => e.VendorCode).Filterable(false).Width(40);
columns.Bound(e => e.Name).Width(70).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
columns.Bound(e => e.Address).Filterable(false).Width(40);
columns.Bound(e => e.Address2).Filterable(false).Width(40);
columns.Bound(e => e.City).Filterable(false).Width(40);
columns.Bound(e => e.State).Filterable(false).Width(40);
columns.Bound(e => e.PostalCode).Filterable(false).Width(40);
columns.Template("<a title=\"Edit\" onclick=AddEditVendor(event);><img src='images/edit.png' alt='edit' /></a> <a role='button' title='Delete' onclick='onDeleteVendor(event)'><img src='images/delete.png' alt='delete' /></a>").Width(50);
})
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:600px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("HierarchyBinding_Vendor", "Vendor"))
.Model(model => { model.Id(i => i.VendorID); })
)
.Events(events => events.DataBound("dataBound"))
.ToolBar(toolbar =>
{
toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Vendor").HtmlAttributes(new { style = "float:right", id = "btnAddNewVendor", onclick = "AddEditVendor()" });
})
)
@(Html.Kendo().Window().Name("dlgAddEditVendor").Visible(false).Modal(true).Draggable(true))
@(Html.Kendo().Window().Name("dlgAddEditVendorContact").Visible(false).Modal(true).Draggable(true))
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<I2MS.Models.VendorContactViewModel>()
.Name("grid_#=VendorID#")
.Columns(columns =>
{
columns.Bound(o => o.VendorContactID).Hidden();
columns.Bound(o => o.FirstName).Width(40);
columns.Bound(o => o.LastName).Width(40);
columns.Bound(o => o.Phone).Width(40);
columns.Bound(o => o.Email).Width(40);
columns.Bound(o => o.Address).Width(40);
//columns.Bound(o => o.Address2).Width(200);
columns.Bound(e => e.City).Width(40);
columns.Bound(e => e.State).Width(40);
columns.Bound(e => e.PostalCode).Width(40);
columns.Template("<a title=\"Edit\" onclick=AddEditVendorContact(event,#=VendorID#);><img src='images/edit.png' alt='edit' /></a> <a role='button' title='Delete' onclick='onDeleteVendorContact(event,#=VendorID#)'><img src='images/delete.png' alt='delete' /></a>").Width(40);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_VendorContacts", "VendorContact", new { vendorID = "#=VendorID#" }))
.Model(model => { model.Id(i => i.VendorContactID); })
)
.ToolBar(toolbar =>
{
toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Vendor Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewVendorContact", onclick = "AddEditVendorContact(null,#=VendorID#)" });
})
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
</div>
<script>
var gridName = "";
function AddEditVendorContact(event, VendorID)
{
gridName = "grid_" + VendorID;
var window = $('#dlgAddEditVendorContact').data('kendoWindow');
if (event != null )
{
window.setOptions({ title: "Edit Vendor Contact" });
var dataItem = $("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr"));
var url = "@Url.Action("AddEditVendorContact", "VendorContact")" + "?VendorContactID=" + dataItem.VendorContactID + "&VendorID=" + VendorID;
MvcCommon.Kendo.ShowPartialViewInPopupWindow({
windowName: "dlgAddEditVendorContact",
windowWidth: 660,
windowHeight: 450,
url:url
});
}
else
{
window.setOptions({ title: "Add New Vendor Contact" });
var url = "@Url.Action("AddEditVendorContact", "VendorContact")" + "?VendorContactID=" + "&VendorID=" + VendorID;
MvcCommon.Kendo.ShowPartialViewInPopupWindow({
windowName: "dlgAddEditVendorContact",
windowWidth: 660,
windowHeight: 450,
url: url
});
}
}
function onDeleteVendorContact(event, VendorID)
{
if (confirm('Are you sure you want to delete this Record?'))
{
var gridName = "grid_" + VendorID;
var dataItem = JSON.stringify($("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr")));
if (dataItem && dataItem != null)
{
$.ajax({
cache: false,
type: 'POST',
dataType: 'JSON',
contentType: 'application/json; charset=utf-8',
data: dataItem,
url: '@Url.Action("DeleteVendorContact", "VendorContact")',
success: function (result) {
if (result && result.success == true) {
$('#' + gridName).data('kendoGrid').dataSource.read();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {},
complete: function (xhr, status) {}
});
}
}
}
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function AddEditVendor(e)
{
var window = $('#dlgAddEditVendor').data('kendoWindow');
if (e != null)
{
window.setOptions({ title: "Edit Vendor" });
var dataItem = $("#gridVendor").data('kendoGrid').dataItem($(e.currentTarget).closest("tr"));
var url = "@Url.Action("AddEditVendor", "Vendor", new { VendorID = "value" })".replace("value", dataItem.VendorID);
MvcCommon.Kendo.ShowPartialViewInPopupWindow({
windowName: "dlgAddEditVendor",
windowWidth: 660,
windowHeight: 365,
url:url
});
}
else
{
window.setOptions({ title: "Add New Vendor" });
var url = "@Url.Action("AddEditVendor", "Vendor", new { VendorID = "value" })".replace("value", "");
MvcCommon.Kendo.ShowPartialViewInPopupWindow({
windowName: "dlgAddEditVendor",
windowWidth: 660,
windowHeight: 365,
url:url
});
}
}
function onDeleteVendor(event)
{
if (confirm('Are you sure you want to this Record?'))
{
var dataItem = JSON.stringify($("#gridVendor").data('kendoGrid').dataItem($(event.currentTarget).closest("tr")));
if (dataItem && dataItem != null)
{
$.ajax({
cache: false,
type: 'POST',
dataType: 'JSON',
contentType: 'application/json; charset=utf-8',
data: dataItem,
url: '@Url.Action("DeleteVendor", "Vendor")',
success: function (result) {
if (result && result.success == true) {
$('#gridVendor').data('kendoGrid').dataSource.read();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {},
complete: function (xhr, status) {}
});
}
}
}
</script>
1 Answer, 1 is accepted
Hi TD,
Thank you for the provided code. Are there any errors in the browser's console when you run the project? Is everything in the Grid operating correctly except for the missing custom button?
Just to be sure we are talking about the same thing, the button you have issues with is the one from the detail Grid. Is this correct?
If the above is correct, based on the provided code, I would assume that there is an issue with the template defining the custom button. To be more specific, can you try escaping all "#" symbols inside the "template" kendo template with "\\". More about this escaping can be found in this Hash Literals article from our documentation.
toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Vendor Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewVendorContact", onclick = "AddEditVendorContact(null,\\#=VendorID\\#)" });
If the above doesn't resolve the issue and there are no errors in the browser's console, can you send me a runnable example in which the reported behavior can be replicated? If you don't want to publicly expose your code or project, you can submit a support ticket and we will handle the case in it.
Being able to replicate the reported behavior, we can further investigate the source of the issue.
Regards,
Petar
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.