更改 Kendo UI Grid 中的列答案

【问题标题】：Change a column in Kendo UI Grid更改 Kendo UI Grid 中的列
【发布时间】：2014-06-22 17:24:39
【问题描述】：

我有一个 ASP.NET MVC 5 应用程序。 Kendo UI 网格调用 Web API 控制器以检索数据。我需要根据燃料类型汽车更改列的内容。所以在我的页面模型上，我为燃料类型创建了一个字符串。然后在 MVC 控制器中设置如下：

model.FuelType = "Diesel"; //just hardcoded for testing in reality will be dynamically set by User in a Previous screen - could be set to Petrol in which case I need to change column data

在局部视图上，我的 Kendo UI Grid 定义如下 - 在 PartialView 上，我也有一个 html.hiddenfor 来存储 FuelType 的值

  @(Html.Kendo().Grid<Car.Web.Models.CarViewModel>()
                          .Name("CarViewGrid")
                          .Columns(columns =>
                          {
                              columns.Bound(c => c.Make).Width(180);
                              columns.Bound(c => c.ModelNo).Width(280);
                              columns.Bound(c => c.EngineSize).Width(120);
                              columns.Bound(c => c.Colour).Width(65);
                              columns.Bound(c => c.MPG).Width(65);

                              columns.Bound(c => c.CarId)
                                  .Title("Include in Report")
                                  .ClientTemplate("<input type=\"checkbox\" name=\"selectedIds\" value=\"#=CarId#\" class=\"checkboxClass\" />")
                                      .Width(90)
                                      .Sortable(false); 
                          })
                          .Events(builder => builder.DataBound("gridDataBound"))
                          .HtmlAttributes(new { style = "height: 420px;" })
                          .Scrollable()
                          .Sortable(sortable => sortable
                              .AllowUnsort(true)
                              .SortMode(GridSortMode.MultipleColumn))
                          .Pageable(pageable => pageable
                              .PageSizes(true)
                              .ButtonCount(5))
                          .DataSource(dataSource => dataSource
                              .Ajax()
                             .Read(read => read.Url("api/Car/GetCarDetails").Type(HttpVerbs.Get).Data("GetCustId"))
                          )
                          )

我在我的列中留了一行空白，这就是我需要包含不同列的地方 - 如果 FuelTyle 是 Petrol，我需要有

columns.Bound(c => c.NumberSparkPlugs).Width(65);

但如果 FuelType 是 Diesel 我需要拥有

columns.Bound(c => c.Torque).Width(65);

这两个都是我的 CarViewModel 上的字符串属性。

有没有人用 Kendo UI Grid 做过类似的事情，或者可以建议最好的方法来实现这一点？

【问题讨论】：

标签： c# asp.net-mvc kendo-ui asp.net-mvc-5 kendo-grid

【解决方案1】：

我在 VisualStudio 中没有 Kendo MVC 项目来测试它，但你不能只使用 if 语句：

                      .Columns(columns =>
                      {
                          columns.Bound(c => c.Make).Width(180);
                          columns.Bound(c => c.ModelNo).Width(280);
                          columns.Bound(c => c.EngineSize).Width(120);
                          columns.Bound(c => c.Colour).Width(65);
                          columns.Bound(c => c.MPG).Width(65);

                          columns.Bound(c => c.CarId)
                              .Title("Include in Report")
                              .ClientTemplate("<input type=\"checkbox\" name=\"selectedIds\" value=\"#=CarId#\" class=\"checkboxClass\" />")
                                  .Width(90)
                                  .Sortable(false); 

// added code here...
                          if(Model.FuelType == "Petrol")
                              columns.Bound(c => c.NumberSparkPlugs).Width(65);
                          else
                              columns.Bound(c => c.Torque).Width(65);
                      })

【讨论】：