Grid MVC nested EditTemplate

3 posts, 0 answers
  1. Jose
    Jose avatar
    12 posts
    Member since:
    Jan 2017

    Posted 03 Nov 2017 Link to this post

    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. Georgi
    Admin
    Georgi avatar
    671 posts

    Posted 07 Nov 2017 Link to this post

    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.
  3. Jose
    Jose avatar
    12 posts
    Member since:
    Jan 2017

    Posted 07 Nov 2017 in reply to Georgi Link to this post

    Many thanks Giorgi,

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

     

    Regards,

    David Gonzalez

Back to Top