Kendo grid with a custom popup editor

Question

I thought I had everything working but realized when I clicked on the update button, the values from the custom editor are not getting passed to the controller. It's the original values from the select grid row.

My grid is defined as follows and loads data correctly.

@(Html.Kendo().Grid<ET.Data.Models.TowTicketModel>()
            .Name("gridTicketStatus")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => {
                    model.Id(p => p.TicketId);
                    model.Field(p => p.TicketId).Editable(false);
                    model.Field(c => c.CreatedDateTime).Editable(false);
                    model.Field(c => c.AssignedTo).Editable(false);
                    model.Field(c => c.TicketType).Editable(false);
                    model.Field(c => c.Customer.Name).Editable(false);
                    model.Field(c => c.Description).Editable(false);
                    //  model.Field("TicketStatus", typeof(TowTicketStatusModel));
                })
                .Read(read => read.Action("GetTowTickets", "TowDriver"))
                .Update(up => up.Action("UpdateTowDriverTickets", "TowDriver"))

            )
            .Columns(columns =>
            {
                columns.Bound(ticket => ticket.TicketId).Title("Id");
                columns.Bound(ticket => ticket.CreatedDateTime).Title("Date").Width("120px").Format("{0:MM/dd/yyyy}")
                         .HeaderHtmlAttributes(new
                         {
                             //style = "white-space: nowrap; text-overflow: ellipis;"
                             @class = "k-grid td"
                         });
                columns.Bound(ticket => ticket.Customer.Name)
                         .HeaderHtmlAttributes(new
                         {
                             //style = "white-space: nowrap; text-overflow: ellipis;"
                             @class = "k-grid td"
                         });

                columns.Bound(p => p.TicketType)
                .ClientTemplate("#: data.TicketType ? data.TicketType.DisplayValue : '' #")

                .Title("Type")
                .HeaderHtmlAttributes(new
                {
                    //style = "white-space: nowrap; text-overflow: ellipis;"
                    @class = "k-grid td"
                });



                columns.Bound(p => p.TicketStatus)
                .ClientTemplate("#: data.TicketStatus ? data.TicketStatus.DisplayValue : '' #")
                .Title("Status")
                         .HeaderHtmlAttributes(new
                         {
                             //style = "white-space: nowrap; text-overflow: ellipis;"
                             @class = "k-grid td"
                         });

                columns.Bound(ticket => ticket.Description).HeaderHtmlAttributes(new
                {
                    //style = "white-space: nowrap; text-overflow: ellipis;"
                    @class = "k-grid td"
                })
                .HtmlAttributes(new { title = "#= Description #" });

                columns.Bound(p => p.AssignedTo)
                .ClientTemplate("#: data.AssignedTo ? data.AssignedTo.FullName : '' #")

                .Title("AssignedTo")
                         .HeaderHtmlAttributes(new
                         {
                             //style = "white-space: nowrap; text-overflow: ellipis;"
                             @class = "k-grid td"
                         });


                columns.Bound(ticket => ticket.CreatedBy.FullName).Title("CreatedBy").HeaderHtmlAttributes(new
                {
                    //style = "white-space: nowrap; text-overflow: ellipis;"
                    @class = "k-grid td"
                });

                columns.Command(cmd => cmd.Edit());
                //columns.Bound(ticket => ticket.AssignedTo.FullName).Title("AssignedTo");


                // columns.Bound(ticket => product.UnitsInStock);
            })
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("TowTicketDriverEditor"))
            // .ToolBar(tb => tb.Save)
            .Pageable()
            .Sortable()
        )

My Editor contains the following.

> @model ET.Data.Models.TowTicketModel
> 
> 
> @Html.HiddenFor(model => model.TicketId)
> 
> <div class="container">
>     <div class="row">
>                
>         <div>
>             @Html.LabelFor(model => model.TicketId)
>         </div>
> 
>         <div>
>             @Html.LabelFor(model => model.Customer.Name)
> 
>             @Html.EditorFor(model => model.Customer.Name, new { htmlAttributes = new { disabled = "disabled", @readonly = "readonly" }
> })
>         </div>
>         <div>
>             @(Html.Kendo().DropDownListFor(m => m)
>             .Name("TicketStatus") 
>                                         
>             .DataValueField("TicketId") 
>             .DataTextField("DisplayValue")
>             .Value("StatusId")                               // .Value(Model.StatusId)
>             .DataSource(source =>
>             {
>                 source.Read("GetTowTicketStatuses", "TowDriver")
>                 .ServerFiltering();
>             }))
>         </div>    
>         
>     </div> </div>

Finally my controller:

public async Task<ActionResult> UpdateTowDriverTickets([DataSourceRequest] DataSourceRequest request, 
TowTicketModel updated)
            {
                if (updated != null && ModelState.IsValid)
                {
                    await _towProvider.UpdateTowTicketAsync(new UpdateTowTicketRequest(updated));
                }

                return Json(ModelState.ToDataSourceResult());

            }

Again my grid loads, I click the edit button, the popup opens and the dropdownlist is properly populated from the ajax call.

However, I select from the dropdown and click update, the model parameter of UpdateTowDriverTickets doesn't have the value selected from editor dropdown.

I do have a GridForeignKey.cshtml template defined. (Just copied a template from an example.)

An input would be appreciated.

Answer 1

Turns out we had the wrong value in the DataValueField. TicketId was the Id for the grid but not the ID for our dropdownlist. Corrected that and everything appears to be working.