改变一个列在剑道UI网格

本文关键字：UI 网格 一个 改变 | 更新日期: 2023-09-27 18:09:53

我有一个ASP。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

在部分视图上，我有我的剑道UI网格定义如下-也在部分视图上，我有一个html。隐藏用于存储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"))
                          )
                          )

我在我的列中留下了一行空白，这就是我需要包括不同列的地方-如果燃料类型是汽油，我需要有

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

但如果燃料类型是柴油，我需要有

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

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

有没有人做过类似的剑道UI网格或可以建议在最好的方法来实现这一点?

改变一个列在剑道UI网格

我在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);
                      })
相关文章：