Hi,
1. If you need to change color of cell in a grid based on the if another cell (BUT THIS CELL IN SAME ROW) has a date in it then you can use next.
(Please note that these two cells must be in one row)
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] {"Test"},
new object[] {"01/01/2008"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"}
};
this.Store1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
<script type="text/javascript">
var RenderColor = function(value, meta, record) {
var color = 'red';
if( !isNaN(Date.parse(record.data['TestCell'])) ){
color = 'green';
}
//or can set css tyle to meta.css
meta.attr = 'style="background-color:'+ color +';"';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="TestCell" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
StripeRows="true"
ClicksToEdit="1"
Title="Test Grid"
Width="600"
Height="350"
AutoExpandColumn="TestCell">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="TestCell" Header="TestCell" DataIndex="TestCell">
</ext:Column>
<ext:Column ColumnID="ColorCell" Header="Color" DataIndex="ColorCell">
<Renderer Fn="RenderColor" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
This code works for editable grid also
2. But if cells in different rows then need another approach
For example, you need to set green color for cell in [0,1] if in cell [1,0] date presents
- example for none-editable grid
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] {"Test"},
new object[] {"01/01/2008"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"}
};
this.Store1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
<script type="text/javascript">
var RenderColor = function(value, meta, record, rowIndex, colIndex, store) {
if (rowIndex == 0) { //first row
var seconRecord = store.getAt(1);
if (!Ext.isEmpty(seconRecord)) {
var color = 'red';
if (!isNaN(Date.parse(seconRecord.data['TestCell']))) {
color = 'green';
}
//or can set css tyle to meta.css
meta.attr = 'style="background-color:' + color + ';"';
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="TestCell" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
StripeRows="true"
ClicksToEdit="1"
Title="Test Grid"
Width="600"
Height="350"
AutoExpandColumn="TestCell">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="TestCell" Header="TestCell" DataIndex="TestCell">
</ext:Column>
<ext:Column ColumnID="ColorCell" Header="Color" DataIndex="ColorCell">
<Renderer Fn="RenderColor" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
- example for editable grid
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"},
new object[] {"Test"}
};
this.Store1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
<script type="text/javascript">
var RenderColor = function(value, meta, record, rowIndex, colIndex, store) {
if (rowIndex == 0) { //first row
var seconRecord = store.getAt(1);
if (!Ext.isEmpty(seconRecord)) {
var color = 'red';
if (!isNaN(Date.parse(seconRecord.data['TestCell']))) {
color = 'green';
}
//or can set css tyle to meta.css
meta.attr = 'style="background-color:' + color + ';"';
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="TestCell" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
StripeRows="true"
ClicksToEdit="1"
Title="Test Grid"
Width="600"
Height="350"
AutoExpandColumn="TestCell">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="TestCell" Header="TestCell" DataIndex="TestCell">
<Editor>
<ext:TextField ID="TextBox1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ColumnID="ColorCell" Header="Color" DataIndex="ColorCell">
<Renderer Fn="RenderColor" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<AfterEdit Handler="if(e.row == 1){e.grid.getView().refreshRow(0);}" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
Hope this help