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

[Chinonso]

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

 

[Georgi]

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:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

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


Regards,
Georgi
Progress Telerik

[Chinonso]

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.

[Chinonso]

Thanks for your solution, i will have to rework my code to make it run this way but that is doable.

[Kiran]

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? 

[Georgi]

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