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?
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);
})
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments