Hi,
We have a grid mvc which use a TemplateName property to Popup window, the template named="ETOrdenDetail", this template contains another GridMVC, and one of columns use an Edit Template into column "columns.Bound(c => c.ITEM.ITEMNO_ITEMDESC).Title("Item").EditorTemplateName("ETItem");".
So if we run the Project we receive an error, here details:
Main view: ListOrden
@(Html.Kendo().Grid<NEW.Models.VW_ORDENHD>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ORDERID).Visible(false);
columns.Bound(c => c.ORDERNO).Title("Orden #");
columns.Bound(c => c.FECHA_ENTREGA).Title("Entregar el");
columns.Bound(c => c.CONTACTO).Title("Contacto");
columns.Bound(c => c.EMAIL).Title("Email");
columns.Bound(c => c.OBSERVACION).Title("Observacion").Filterable(false);
columns.Bound(c => c.ACTIVO.DESCRIPCION);
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { style = "background-color:#81DAF5; border-color:#A4A4A4" });
command.Destroy().HtmlAttributes(new { style = "background-color:#81DAF5; border-color:#A4A4A4" });
//command.Custom("fnEditAcciones").Text("Editar");
//command.Custom("fnEditAcciones").Text("Eliminar");
});
})
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.ToolBar(toolbar =>
{
toolbar.Create().Text("Agregar Orden").HtmlAttributes(new { style = "background-color:#A0C331; border-color:#A4A4A4" });
})
//.Groupable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ETOrdenDetail").Window(w=>w.Title("Orden de Compra")))
.Events(events =>
{
events.Edit("fnEditAcciones");
events.Save("fnSaveAcciones");
events.Remove("fnRemoveAcciones");
events.DataBound("fnDataBound");
})
.Filterable(m => m.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(3))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ORDERID);
model.Field(p => p.ACTIVO).DefaultValue(
ViewData["cmbACTIVODefault"] as NEW.Models.VW_ACTIVO
);
})
.PageSize(8)
.Read(read => read.Action("GetOrdenesHD", "Orden"))
.Create(update => update.Action("AddOrdenHD", "Orden"))
.Update(delete => delete.Action("ActualizarOrdenHD", "Orden"))
.Destroy(destroy => destroy.Action("BorrarOrdenHD", "Orden"))
)
)
Template for Popup: ETOrdenDetail.cshtml
Please note: c.ITEM.ITEMNO_ITEMDESC, which contains another Template. Here display the problema.
@model NEW.Models.VW_ORDENHD
<div class="container">
<div class="row">
<div class="col-md-3">
# Orden:
@Html.EditorFor(m => m.ORDERNO, "ETTextBox")
@Html.EditorFor(m => m.ORDERID, new { style="display:none" })
</div>
<div class="col-md-3">
Fecha Entrega:
@Html.EditorFor(m => m.FECHA_ENTREGA, "ETDatePicker")
</div>
<div class="col-md-3">
Activo:
@Html.EditorFor(m => m.ACTIVO.STATUS, "ETCheckBox")
</div>
</div>
<div class="row">
<div class="col-md-3">
Contacto:
@Html.EditorFor(m => m.CONTACTO, "ETTextBox")
</div>
<div class="col-md-3">
Email:
@Html.EditorFor(m => m.EMAIL, "ETEmail")
</div>
</div>
<div class="row">
<div class="col-md-9">
Observacion:
@Html.EditorFor(m => m.OBSERVACION, "ETTextArea")
</div>
</div>
<br />
@(Html.Kendo().Grid<NEW.Models.VW_ORDENDT>()
.Name("gridDetail")
.Columns(columns =>
{
//columns.Bound(c => c.ORDERID).Visible(false);
columns.Bound(c => c.ORDERDETAILID).Visible(false);
columns.Bound(c => c.ITEMID).Visible(false);
columns.Bound(c => c.ITEM.ITEMNO_ITEMDESC).Title("Item").EditorTemplateName("ETItem");
columns.Bound(c => c.CANTIDAD).Title("Cantidad");
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { style = "background-color:#81DAF5; border-color:#A4A4A4" });
command.Destroy().HtmlAttributes(new { style = "background-color:#81DAF5; border-color:#A4A4A4" });
});
})
.HtmlAttributes(new { style = "height: 300px;" })
.Scrollable()
.ToolBar(toolbar =>
{
toolbar.Create().Text("Agregar Item").HtmlAttributes(new { style = "background-color:#A0C331; border-color:#A4A4A4" });
})
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
.Events(events =>
{
//events.Edit("fnDetailEditAcciones");
events.Save("fnDetailSaveAcciones");
events.Remove("fnDetailRemoveAcciones");
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(3))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ORDERDETAILID);
model.Field(p => p.ITEM).DefaultValue(
new NEW.Models.VW_ITEM { ITEMID = 0, ITEMNO = "", ITEMDESC = "Item no seleccionado" }
);
})
.PageSize(75)
.Read(read => read.Action("GetOrdenesDT", "Orden"))
.Create(update => update.Action("AddOrdenDT", "Orden"))
.Update(delete => delete.Action("UpdateOrdenDT", "Orden"))
.Destroy(destroy => destroy.Action("EliminarDT", "Orden"))
)
)
</div>
Edit Template: ETItem.cshtml
@(Html.Kendo().ComboBox()
.Name("ITEM")
.DataTextField("ITEMNO_ITEMDESC")
.DataValueField("ITEMID")
.Placeholder("Seleccione el item...")
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetItems", "Orden");
})
.ServerFiltering(false);
})
.AutoBind(false)
.HtmlAttributes(new { style = "width:100%;" })
)
Basically the last edit template display error:
browser console error:
VM3036:1 Uncaught SyntaxError: Invalid or unexpected token
at eval (<anonymous>)
at http://localhost:13532/NEW/Scripts/jquery-1.12.4.min.js:2:2651
at Function.globalEval (http://localhost:13532/NEW/Scripts/jquery-1.12.4.min.js:2:2662)
at Ha (http://localhost:13532/NEW/Scripts/jquery-1.12.4.min.js:3:21262)
at n.fn.init.append (http://localhost:13532/NEW/Scripts/jquery-1.12.4.min.js:3:22791)
at M.fn.init.n.fn.(anonymous function) [as appendTo] (http://localhost:13532/NEW/Scripts/jquery-1.12.4.min.js:3:24510)
at init._createPopupEditor (http://localhost:13532/NEW/Scripts/kendo/kendo.all.min.js:49:14769)
at init.editRow (http://localhost:13532/NEW/Scripts/kendo/kendo.all.min.js:49:12005)
at init.addRow (http://localhost:13532/NEW/Scripts/kendo/kendo.all.min.js:49:19823)
at HTMLAnchorElement.<anonymous> (http://localhost:13532/NEW/Scripts/kendo/kendo.all.min.js:49:20638)
Detail error from browser console :
jQuery(function(){jQuery("\#gridDetail").kendoGrid({"save":fnDetailSaveAcciones,"remove":fnDetailRemoveAcciones,"columns":[{"title":"Item","headerAttributes":{"data-field":"ITEM.ITEMNO_ITEMDESC","data-title":"Item"},"field":"ITEM.ITEMNO_ITEMDESC","encoded":true,"editor":"<input id=\"ITEM\" name=\"ITEM\" style=\"width:100%;\" type=\"text\" /><script>
jQuery(function(){jQuery(\"#ITEM\").kendoComboBox({\"dataSource\":{\"transport\":{\"read\":{\"url\":\"/NEW/Orden/GetItems\"},\"prefix\":\"\"},\"schema\":{\"errors\":\"Errors\"}},\"dataTextField\":\"ITEMNO_ITEMDESC\",\"filter\":\"contains\",\"autoBind\":false,\"dataValueField\":\"ITEMID\",\"placeholder\":\"Seleccione el item...\"});});
So, my question is: can we use nested edit template? or we need to do something else in order to work?
Thanks,
David,
2 Answers, 1 is accepted
When you are trying to load a helper that will contain templates in another template (in this case the Popup template of the main Grid), you need to ensure that you are calling the ToClientTemplate method over the nested helpers. This should resolve the escaping in the templates and it should resolve the problem that you are facing:
//grid in the popup editor @(Html.Kendo().Grid<NEW.Models.VW_ORDENDT>().Name("gridDetail")....ToClientTemplate())Please let me know if the above solution is suitable for your case. I look forward to your reply.
Regards,
Georgi
Progress Telerik
Rank 1
Many thanks Giorgi,
Awesome! the problem has been solved with your help! Thanks man!
Regards,
David Gonzalez