This is a migrated thread and some comments may be shown as answers.

Grid MVC nested EditTemplate

2 Answers 323 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jose
Top achievements
Rank 1
Jose asked on 03 Nov 2017, 06:33 PM

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

Sort by
0
Georgi
Telerik team
answered on 07 Nov 2017, 08:32 AM
Hello Jose,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jose
Top achievements
Rank 1
answered on 07 Nov 2017, 02:33 PM

Many thanks Giorgi,

Awesome! the problem has been solved with your help! Thanks man!

 

Regards,

David Gonzalez

Tags
Grid
Asked by
Jose
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Jose
Top achievements
Rank 1
Share this question
or