PDA

View Full Version : [CLOSED] How to highlight entire row in this grid control when value= valueXYZ?



Fahd
Sep 19, 2012, 4:12 PM
Hi,
In this online sample code, how do you highlight the entire row in the Grid instead of just changing the value to different color?
Thank you in advance for your help!

http://examples2.ext.net/#/GridPanel/ArrayGrid/Simple/



<%@ 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)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}

private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },

};
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.x-grid-row-over .x-grid-cell-inner {
font-weight : bold;
}
</style>

<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};


</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Simple Array Grid</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">

</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">

</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">

</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" >
<Renderer Fn="change" />
</ext:DateColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>

Daniil
Sep 19, 2012, 6:58 PM
Hi,

To stylize a cell, please use Renderer.

To stylize a row, please use GetRowClass.

Example

<%@ 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[] { "test1" },
new object[] { "test2" },
new object[] { "test1" },
new object[] { "test2" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var myRenderer = function (value, metadata) {
if (value === "test1") {
metadata.style = "color: red;"
}

return value;
};

var getRowClass = function (record, index, rowParams, store) {
if (record.get("test") === "test2") {
return "my-highlighted-row";
}
};
</script>

<style type="text/css">
.my-highlighted-row .x-grid-cell {
background-color: yellow !important;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test">
<Renderer Fn="myRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
</ext:GridPanel>
</body>
</html>

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.Table-method-getRowClass
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer

Fahd
Sep 19, 2012, 7:19 PM
Thank you for much. This works great for me!

Hi,

To stylize a cell, please use Renderer.

To stylize a row, please use GetRowClass.

Example

<%@ 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[] { "test1" },
new object[] { "test2" },
new object[] { "test1" },
new object[] { "test2" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var myRenderer = function (value, metadata) {
if (value === "test1") {
metadata.style = "color: red;"
}

return value;
};

var getRowClass = function (record, index, rowParams, store) {
if (record.get("test") === "test2") {
return "my-highlighted-row";
}
};
</script>

<style type="text/css">
.my-highlighted-row .x-grid-cell {
background-color: yellow !important;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test">
<Renderer Fn="myRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
</ext:GridPanel>
</body>
</html>

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.Table-method-getRowClass
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer