PDA

View Full Version : GridPanel Cell background color - nice css trick



bogc
Sep 25, 2014, 11:19 PM
Hi:

I wanted to assign the cells in a column a different background color, and even more, use a distinct background color for the cells in the column on the alternate rows. The catch is that I wanted the normal row selection background and the hover background colors to work as they do for the "normal" cells. I modified the Areas/Grid_Pane_DataPresentation/Views/Data_Prepare/index.cshtml and the key was to use the :not (https://developer.mozilla.org/en-US/docs/Web/CSS/:not) css selector. The sample works in FF (32.0.3), Chrome (37.0.2062.124 m) and IE11.



@model System.Collections.IEnumerable

@{
ViewBag.Title = "Data Prepare - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section headtag
{
<script>
var prepareCity = function (value, record) {
return record.get('Address').City;
};

var prepareStreet = function (value, record) {
return record.get('Address').StreetAddress;
};
</script>
<style type="text/css">
.yellow {
background-color: lemonchiffon;
}

.x-grid-row-alt:not(.x-grid-row-selected):not(.x-grid-row-over) .yellow {
background-color: yellow;
}
</style>
}

@section example
{
@(Html.X().GridPanel()
.Title("Customers")
.Width(630)
.Height(300)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("ID", ModelFieldType.Int),
new ModelField("FirstName"),
new ModelField("LastName"),
new ModelField("Company"),
new ModelField()
{
Name = "Address",
Type = ModelFieldType.Object
},
new ModelField()
{
Name = "City",
Convert =
{
Fn = "prepareCity"
}
},
new ModelField()
{
Name = "Street",
Convert =
{
Fn = "prepareStreet"
}
}
)
)
.DataSource(Model)
)
.ColumnModel(
Html.X().Column().Text("ID").DataIndex("ID"),
Html.X().Column().Text("FirstName").DataIndex("FirstName").TdCls("yellow"),
Html.X().Column().Text("LastName").DataIndex("LastName"),
Html.X().Column().Text("Company").DataIndex("Company"),
Html.X().Column().Text("City").DataIndex("City"),
Html.X().Column().Text("Street").DataIndex("Street")
)
)
}

Daniil
Sep 26, 2014, 11:35 AM
Hi @bogc,

A nice demonstration of using ":not". Thank you for sharing!

Moving to the Examples and Extras forum.