如何更改 Kendo 网格中特定列的背景颜色?
How can I change the background color of a specific column in Kendo grid?
我在 MVC 项目中使用 Kendo 网格。如何更改 Kendo 网格中特定列的背景颜色?
网格
@(Html.Kendo().Grid<Webapplication1.Models.mainViewModel>()
.Name("mainGrid")
.Columns(c =>
{
c.Bound(m => m.Id).Hidden();
c.Bound(m => m.CountryViewModel.CountryName)
.Title("Country").HeaderHtmlAttributes(new { @title = "Countries" });
c.Bound(m => m.LocationViewModel.LocationName)
.Title("Location").HeaderHtmlAttributes(new { @title = "Locations" });
c.Bound(m => m.StockSent)
.Title("StockSent");
c.Command(p =>
{p.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { @title = "Edit" });});
})
.ToolBar(toolbar => { toolbar.Create().Text("").HtmlAttributes(new { @title = "Add"}); })
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).TemplateName("gridEditor"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("mainGrid_Read", "abc"))
.Update(update => update.Action("mainGrid_Update", "abc"))
.Create(create => create.Action("mainGrid_Create", "abc"))
.Model(m => { m.Id(p => p.Id);
m.Field(p => p.CountryViewModel).DefaultValue(ViewData["DefaultCountry"] as Webapplication1.Models.CountryViewModel);
})
)
)
此处 "StockSent" 列的颜色应与其他列不同。
假设您要更改“位置”列的颜色。您将 class 添加到该列,如下所示:
c.Bound(m => m.LocationViewModel.LocationName)
.Title("Location")
.HeaderHtmlAttributes(new { @title = "Locations" })
.HtmlAttributes(new { @class = "colored-col" });
然后,在您的 CSS 文件中,您将拥有:
.colored-col { background-color: #ff0000 }
我在 MVC 项目中使用 Kendo 网格。如何更改 Kendo 网格中特定列的背景颜色? 网格
@(Html.Kendo().Grid<Webapplication1.Models.mainViewModel>()
.Name("mainGrid")
.Columns(c =>
{
c.Bound(m => m.Id).Hidden();
c.Bound(m => m.CountryViewModel.CountryName)
.Title("Country").HeaderHtmlAttributes(new { @title = "Countries" });
c.Bound(m => m.LocationViewModel.LocationName)
.Title("Location").HeaderHtmlAttributes(new { @title = "Locations" });
c.Bound(m => m.StockSent)
.Title("StockSent");
c.Command(p =>
{p.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { @title = "Edit" });});
})
.ToolBar(toolbar => { toolbar.Create().Text("").HtmlAttributes(new { @title = "Add"}); })
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).TemplateName("gridEditor"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("mainGrid_Read", "abc"))
.Update(update => update.Action("mainGrid_Update", "abc"))
.Create(create => create.Action("mainGrid_Create", "abc"))
.Model(m => { m.Id(p => p.Id);
m.Field(p => p.CountryViewModel).DefaultValue(ViewData["DefaultCountry"] as Webapplication1.Models.CountryViewModel);
})
)
)
此处 "StockSent" 列的颜色应与其他列不同。
假设您要更改“位置”列的颜色。您将 class 添加到该列,如下所示:
c.Bound(m => m.LocationViewModel.LocationName)
.Title("Location")
.HeaderHtmlAttributes(new { @title = "Locations" })
.HtmlAttributes(new { @class = "colored-col" });
然后,在您的 CSS 文件中,您将拥有:
.colored-col { background-color: #ff0000 }