更改Kendo UI网格中的列

Question

I have an ASP.NET MVC 5 application. Kendo UI grids calls to Web API controller to retrieve the data. I have a requirement to change the contents of a column depending on what Fuel type car is. So on my model for the page I created a string for Fuel Type. In MVC controller this is then set as below:

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

On a partial view I have my Kendo UI Grid defined as below - also on the PartialView I have a html.hiddenfor to store the value of 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"))
                          )
                          )

I have left a line blank in my column and that is where I need to include a different column - if the FuelTyle is Petrol I need to have

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

but if the FuelType is Diesel I need to have

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

Both of these are string properties on my CarViewModel.

Has anyone done something similar with Kendo UI Grid or can advise in the best approach to achieve this?

Answer 1

I don't have a Kendo MVC project in VisualStudio to test this with, but can't you just use an if statement:

                      .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);
                      })