What's New?

[CLOSED] Backgroud GridPanel cells in according with Background Row

  1. #1
    Jan 23, 2015, 1:47 PM

    [CLOSED] Backgroud GridPanel cells in according with Background Row

    In a GridPanel I have created an ComponentColumn with a TextField inside.
    I need to set backgroud color of TextField contained in every cells... in according with his parent backgroud color row.

    How to can do?
    Last edited by Daniil; Jan 26, 2015 at 7:04 PM. Reason: [CLOSED]
  2. #2
    Jan 23, 2015, 2:31 PM
    It would be wonderful (and most helpful) if you could provide us with an example of your grid!
  3. #3
    Jan 24, 2015, 7:16 AM
    This is the 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)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { 1, "Text 1" },
                new object[] { 2, "Text 2" },
                new object[] { 3, "Text 3" },
                new object[] { 4, "Text 4" },
                new object[] { 5, "Text 5" },

            };
            this.Store1.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title></title>

    <style type="text/css">
        .x-grid-row-alt .x-grid-cell, .x-grid-row-alt .x-grid-rowwrap-div {background-color: #00ffff;}
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:GridPanel ID="GridPanel1" runat="server" Title="Example" Width="500" Height="200">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="Int" />
                                <ext:ModelField Name="Text" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column runat="server" Text="ID" Width="200" DataIndex="ID" />
                    <ext:ComponentColumn runat="server" Text="Text" Flex="1" DataIndex="Text" >
                        <Component>
                            <ext:TextField runat="server" />
                        </Component>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>          
        </ext:GridPanel> 
    </form>
</body>
</html>

    this is the desired:

    Click image for larger version.  Name: Immagine.png  Views: 5  Size: 6.0 KB  ID: 19451
  4. #4
    Jan 24, 2015, 12:22 PM
    If all you want is to set a different alternating color for the cells, you may just override the class .x-grid-row-alt .x-grid-td to make it cyan:
    <style>
.x-grid-row-alt .x-grid-td {
 background-color: #00ffff;
}
</style>
    I hope that helps.

    If this helps you solve it, refer for this example for something else: Custom GridPanel UI

    Key points:
    - <style> tag
    - Cls= property on the grid.

    This will allow you to set custom colors to different grids on a same page.
    Last edited by fabricio.murta; Jan 25, 2015 at 4:19 PM.
  5. #5
    Jan 24, 2015, 4:31 PM
    Tnk Avenger,

    but my grid is not a normal grid with classic Columns
    In my grid is present a ComponentColumn with inside a TextField.
    I need set background color of this TextField in according with parent row background color.

    Can you help me?
  6. #6
    Jan 25, 2015, 2:33 PM
    mmkay. Then I am pretty sure what you want is the code below:
        <style type="text/css">
        .x-grid-row-alt .x-grid-td,
        .x-grid-row-alt .x-form-text {
            background-color: #00ffff;
            background-image: none;
        }
    </style>
    The image looks exactly like your screenshot now. I really hope now I hit the jackpot. :)

    By the way, you could do this yourself using your browser's DOM Explorer (debugger) and testing with the computed CSS Styles for the elements, and then make whatever class you want to 'inherit' from .x-grid-row-alt to get the desired effect. I hope with this sample you'll be able to figure how to extend the solution to other elements you may put on your grid.
    Last edited by geoffrey.mcgill; Jan 27, 2015 at 3:51 AM.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Jan 26, 2015, 1:13 PM
    Tnx Avenger!
    It's OK.

    You can close the Thread.

Similar Threads

  1. [CLOSED] Change entire GridPanel Row Backgroud Color based on a Cells Value
    By sisa in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 17, 2012, 5:35 PM
  2. [CLOSED] Strange behavior of grid row when cells contains cells command
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: May 09, 2012, 9:22 AM
  3. Merge GridPanel Cells
    By Dominik in forum 2.x Help
    Replies: 1
    Last Post: Mar 14, 2012, 1:55 PM
  4. Editable Grid Panel default style properties (font size and weight, header and cells background color, etc...)
    By garag in forum 1.x Help
    Replies: 0
    Last Post: Sep 27, 2011, 10:24 AM
  5. Wrap Long texr in cells of gridpanel
    By Sreejith in forum 1.x Help
    Replies: 2
    Last Post: Mar 23, 2009, 11:33 AM

Tags for this Thread

Posting Permissions