Hi,
How do I change the style of the text of a column in a GridPanel?
When I click on the header of a column I would like to change the color of the header text
and restore the original color when I click elsewhere.
Is it possible?
Bye,
Stefano
Printable View
Hi,
How do I change the style of the text of a column in a GridPanel?
When I click on the header of a column I would like to change the color of the header text
and restore the original color when I click elsewhere.
Is it possible?
Bye,
Stefano
Hi,
There is no such feature, but it can be implemented manually.
Please investigate the following example.
Example
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test11", "test12", "test13" },
new object[] { "test12", "test22", "test23" },
new object[] { "test13", "test32", "test33" }
};
store.DataBind();
}
}
</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 runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var lock = false;
var onBodyClick = function () {
if (lock) {
lock = false;
} else {
var grid = GridPanel1;
for (var i = 0; i < grid.getColumnModel().getColumnCount(); i++) {
grid.removeClass("my-hd-" + i);
}
}
}
var onReady = function () {
Ext.getBody().on('click', onBodyClick);
}
var onHeaderClickHandler = function (grid, columnIndex, e) {
lock = true;
grid.addClass("my-hd-" + columnIndex);
}
</script>
<style type="text/css">
.my-hd-0 .x-grid3-hd-0 {
color: Red;
}
.my-hd-1 .x-grid3-hd-1 {
color: Green;
}
.my-hd-2 .x-grid3-hd-2 {
color: Yellow;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<DocumentReady Handler="onReady();" />
</Listeners>
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="fit">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<Listeners>
<HeaderClick Fn="onHeaderClickHandler" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>