Problem with editor-template when grid is loaded through a partial view

6 posts, 0 answers
  1. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 30 Jul 2018 Link to this post

    Hi there i have a simple page that has three drop-down fields and grid. The grid has a drop-down column(Product) which is made possible by using an editortemplate, the grid is also in a separate file and is loaded in a partial view. The problem i am running into is when i load the grid using the MVC razor syntax, the drop-downlist in the grid works when i try to add a new entry.

    <div class="col-md-12" id="scritpureImpactPlaceHolder">
        @Html.Partial("../MinistryImpact/SBase")
    </div>

    However, when i load the grid using JQuery ajax and try to add a new entry, the grid throws an error saying that the editortemplate is not defined.

    $.get('GetGrid', function (data) {
            $('#scritpureImpactPlaceHolder').html(data);
            /* little fade in effect */
            $('#scritpureImpactPlaceHolder').fadeIn('fast');   
    })

    Here is the rest of my code.

    Index.cshtml

    @using (Html.BeginForm())
    {
        <div class="form-horizontal">
     
            <h3 style="text-align:center; font:bold;  text-decoration: underline;">Ministry Impact</h3>
            <div class="customHr">.</div>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <p> </p>
            <div class="form-group">
                @Html.Label("Partner:", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @(Html.Kendo().DropDownList()
                                        .Name("PartnerID")
                                        .OptionLabel("Select Partner")
                                        .Events(e => e.Change("onPartnerChange"))
                                        .BindTo(ViewData["PartnersList"] as IEnumerable<SelectListItem>)
                                        .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                    )
                </div>
            </div>
            <div class="form-group">
                @Html.Label("Fiscal Year:", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @(Html.Kendo().DropDownList()
                                .Name("FiscalYearID")
                                 .HtmlAttributes(new { style = "width:35%" })
                                 .OptionLabel("Select Fiscal Year")
                                  .Events(e => e.Change("onFiscalYearChange"))
                                  .BindTo(ViewData["FiscalYearList"] as IEnumerable<SelectListItem>)
                                 .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                    )
                </div>
            </div>
     
            <div class="form-group">
                @Html.Label("Project:", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @(Html.Kendo().DropDownList()
                                 .Name("ProjectKeyID")
                                  .OptionLabel("Select Project")
                                  .Events(e => e.Change("onProjectChange"))
                                  .DataTextField("ShortNameAndProjectNumber")
                                  .DataValueField("ProjectKeyID")
                                  .DataSource(source =>
                                   {
                                      source.Read(read =>
                                      {
                                        read.Action("GetProjectList", "MinistryImpact").Data("filterProject");
                                       }).ServerFiltering(true); ;
                                    })
                                   .Enable(false)
                                   .AutoBind(false)
                                   .CascadeFrom("PartnerID")
                                   .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                    )
                     <span id="ProgramName" class="control-label"> </span>
                </div>
            </div>
     
            <div class="form-group">
                @Html.Label("Month:", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @(Html.Kendo().DropDownList()
                                 .Name("MonthID")
                                 .OptionLabel("Select Month")
                                  .Events(e => e.Change("onMonthChange"))
                                  .BindTo(ViewData["MonthList"] as IEnumerable<SelectListItem>)
                                  .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                    )
                </div>
            </div>
     
            <div class="form-group" id="scriptureImpactContainer">
                <div class="col-md-12" id="scritpureImpactPlaceHolder">
     
                </div>
            </div>
        </div>
    }

     

    //Grid

    @(Html.Kendo().Grid<P2I_UI.Models.ViewM.ScriptureImpactVM>()
        .Name("MinistryScriptureImpact")
        .Columns(columns =>
        {
            columns.Bound(c => c.ProductNumber).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.Product).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" }).ClientTemplate("#=Product.ItemNumberAndTitle#");
            columns.Bound(c => c.AnnualGoal).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.October).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.November).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.December).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.January).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.February).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.March).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.April).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.May).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.June).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.July).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.August).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.September).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.FiscalYearToDate).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
            columns.Bound(c => c.PercentageOfPlan).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
     
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Events(events =>
        {
            //events.DataBound("onDataBound");
        })
        .AutoBind(false)
        .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(s =>
        {
            s.Add(p => p.ProductNumber).Ascending();
        })
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.ScriptureImpactID);
            model.Field(p => p.Product).DefaultValue(ViewData["defaultProduct"] as P2I_UI.Models.ViewM.ProductTwoVM);
        })
        .Events(events1 =>
        {
            events1.RequestEnd("requestEnd");
        })
        .Create("MinistryScriptureImpact_Create", "MinistryImpact")
        .Read(read => read.Action("MinistryScriptureImpact_Read", "MinistryImpact").Data("additionalData"))
        .Update(update => update.Action("MinistryScriptureImpact_Update", "MinistryImpact"))
        )
    )

    How do i solve this problem ?. thanks

     

  2. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 01 Aug 2018 Link to this post

    Hello Chinonso,

    Generally speaking jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM. In other words, if the editor is a function it is expected that it is missing.

    However I have tested to load a grid which is within a partial view via jQuery ajax when the custom editor template is created as shown in the article below and the grid loads as expected:


    For your convenience I am attaching the sample I used for testing.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 01 Aug 2018 in reply to Georgi Link to this post

    Thanks a lot for your solution. It is quite different from the path i was head and would require that i change my code, but that is doable.
  4. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 01 Aug 2018 in reply to Georgi Link to this post

    Thanks for your solution, i will have to rework my code to make it run this way but that is doable.
  5. Kiran
    Kiran avatar
    28 posts
    Member since:
    Jul 2014

    Posted 03 Jan 2020 in reply to Georgi Link to this post

    I am calling a partial view inTABStrip control and the in that partial view I have the grid with editor template, it is not working when I use your example on edit mode with batch process, any solution from telerik? 
  6. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 07 Jan 2020 Link to this post

    Hello Kiran,

    Since you are nesting multiple templates, it is necessary to escape the initialization script of the widget. To do so, execute the ToClientTemplate of the grid.

    e.g.

    @(Html.Kendo().Grid().Name(...)
     ...
    .ToClientTemplate()
    )

    If this still does not work, It might be necessary to call the ToClientTemplate method of the widget within the editor template.

    Regards,
    Georgi
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top