[CLOSED] Change grid cell color
Having a brain cramp here ! Trying to change the color of a cell in a grid based on the if another cell has a date in it.
Any ideas, looked around the extjs site but nothing there has worked, thought maybe the guru's here had a quick trick in a handler or function.
Thanks for any help.
Bill
RE: [CLOSED] Change grid cell color
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)
Code:
<%@ 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
Code:
<%@ 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
Code:
<%@ 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
RE: [CLOSED] Change grid cell color
Vlad,
Thanks for the quick reply, I was trying with the metadata, etc..etc. but I did not get it. Now I see.
Thank you, can't wait for documentation specific for coolite. Going back and forth thru the extjs api docs is confusing, Well at least for me :-)
Thanks again,
Bill
RE: [CLOSED] Change grid cell color
Opps forgot to ask, the data text doesn't show up. This what I was running into with other methods.
Am I missing something in the metadata ?
RE: [CLOSED] Change grid cell color
Vlad,
? - I tried the code, works great does change cell color, but text is not shown from cell. Now I tried to use tags and the background of the text in the cell changed but not the whole cell.
Any ideas, I know I am missing something simple.
Thanks again for your help
RE: [CLOSED] Change grid cell color
Hi,
In the Render you should return data text
RE: [CLOSED] Change grid cell color
OH.... DUH !!!!! man was not even thinking.
I knew it was something simple and overlooked.
Thanks