[Solved] Telerik Grid Popup Custom Template Not working

[Charlston]

I have a grid in where I added edit button that is connected to a custom template. When I click the button to edit fields for this row. It does not pop up my custom template but the default one with all the data. this is what I have:

 

@(
                    Html.Kendo().Grid(Model.GroupMemberships)
                    .Name("MemberGroupsGrid")

                    .Columns(columns =>
                    {
                        
                        columns.Template(
                        "# if (CanEdit) { #" +
                        "<a href='javascript:void(0)' name='expireDeleteLink' class='full-link w-100 h-100 d-flex align-items-center justify-content-center' " +
                        "title='Expire or Delete Member' " +
                        "onclick='openExpireDeleteModal(\"#= Id #\", \"#=GroupName#\", \"#=Name#\", \"#=IsExpired#\", \"" + Model.UserCanDeleteString + "\")'> " +
                        "<i class='fa-regular fa-trash-can text-danger' aria-hidden='true'></i>" +
                        "</a>" +
                        "# } #"
                        )
                        .Width(100)
                        .HtmlAttributes(new { @class = "text-center p-0 align-middle" })
                        .Media("(min-width: 850px)");
                        
                        columns.Command(command => command.Edit().Text(" ").IconClass(" fa-solid fa-user-pen text-secondary").HtmlAttributes(new { title = "Edit Member" }).Visible("CanEdit"));
                        columns.Bound(m => m.GroupId).Title("Group ID").Hidden(true).Exportable(false);
                        columns.Template("#=resColTemplate(data)#").Media("(max-width: 849px)");
                })
                .Pageable()
                .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("GroupMemberDetailTemplate").Window(w => w.Title("Member Group Details").Width(400).Height(300)))
                .Sortable()
                .Excel(excel => excel
                    .FileName("GroupMemberships.xlsx")
                    .Filterable(true)
                    .AllPages(true))
                .AutoBind(true)
                @* .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("MemberGroup")) *@
                .Events(ev => ev.Change("onChange").DataBound("onDataBound"))
                .HtmlAttributes(new { @class = "table table-hover align-middle" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Read(read => read.Action("GetGroupMemberships", "Members").Data("additionalData"))
                .PageSize(10)
                )
                )

this is the template 

@model AMPS.Web.Models.MemberGroupsManagementPageModel.GroupMemberships
@{
}

<div class="row">
    <div class="col-md-6">
     @(Html.DisplayFor(model => model.MemberName)))
    </div>
 </div>

It is located in the ~Views/Shared/EditiorTemplates

[Austin]

In your last line of text, it looks like there may be a typo in your path (EditiorTemplates vs EditorTemplates). Are you able to confirm this same typo is not currently in your folder name as well?

[Charlston]

That was a misspelling on my part. It is EditorTemplates in the Solution Tree

[Viktor Tachev]

Hi Charlston,

The described configuration seems correct for using a custom popup editor in the Grid.

That said, would you double check the name of the partial view and make sure that it matches the name specified in the Editable.TemplateName option. 

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("GroupMemberDetailTemplate"))

Also, since the Grid is configured to use remote data binding, alter the definition for it so that the type is passed like this:

Html.Kendo().Grid<GroupMemberships>()

 

In addition we have a runnable example that show how you can use custom popup editor in the Grid. Check it out in our examples repository below:

https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Grid/CustomPopUpEditor.cshtml

 

Regards,
Viktor Tachev
Progress Telerik