Telerik's Kendo Grid component with GridEditMode.Popup and TemplateName specified
c#, kendo-grid, telerik
Solution
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
Problem
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 :)