PDA

View Full Version : [CLOSED] how to set row's background color according column's renderer function?



tobros
Dec 16, 2013, 2:33 AM
the renderer function's prototype


"renderer": function(value,metadata,record,rowIndex,colIndex,s tore,view){

},

how to get the row through rowindex , then set the row's background's color?

Daniil
Dec 16, 2013, 3:51 AM
Hi @tobros,

Applying styles to the entire rows should be done via a GridView's GetRowClass.
http://examples2.ext.net/#/GridPanel/Miscellaneous/Marking_Records/

tobros
Dec 17, 2013, 2:35 AM
i wrote a sample code , i want to change the "sum" row's background color which rows are generated in code behind.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm9.aspx.cs" Inherits="TobrosCWT.test.WebForm9" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script runat="server">
public class Student
{
public int id { get; set; }
public string name { get; set; }
public string sex { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var sList = new List<Student>
{
new Student{id = 2,name = "s2",sex ="female"},
new Student{id = 4,name = "s4",sex ="female"},
new Student{id = 7,name = "s7",sex ="female"},
new Student{id = 1,name = "s1",sex ="male"},
new Student{id = 3,name = "s3",sex ="male"},
new Student{id = 5,name = "s5",sex ="male"},
new Student{id = 6,name = "s6",sex ="male"}
};
bool first = true;
int i = 1;
var sList1 = new List<Student>();
string last = "";
foreach (var o in sList)
{
if (first)
{
sList1.Add(o);
}else if (o.sex == last)
{
i=i+1;
sList1.Add(o);
}
else
{
sList1.Add(new Student{id=sList.Count+1,name = "sum",sex = i.ToString()});
i = 1;
sList1.Add(o);
}
first = false;
last = o.sex;
}
sList1.Add(new Student { id = sList1.Count + 1,name = "sum",sex = i.ToString() });
student_s.DataSource = sList1;
student_s.DataBind();
}
}

</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:GridPanel runat="server">
<Store>
<ext:Store runat="server" ID="student_s">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="name"></ext:ModelField>
<ext:ModelField Name="sex"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="id" Text="id"></ext:Column>
<ext:Column runat="server" DataIndex="name" Text="name"></ext:Column>
<ext:Column runat="server" DataIndex="sex" Text="sex"></ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Dec 17, 2013, 12:19 PM
I can suggest the following solution.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
public class Student
{
public int id { get; set; }
public string name { get; set; }
public string sex { get; set; }
public bool isSummaryRow { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var sList = new List<Student>
{
new Student{id = 2,name = "s2",sex ="female" },
new Student{id = 4,name = "s4",sex ="female"},
new Student{id = 7,name = "s7",sex ="female"},
new Student{id = 1,name = "s1",sex ="male"},
new Student{id = 3,name = "s3",sex ="male"},
new Student{id = 5,name = "s5",sex ="male"},
new Student{id = 6,name = "s6",sex ="male"}
};
bool first = true;
int i = 1;
var sList1 = new List<Student>();
string last = "";
foreach (var o in sList)
{
if (first)
{
sList1.Add(o);
}
else if (o.sex == last)
{
i = i + 1;
sList1.Add(o);
}
else
{
sList1.Add(new Student { id = sList.Count + 1, name = "sum", sex = i.ToString(), isSummaryRow = true });
i = 1;
sList1.Add(o);
}
first = false;
last = o.sex;
}
sList1.Add(new Student { id = sList1.Count + 1, name = "sum", sex = i.ToString(), isSummaryRow = true });
student_s.DataSource = sList1;
student_s.DataBind();
}
}

</script>

<html>
<head>
<title>Ext.NET v2 Example</title>

<script>
var getRowClass = function (record, rowIndex, rowParams, store) {
if (record.data.isSummaryRow) {
return "summary-row";
}
};
</script>

<style>
.summary-row td.x-grid-td {
background-color: yellow;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel runat="server">
<Store>
<ext:Store ID="student_s" runat="server" >
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="name" />
<ext:ModelField Name="sex" />
<ext:ModelField Name="isSummaryRow" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="id" Text="id" />
<ext:Column runat="server" DataIndex="name" Text="name" />
<ext:Column runat="server" DataIndex="sex" Text="sex" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>