Here is another example based on using GetRowClass. This solution is better than previous one.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.Store.Primary;
object[] data = new object[]
{
new object[] { "3m Co", 71.72},
new object[] { "Alcoa Inc", 29.01},
new object[] { "Altria Group Inc", 83.81},
new object[] { "American Express Company", 52.55},
new object[] { "American International Group, Inc.", 64.13},
new object[] { "Altria Group Inc", 83.81},
new object[] { "American Express Company", 52.55},
};
store.DataSource = data;
store.DataBind();
}
}
[DirectMethod]
public bool Save()
{
return true;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ext.NET Example</title>
<style type="text/css">
.x-grid3-row-red
{
background-color: red;
}
</style>
<script type="text/javascript">
var getRowClass = function(record, rowIndex, rp, ds) {
if (Object.prototype.toString.apply(coloredRows.value) === '[object Array]') {
if (coloredRows.value[rowIndex]) {
return 'x-grid3-row-red';
}
}
return 'x-grid3-row-collapsed';
}
var colorRows = function(grid) {
coloredRows.value = [];
coloredRows.value[2] = true;
coloredRows.value[4] = true;
grid.view.refreshRow(2);
grid.view.refreshRow(4);
}
var removeColor = function(grid) {
if (coloredRows.value) {
delete coloredRows.value[2];
delete coloredRows.value[4];
grid.view.refreshRow(2);
grid.view.refreshRow(4);
}
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
<ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Accept">
<Listeners>
<Click Handler="
Ext.net.DirectMethods.Save({
success: function (result) {
if (result)
colorRows(#{GridPanel1});
}
});" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Remove color" Icon="Accept">
<Listeners>
<Click Handler="removeColor(#{GridPanel1});" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
</ext:GridPanel>
<ext:Hidden ID="coloredRows" runat="server">
</ext:Hidden>
</body>
</html>