No, rules are not applied. Here is complete sample. There you will see three problems. Before select change occurs separator isn't painted well. After select change next problem is (unwanted) appearance of id in property grid and (unwanted) disappearing of separator. For this second problem I thought that solution might be not to just simply
setSource
with
selected.data[0]
, but to recreate it.
<style>
.x-props-grid .x-grid3-body .x-grid3-row.my-class td {
background-color: Red !important;
border-right-color: Red;
}
.x-props-grid .x-grid3-row.my-class .x-grid3-td-name .x-grid3-cell-inner {
background-image: none !important;
}
</style>
@Html.X().ResourceManager()
@(
Html.X().Panel().Layout(LayoutType.HBox).LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items
(
Html.X().GridPanel().Title("GridPanel with PropertyGrid").Flex(8)
.Store
(
Html.X().Store().AutoLoad(true).Proxy(Html.X().AjaxProxy().Url(Url.Action("GetObjects")).Reader(Html.X().ArrayReader().Root("data")))
.Model
(
Html.X().Model()
.Fields
(
new ModelField("id", ModelFieldType.Int),
new ModelField("company"),
new ModelField("price", ModelFieldType.Float),
new ModelField("change", ModelFieldType.Float),
new ModelField("pctChange", ModelFieldType.Float),
new ModelField("lastChange", ModelFieldType.Date)
)
)
)
.ColumnModel
(
Html.X().Column().Text("Company").DataIndex("company").Flex(1),
Html.X().Column().Text("Price").DataIndex("price").Width(75).Renderer(RendererFormat.UsMoney),
Html.X().Column().Text("Change").DataIndex("change").Width(75),
Html.X().Column().Text("Change").DataIndex("pctChange").Width(75),
Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange").Width(85).Format("H:mm:ss")
)
.Listeners(l =>
{
l.SelectionChange.Handler = "if (selected[0]) { this.next('propertygrid').setSource(selected[0].data); }";
})
,
Html.X().PropertyGrid().Editable(false).SortableColumns(false).Flex(2).Title("Properties")
.Source(s =>
{
PropertyGridParameter pgpString = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Company", Name = "company" });
PropertyGridParameter pgpBoolean = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Price", Name = "price" });
PropertyGridParameter pgpSep = new PropertyGridParameter("separator", "");
PropertyGridParameter pgpDate = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Change", Name = "change" });
PropertyGridParameter pgpInt = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Percent Change", Name = "pctChange" });
PropertyGridParameter pgpFloat = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Last Change", Name = "lastChange" });
s.AddRange(new PropertyGridParameter[] { pgpString, pgpBoolean, pgpSep, pgpDate, pgpInt, pgpFloat });
})
.View
(
Html.X().GridView().GetRowClass(grc => grc.Handler = "return record.data.name == 'separator' ? 'my-class' : '';"))
)
)
)
An GetObjects is
public ActionResult GetObjects()
{
DateTime now = DateTime.Now;
var myObjects = new object[]
{
new object[] { 1, "3m Co", 71.72, 0.02, 0.03, now },
new object[] { 2, "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { 3, "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { 4, "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { 5, "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { 6, "AT&T Inc.", 31.61, -0.48, -1.54, now },
new object[] { 7, "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { 8, "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { 9, "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
new object[] { 10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
new object[] { 11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { 12, "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { 13, "General Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { 14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { 15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
new object[] { 16, "Intel Corporation", 19.88, 0.31, 1.58, now },
new object[] { 17, "International Business Machines", 81.41, 0.44, 0.54, now },
new object[] { 18, "Johnson & Johnson", 64.72, 0.06, 0.09, now },
new object[] { 19, "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
new object[] { 20, "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
new object[] { 21, "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
new object[] { 22, "Microsoft Corporation", 25.84, 0.14, 0.54, now },
new object[] { 23, "Pfizer Inc", 27.96, 0.4, 1.45, now },
new object[] { 24, "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
new object[] { 25, "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
new object[] { 26, "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
new object[] { 27, "United Technologies Corporation", 63.26, 0.55, 0.88, now },
new object[] { 28, "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { 29, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};
return this.Store(myObjects);
}