Custom Pop-up Editor in Child Grid

2 posts, 0 answers
  1. Mike
    Mike avatar
    2 posts
    Member since:
    Apr 2015

    Posted 26 Dec 2015 Link to this post

    I have a Hierarchical grid and I'm trying to add a custom editor for pop-up editing.  When I add the template to the child grid and click on the "edit" button, i get a invalid template error.  If i add that same template to the parent, it works fine.

    Here is the error in console:

    Uncaught Error: Invalid template:'<div class="row popupForm">    <div class="col-xs-10">  

     

    I've attached a screenshot of what my grid looks like.

    Here is the code

    <PARENT>

      @(Html.Kendo().Grid<ParentViewModel>()
                      .Name("GridAdjax")
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .PageSize(20)
                          .Events(events => events.Error("error_handler"))
                          .Read(read => read.Action("Read", "controller"))
                          .Model(model =>
                          {
                              model.Id(c => c.Id);
                          })
                          .ServerOperation(false)
                          .Events(events => events.Error("error_handler"))
                          .Events(events => events.RequestEnd("onRequestEnd"))
                         
                      )
                      .Columns(columns =>
                      {
                          columns.Bound(p => p.CompanyName).Title("Company Name");
                          columns.Bound(p => p.CompanyDomain).Title("Company Domain");
                          columns.Bound(p => p.CompanySecurityRole).Title("Security Role");
                          columns.Bound(p => p.CompanySecurityGroup).Title("Security Group");
                      })
                      .ClientDetailTemplateId("template")
                      .Pageable()
                      .Sortable()
                      .Resizable(resize => resize.Columns(true))
                      .Events(e => e.DataBound("OnDataBound"))
                      .Deferred()

                      )
                <script id="template" type="text/kendo-tmpl">
                    @(Html.Kendo().Grid<ChildlViewModel>()
                .Name("grid_#=CompanyId#")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Update(update => update.Action("CompanyList_Update", "Administration"))
                    .Read(read => read.Action("Read", "Child", new { companyId = "#=CompanyId#" }))
                            .Model(model =>
                                  {
                                      model.Id(c => c.Id);
                                      model.Field(c => c.CompanySoldTo).Editable(true);
                                      model.Field(c => c.CompanyDistributionChannel).Editable(true);
                                      model.Field(c => c.CompanyDivision).Editable(true);
                                      model.Field(c => c.CompanyPlant).Editable(true);
                                      model.Field(c => c.CompanySalesOrg).Editable(true);
                                  })
                )
                .Columns(columns =>
                      {
                          columns.Bound(p => p.CompanySoldTo).Title("Sold To");
                          columns.Bound(p => p.CompanyDistributionChannel).Title("Dist. Chan.");
                          columns.Bound(p => p.CompanyPlant).Title("Plant");
                          columns.Bound(p => p.CompanySalesOrg).Title("Sales Org");
                          columns.Command(command => { command.Edit(); }).Title(("Edit SAP Info."));
                      })
                        .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Detail"))
                .Pageable()
                .Sortable()
                .ToClientTemplate()
                    )
                </script>
                <script>
                    function dataBound() {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    }
                </script>

  2. Mike
    Mike avatar
    2 posts
    Member since:
    Apr 2015

    Posted 26 Dec 2015 in reply to Mike Link to this post

    Issue has been resolved, found that in my data validation message on the custom pop-up editor template was set on one of the input fields as "Please enter your account #".  The # was interpreted as a template (which it couldn't find).  I escaped the # and tested again and the custom pop-up template loaded successfully.
  3. Kendo UI is VS 2017 Ready
Back to Top