PDA

View Full Version : [CLOSED] Change grid cell color



BGeorge
Oct 29, 2008, 4:52 PM
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

Vladimir
Oct 29, 2008, 7:24 PM
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

BGeorge
Oct 29, 2008, 7:49 PM
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

BGeorge
Oct 29, 2008, 8:21 PM
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 ?

BGeorge
Oct 31, 2008, 2:45 PM
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

Vladimir
Oct 31, 2008, 2:50 PM
Hi,

In the Render you should return data text



return value;

BGeorge
Oct 31, 2008, 3:05 PM
OH.... DUH !!!!! man was not even thinking.

I knew it was something simple and overlooked.

Thanks

AnulekhaK
Dec 12, 2011, 6:05 AM
OH.... DUH !!!!! man was not even thinking.

I knew it was something simple and overlooked.

Thanks

Hi Vladimir,

We want the similiar behavior for grid panel using editablegrid plugin. Please advise.

Thanks
Anulekha