使用自定义弹出编辑器的Kendo网格

时间:2016-02-04 00:03:12

标签: kendo-ui kendo-grid mvc-editor-templates

我认为我已经完成了所有工作,但是当我点击更新按钮时,自定义编辑器中的值未传递给控制器​​。它是选择网格行中的原始值。

我的网格定义如下,并正确加载数据。

@(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()
        )

我的编辑器包含以下内容。

> @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>

最后我的控制器:

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());

            }

我的网格再次加载,我点击编辑按钮,弹出窗口打开,下拉列表从ajax调用中正确填充。

但是,我从下拉列表中选择并单击更新,UpdateTowDriverTickets的模型参数没有从编辑器下拉列表中选择值。

我确实定义了GridForeignKey.cshtml模板。 (刚从示例中复制了一个模板。)

我们将不胜感激。

1 个答案:

答案 0 :(得分:0)

原来我们在DataValueField中有错误的值。 TicketId是网格的ID,但不是我们的下拉列表的ID。纠正了这一切,似乎一切正常。