PDA

View Full Version : [CLOSED] Custom color in GridPanel



osef
Mar 07, 2014, 8:14 PM
Hi, I have a GridPanel where I want to custom of rows, I have a field (Grupo) where each record it has a value (1, 2 or 3), the record with 1 --> Green, 2 --> Red, 3 --> Blue

7891



<ext:ResourceManager ID="rmRowsCustomColor" runat="server" HideInDesign="true" />

<ext:GridPanel
ID="GridPanel1"
runat="server"
Height="390"
Title="Title"
Width="1102">
<Store>
<ext:Store ID="sSuperMercados" runat="server">
<Model>
<ext:Model ID="mSuperMercados" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Grupo" Type="Int" />
<ext:ModelField Name="Nombre" Type="String" />
<ext:ModelField Name="Direccion" Type="String" />
<ext:ModelField Name="NoExt" Type="String" />
<ext:ModelField Name="NoInt" Type="String" />
<ext:ModelField Name="Colonia" Type="String" />
<ext:ModelField Name="CodigoPostal" Type="String" />
<ext:ModelField Name="Municipio" Type="String" />
<ext:ModelField Name="Estado" Type="String" />
<ext:ModelField Name="Logotipo" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="cID" runat="server" DataIndex="ID" Text="ID" />
<ext:Column ID="cGrupo" runat="server" DataIndex="Grupo" Text="Grupo" />
<ext:Column ID="cNombre" runat="server" DataIndex="Nombre" Text="Nombre" />
<ext:Column ID="cDireccion" runat="server" DataIndex="Direccion" Text="Direccion" />
<ext:Column ID="cNoExt" runat="server" DataIndex="NoExt" Text="NoExt" />
<ext:Column ID="cNoInt" runat="server" DataIndex="NoInt" Text="NoInt" />
<ext:Column ID="cColonia" runat="server" DataIndex="Colonia" Text="Colonia" />
<ext:Column ID="cCodigoPostal" runat="server" DataIndex="CodigoPostal" Text="Codigo postal" />
<ext:Column ID="cMunicipio" runat="server" DataIndex="Municipio" Text="Municipio" />
<ext:Column ID="cEstado" runat="server" DataIndex="Estado" Text="Estado" />
<ext:Column ID="cLogotipo" runat="server" DataIndex="Logotipo" Text="Logotipo" />
</Columns>
</ColumnModel>
</ext:GridPanel>




protected void Page_Load(object sender, EventArgs e)
{
List<SuperMercados> lSuperMercados = new List<SuperMercados>();

for (int i = 0; i <= 5; i++)
{
SuperMercados oSuperMercados = new SuperMercados();
oSuperMercados.ID = i;
oSuperMercados.Grupo = 1;
oSuperMercados.Nombre = "Nombre" + i;
oSuperMercados.Direccion = "Direccion" + i;
oSuperMercados.NoExt = "NoExt" + i;
oSuperMercados.NoInt = "NoInt" + i;
oSuperMercados.Colonia = "Colonia" + i;
oSuperMercados.CodigoPostal = "CodigoPostal" + i;
oSuperMercados.Municipio = "Municipio" + i;
oSuperMercados.Estado = "Estado" + i;
oSuperMercados.Logotipo = "Logotipo" + i;

lSuperMercados.Add(oSuperMercados);
}

for (int i = 6; i <= 10; i++)
{
SuperMercados oSuperMercados = new SuperMercados();
oSuperMercados.ID = i;
oSuperMercados.Grupo = 2;
oSuperMercados.Nombre = "Nombre" + i;
oSuperMercados.Direccion = "Direccion" + i;
oSuperMercados.NoExt = "NoExt" + i;
oSuperMercados.NoInt = "NoInt" + i;
oSuperMercados.Colonia = "Colonia" + i;
oSuperMercados.CodigoPostal = "CodigoPostal" + i;
oSuperMercados.Municipio = "Municipio" + i;
oSuperMercados.Estado = "Estado" + i;
oSuperMercados.Logotipo = "Logotipo" + i;

lSuperMercados.Add(oSuperMercados);
}

for (int i = 11; i <= 15; i++)
{
SuperMercados oSuperMercados = new SuperMercados();
oSuperMercados.ID = i;
oSuperMercados.Grupo = 3;
oSuperMercados.Nombre = "Nombre" + i;
oSuperMercados.Direccion = "Direccion" + i;
oSuperMercados.NoExt = "NoExt" + i;
oSuperMercados.NoInt = "NoInt" + i;
oSuperMercados.Colonia = "Colonia" + i;
oSuperMercados.CodigoPostal = "CodigoPostal" + i;
oSuperMercados.Municipio = "Municipio" + i;
oSuperMercados.Estado = "Estado" + i;
oSuperMercados.Logotipo = "Logotipo" + i;

lSuperMercados.Add(oSuperMercados);
}

sSuperMercados.DataSource = lSuperMercados;

}

class SuperMercados
{
int id;
int grupo;
string nombre;
string direccion;
string noext;
string noint;
string colonia;
string codigopostal;
string municipio;
string estado;
string logotipo;

public int ID
{
get { return id; }
set { id = value; }
}

public int Grupo
{
get { return grupo; }
set { grupo = value; }
}

public string Nombre
{
get { return nombre; }
set { nombre = value; }
}

public string Direccion
{
get { return direccion; }
set { direccion = value; }
}

public string NoExt
{
get { return noext; }
set { noext = value; }
}

public string NoInt
{
get { return noint; }
set { noint = value; }
}

public string Colonia
{
get { return colonia; }
set { colonia = value; }
}

public string CodigoPostal
{
get { return codigopostal; }
set { codigopostal = value; }
}

public string Municipio
{
get { return municipio; }
set { municipio = value; }
}

public string Estado
{
get { return estado; }
set { estado = value; }
}

public string Logotipo
{
get { return logotipo; }
set { logotipo = value; }
}
}

Zdenek
Mar 08, 2014, 5:05 AM
Hello

the source of solution is in GetRowClass property :

...
<ext:GridPanel

<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="True">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>

...

then you just need to define in javascript


function getRowClass(record, rowIndex, rowParams, store) {
if(record.get('Grupo')==1)
return "green-grid-row";
if(record.get('Grupo')==2)
return "red-grid-row";
if(record.get('Grupo')==3)
return "blue-grid-row";

}

and finally add respective css classes




<Style type="text/css">
tr.red-grid-row .x-grid-cell {
background: red;
}
tr.green-grid-row .x-grid-cell {
background: green;
}
tr.blue-grid-row .x-grid-cell {
background: blue;
}
</Style>

Let me know if that works for you

Regards
Zdenek

osef
Mar 12, 2014, 10:49 PM
Hello

the source of solution is in GetRowClass property :

...
<ext:GridPanel

<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="True">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>

...

then you just need to define in javascript


function getRowClass(record, rowIndex, rowParams, store) {
if(record.get('Grupo')==1)
return "green-grid-row";
if(record.get('Grupo')==2)
return "red-grid-row";
if(record.get('Grupo')==3)
return "blue-grid-row";

}

and finally add respective css classes




<Style type="text/css">
tr.red-grid-row .x-grid-cell {
background: red;
}
tr.green-grid-row .x-grid-cell {
background: green;
}
tr.blue-grid-row .x-grid-cell {
background: blue;
}
</Style>

Let me know if that works for you

Regards
Zdenek

Thak you Zdenek