Repeater inside the grid popup editor

[junior]

I need to make jquery repeater work inside the popup editor.

I need to show repeater for customer email.

public class CustomerViewModel 
{
        public string Name {get; set;}
        public List<CustomerRepeatedModel> CustomersRepeatedValues{ get; set; } = new List<CustomerRepeatedModel>();

        public class CustomerRepeatedModel {
                // this should be added and removed with repeater
                public string Email { get; set; }
        }
}
  
           

The kendo grid

@(Html.Kendo().Grid<CustomerViewModel>
                                ().Name("customerGrid")
                                .Sortable()
                                .Scrollable()
                                .ToolBar(c => {
                                    c.Create().Text("Create Customer");
                                })
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.Id).Title("Customer ID").Filterable(false).Visible(false);
                                    columns.Bound(c => c.CustomerRepeatedValue).Visible(false);
                                    columns.Bound(c => c.Name).Title("Customer Name");

                                    columns.Command(column =>
                                    {
                                        column.Edit();
                                        column.Destroy();
                                    });
                                })
                                .Editable(c =>
                                {
                                    c.TemplateName("_CustomerTemplate")
                                        .Mode(GridEditMode.PopUp);
                                })
                                .DataSource(ds => ds.Ajax()
                                .Read(r => r.Url("/Customer/Index?handler=Read"))
                                .Update(u => u.Url("/Customer/Index?handler=Update"))
                                .Create(c => c.Url("/Customer/Index?handler=Create"))
                                .Destroy(d => d.Url("/Customer/Index?handler=Destroy"))
                                .Model(m =>
                                    {
                                    m.Id(model => model.Id);
                                    m.Field(model => model.Id).Editable(false);
                                    m.Field(model => model.Name);
                                    m.Field(model => model.IsDeleted).Editable(false);
                                    m.Field(model => model.CustomerRepeatedValues);
                                    })
                                )
                                .Events(e => e.Edit("grid_edit")@*.Save("grid_save")*@)

The _CustomerTemplate

In the popup template i can't access to Model. It is always null. So as i found on the forum i populated the repeater in the edit event. But if it is posibble to access Model inside the template i would like to know how.

@model WebUI.Pages.CustomerViewModel

<div>
    @Html.HiddenFor(model => model.Id)
    <div>
        <div class="col-4 mb-2">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="col-8 mb-2">
            @Html.TextBoxFor(model => model.Name)
        </div>
        <div class="repeater">
            <div data-repeater-list="CustomerRepeatedValues">
                <div class="col-4 mb-2">
                    Customer Emails
                </div>
                @*@for (var index = 0; index < Model.CustomerRepeatedValues.Count; index++)
                {
                    <div data-repeater-item>
                        <input type="text" name="Email" value="@(Model.CustomersRepeatedValues[index].Email)"/>
                        <button data-repeater-delete type="button">
                            Remove
                        </button>
                    </div>
                }*@
            </div>
            <div>
                <button data-repeater-create type="button">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
</div>

When i open the popup editor it shows the repeater, i can add or remove items. But when i click save it doesn't save it, it doesn't even go to save method. But if i change the name on the popup editor and click save it does go to save method but the changed emails are not bounded to model only the name is updated.

If there is better way to do this i would like to get your help

[Aleksandar]

Hello,

The edit template is evaluated against and empty model and is serialized as part of the Grid's definition. You can verify this if you inspect the generated script in the Popup Editing Demo for the Grid, for example. Therefore if you need to access the model handling the edit event would be the correct way to approach the scenario. 

The client-side edit event on the other hand provides a reference to the edited model, so if you desire to update the model within the edit event handler you can use the set method.

Regards,
Aleksandar
Progress Telerik