This is a migrated thread and some comments may be shown as answers.
Problem with editor-template when grid is loaded through a partial view
5 Answers 72 Views
This is a migrated thread and some comments may be shown as answers.
Chinonso
Top achievements
Rank 1
Chinonso asked on 30 Jul 2018, 06:14 PM

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

 

5 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 01 Aug 2018, 01:24 PM
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.
0
Chinonso
Top achievements
Rank 1
answered on 01 Aug 2018, 03:58 PM
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.
0
Chinonso
Top achievements
Rank 1
answered on 01 Aug 2018, 03:59 PM
Thanks for your solution, i will have to rework my code to make it run this way but that is doable.
0
Kiran
Top achievements
Rank 1
Veteran
answered on 03 Jan 2020, 07:26 PM
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? 
0
Georgi
Telerik team
answered on 07 Jan 2020, 12:55 PM

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.
Tags
Grid
Asked by
Chinonso
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Chinonso
Top achievements
Rank 1
Kiran
Top achievements
Rank 1
Veteran
Share this question
or