[CLOSED] Custom color in GridPanel

  1. #1

    [CLOSED] Custom color in GridPanel

    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

    Click image for larger version. 

Name:	GridPanelColorRowsByGrupo.png 
Views:	34 
Size:	32.9 KB 
ID:	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; }
                }
            }
    Last edited by Daniil; Mar 13, 2014 at 5:45 AM. Reason: [CLOSED]
  2. #2
    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
  3. #3
    Quote Originally Posted by Zdenek View Post
    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

Similar Threads

  1. Custom dinamic background column color Gridpanel
    By dinhhung09138 in forum 2.x Help
    Replies: 1
    Last Post: Dec 10, 2013, 12:45 AM
  2. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  3. Row Color on the GridPanel
    By flaviodamaia in forum 1.x Help
    Replies: 2
    Last Post: Sep 14, 2010, 1:26 PM
  4. Replies: 0
    Last Post: Jun 11, 2009, 3:45 AM
  5. Replies: 2
    Last Post: Mar 25, 2009, 1:14 AM

Tags for this Thread

Posting Permissions