EditorTemplate is not working inside nested grid

1 Answer 353 Views
Editor Grid MultiSelect
Jan-Frederik
Top achievements
Rank 1
Iron
Iron
Jan-Frederik asked on 02 Jul 2021, 03:35 PM | edited on 06 Jul 2021, 08:04 AM

Hello, I have a grid which uses popup editing, and inside the editor is another grid which uses incell-editing. This basically works, apart from the following:

For the nested grid, I want to use an editor template, containing a multiselect.

But on editing a cell with the editor template, nothing happens. What might be the reason for this?

Main Grid:

@(Html.Kendo().Grid<WorkspaceViewModel>()
            .Name("grid")
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("WorkspaceDialog"))
            .ToolBar(x => x.Create().Text("Add Workspace"))
            .Columns(columns =>
            {
                columns.Bound(column => column.Name);
                columns.Command(column =>
                {
                    column.Edit().UpdateText("Save");
                    column.Destroy();
                }).Width(230);
            })
            .DataSource(ds => ds.Ajax()
                .Read(r => r.Url("/Workspaces/Index?handler=ReadWorkspace").Data("getSearchParameters"))
                .Update(u => u.Url("/Workspaces/Index?handler=UpdateWorkspace").Data("getSelectedReports"))
                .Create(c => c.Url("/Workspaces/Index?handler=CreateWorkspace").Data("getSelectedReports"))
                .Destroy(d => d.Url("/Workspaces/Index?handler=DestroyWorkspace").Data("forgeryToken"))
                .Model(m => m.Id(id => id.WorkspaceID))
                .PageSize(10)
            ) )

Popup:

<div class="k-edit-field">
    @(Html.Kendo().Grid<ViewModels.ReportUserViewModel>()
        .Name("reportGrid")
        .Columns(columns =>
        {
            columns.Bound(column => column.Name);
            columns.Bound(c => c.SelectedUsers) //List<UserSelectViewModel>
                .ClientTemplateId("reportUserTemplate")
                .Sortable(false)               
                .EditorTemplateName("~\\/Views\\/Shared\\/EditorTemplates\\/UserSelect.cshtml")
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(ds => ds
            .Ajax()
            .Read(r => r.Url("/Workspaces/Index?handler=ReadReport").Data("getSelectedReportUsers"))
            .Model(m => m.Id(id => id.ReportID))
            .PageSize(10)
            .ServerOperation(false)
        )
    )
</div>

Editor Template:

@model List<ViewModels.UserSelectViewModel>

@(Html.Kendo().MultiSelectFor(m => m)
    .AutoBind(false)
    .DataTextField("Name")
    .DataValueField("UserID")
    .BindTo((List<UserSelectViewModel>)ViewData["Users"])
    )

The controls are inside a Razor Pages application. Both templates are placed in the Views/Shared/EditorTemplates folder. In the Editor Template markup, I tried to use the absolute path to the view, because EditorTemplates("UserSelect") threw some error ("Unexpected token").

Everything works fine if I use the Multiselect in the main grid.

1 Answer, 1 is accepted

Sort by
0
Jan-Frederik
Top achievements
Rank 1
Iron
Iron
answered on 05 Jul 2021, 09:56 AM

Based on this answer: 

https://www.telerik.com/forums/grid-mvc-nested-edittemplate

I had to call

.ToClientTemplate()

on the nested grid. 


Anton Mironov
Telerik team
commented on 07 Jul 2021, 08:26 AM

Hi Jan-Frederik,

Yes, I confirm that the "ToClientTemplate" method should be added.

Add it and observe the behavior. If further assistance is needed, do not hesitate to contact me and the team.

Kind Regards,
Anton Mironov
Tags
Editor Grid MultiSelect
Asked by
Jan-Frederik
Top achievements
Rank 1
Iron
Iron
Answers by
Jan-Frederik
Top achievements
Rank 1
Iron
Iron
Share this question
or