I need to change the backgroundcolor of a kendo grid. My code looks as follows :
@(Html.Kendo().Grid<TegelCheckerModel>()
.Name("Grid")
.CellAction(cell =>
{
if (cell.Column.Title.Equals("TegelZones"))
{
if (cell.DataItem.TegelZones.Contains("Extern"))
{
cell.HtmlAttributes["style"] = "background-color: red";
}
}
})
.Columns(columns =>
{
columns.Bound(p => p.TegelNaam);
columns.Bound(p => p.TegelActief).HeaderHtmlAttributes(new { style = "background: #800000;" }).ClientTemplate("#if(TegelActief){# ja #}else{# nee #}#");
columns.Bound(p => p.TegelZones).HeaderHtmlAttributes(new { style = "background: #800000;" }); })
.AutoBind(true)
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax() //Or .Server()
.Read(read => read.Action("GetTegels", "TegelChecker")
.Data("getAlvNummerAndVoorWie"))
)
)
This code doesn't change the background-color of the cell. What am I missing?
I succeeded partly. This means I was able to color some part of the cell using the following code :
if (tegelTitel == "TegelActie") {
if ($("#tegelcheckeroverzicht_klantControl_Klantddl").klantenControl().getKlant().alvNummer == "") {
html = kendo.format("<span>" + data.TegelActie + "</span>");
}
else {
if (data.TegelActieAllowed) {
if (data.TegelActie == null) {
html = kendo.format("<span></span>");
}
else {
html = kendo.format("<span>" + data.TegelActie + "</span>");
}
}
else {
html = kendo.format("<span STYLE='background: red; color: white;font-weight:bold'>" + data.TegelActie + "</span>");
}
}
}
But that means that only the background of the span is colored and not the entire cell.
Ok I found a solution :
function gridDataBound() {
var data = this._data;
for (var x = 0; x < data.length; x++) {
var dataItem = data[x];
var tr = $("#Grid").find("[data-uid='" + dataItem.uid + "']");
if (dataItem.Selected) {
$("input:first", tr).attr("checked", "checked");
}
var alvNummer = $("#tegelcheckeroverzicht_klantControl_Klantddl").klantenControl().getKlant().alvNummer;
if (alvNummer == "")
{ }
else
{
var cell = $("td:nth-child(6)", tr); // Zone
if (dataItem.HasCorrectZone) {
}
else {
cell.addClass("myerror");
}
cell = $("td:nth-child(7)", tr); //Actie
if (!dataItem.TegelActieAllowed) {
cell.addClass("myerror");
}
cell = $("td:nth-child(8)", tr); //Rollen
if (!dataItem.RolcodeVoldaan) {
cell.addClass("myerror");
}
}
}
}
And in the grid I added :
.Events(e => e.DataBound("gridDataBound "))
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments