Telerik's Kendo Grid component with GridEditMode.Popup and TemplateName specified

Question

I have a view that looks like this:

@model Wellbore
@(Html.Kendo().Grid<WellboreSection>()
        .Name("wellboresectiongrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Name);
            columns.Bound(p => p.Lenght);
            columns.Bound(p => p.SectionNumber);
            columns.Bound(p => p.Volume);
            columns.Bound(p => p.HoleDiameter);
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            }).Width(240);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("WellboreSectionPopupTemplate"))
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Events(events => events.Error("KendoGrid.ErrorHandler"))
            .Model(model => model.Id(p => p.Id))
            .Create(create => create.Action("WellboreSection_Create", "WellboreSection",
                new RouteValueDictionary(new Dictionary<string, object>() { { "wellboreId", Model.Id } })))
            .Read(read => read.Action("WellboreSection_Read", "WellboreSection",
                    new RouteValueDictionary(new Dictionary<string, object>() { { "wellboreId", Model.Id } })))
            .Update(update => update.Action("WellboreSection_Update", "WellboreSection",
                    new RouteValueDictionary(new Dictionary<string, object>() { { "wellboreId", Model.Id } })))
            .Destroy(destroy => destroy.Action("WellboreSection_Destroy", "WellboreSection",
                    new RouteValueDictionary(new Dictionary<string, object>() { { "wellboreId", Model.Id } })))
      ))

And a WellboreSectionPopupTemplate.cshtml file that looks like this:

@model WellboreSection
blaaaaah!!!

Still, when i click edit in the grid, a popup with all the fields to the object is displayed.

What is really confusing me is that i have another grid that looks like this:

<div class="container">
    <div class="row">
        <div class="col-md-12 sl-table">
            @(Html.Kendo().Grid<Customer>()
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.Name);
                      columns.Bound(p => p.StreetAddress);
                      columns.Bound(p => p.ZipCode);
                      columns.Bound(p => p.City);
                      columns.Bound(p => p.State);
                      columns.Bound(p => p.Country);
                      columns.Bound(p => p.MainPhoneNumber);
                      columns.Bound(p => p.ContactPerson);
                      columns.Bound(p => p.ContactPersonEmail);
                      columns.Bound(p => p.ContactPersonPhone);
                      columns.Bound(p => p.ContactPersonPhone2);
                      columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                      }).Width(180);
                  })
                  .ToolBar(toolbar => toolbar.Create())
                  .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomerPopUpTemplate"))
                  .Pageable()
                  .Sortable()
                  .Scrollable()
                  .HtmlAttributes(new {style = "height:500px;"})
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .PageSize(10)
                              .Events(happening => happening.Error("KendoGrid.ErrorHandler"))
                      .Model(model => model.Id(p => p.Id))
                      .Create(update => update.Action("EditingPopup_Create", "CustomerManagement"))
                      .Read(read => read.Action("EditingPopup_Read", "CustomerManagement"))
                      .Update(update => update.Action("EditingPopup_Update", "CustomerManagement"))
                      .Destroy(destroy => destroy.Action("EditingPopup_Destroy", "CustomerManagement"))))
        </div>
    </div>
</div> 

Which actually displays the template 100% correct. I have checked the browser, and it does not call for WellboreSectionPopupTemplate when i click the edit or add new button in the grid. What could i possibly be missing?

• If more information is needed, just ask, and i will gladly provide :)

Answer 1

When creating custom templates in MVC they have the be placed in a certain spot.

The locations searched are:

• /Areas/AreaName/Views/ControllerName/EditorTemplates/TemplateName
• /Areas/AreaName/Views/Shared/EditorTemplates/TemplateName
• /Views/ControllerName/EditorTemplates/TemplateName
• /Views/Shared/EditorTemplates/TemplateName

Display template paths would be the same, just with a /DispayTemplates/ in the path instead of /EditorTemplates/

Template names also have to match convention:

• TemplateHint from ModelMetadata
• DataTypeName from ModelMetadata
• The name of the type
• If the object is not complex: “String”
• If the object is complex and an interface: “Object”
• If the object is complex and not an interface: Recurse through the inheritance hiearchy for the type, trying every type name

source: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html