[CLOSED] TreePanel background colors for the rows.

  1. #1

    [CLOSED] TreePanel background colors for the rows.

    Hello,
    I have a tree panel, in which the background color for only the first column is set automatically. But for the other columns it will be white always.
    I want the background color to be set for the entire row.
    Previously I was using ext 1.7 and it was working fine. Now we have migrated from 1.7 to 2.5 and facing this issue. Please let me know how do i fix this issue.
    Please check the image below :

    Attached Thumbnails Click image for larger version. 

Name:	bgColor.png 
Views:	17 
Size:	26.9 KB 
ID:	18971  
    Last edited by Daniil; Jan 30, 2015 at 1:41 PM. Reason: [CLOSED]
  2. #2
    Hi @arjunrvasisht,

    Please clarify do you apply your custom CSS, right?

    If so, you should inspect HTML elements and its CSS to determine what is going wrong and how to adjust your CSS rules.

    This video demonstrates the technique that I am talking about:
    CSS Change TabPanel Header Color - Ext.NET on Vimeo
  3. #3
    Hi Daniil,
    I tried changing the background color using the fire bug. but once i update it in the code it will apply to the child nodes as well. As I have shown in the attached picture in the previous post, color shud be set only to the parent nodes but not for the child nodes.
  4. #4
    Daniil,

    I commented all the css overrides and checked, it looked like below:

    Click image for larger version. 

Name:	1.PNG 
Views:	9 
Size:	12.7 KB 
ID:	18991

    Then I overridden this css class:

     .x-grid-tree-node {
                background-color: #D9E8FB;
            }
    
            .x-grid-row {
                background-color: transparent;
            }
    This resulted as below:

    Click image for larger version. 

Name:	2.PNG 
Views:	12 
Size:	13.9 KB 
ID:	19001

    The css is being applied only to the first column of the tree panel. I want the same to be applied to all the columns.
  5. #5
    Hmm, I tried your CSS rules with my TreePanel, but the background doesn't apply at all, there is white as by default.

    Providing us with a test case to reproduce the problem would be helpful to see how everything is configured on your side.
  6. #6
    Hi Daniil,
    Can you suggest me your css rules for getting the background color for the rows as I have shown in the pic of ext 1.7 for ext 2.5. Well, you already have a tree panel with default white background. How would you use the css rule to get the background color for my requirement.
  7. #7
    Hi Daniil,
    Here is the runnable text case:

    aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="treepanelPOC.aspx.cs" Inherits="Honeywell.Ap3.WebApp.Pages.Views.treepanelPOC" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:XScript ID="XScript1" runat="server">
    
            <script type="text/javascript">
                var formatTreeValue = function (v) {
                    //debugger;
                    var strText = '<span style="background-color:{0};color: {1};width:100%!important;display: inline-table;text-align:right;">{2}</span>'
                    if (v != null || v != undefined) {
                        return String.format(strText, 'transparent', 'black', v);
                    }
                };
                </script>
        </ext:XScript>
        <style type="text/css">
            .x-grid-tree-node {
                background-color: #D9E8FB;
            }
    
            .x-grid-row {
                background-color: transparent;
            }
        </style>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <div>
                <ext:Container ID="Panel1" runat="server" Width="1150" Height="25" Padding="0" Layout="HBoxLayout" Border="true"
                    StyleSpec="background-color: #8DB2E3; border: 1px solid #99bbe8;font-size: 8.5pt; font-family: Arial; ">
                    <Defaults>
                        <ext:Parameter Name="margins" Value="0 0 0 0" Mode="Value" />
                    </Defaults>
                    <Items>
                        <ext:Label ID="T0" runat="server" Width="260" Height="25" StyleSpec="text-align:center;font-weight: bold;" />
                        <ext:Label ID="T1" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T2" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T3" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T4" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T5" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T6" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T7" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T8" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T9" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T10" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T11" runat="server" Width="74" Height="25" />
                        <ext:Label ID="T12" runat="server" Width="74" Height="25" />
                    </Items>
                </ext:Container>
                <ext:TreePanel
                    ID="treegridYTD"
                    runat="server"
                    Width="1165"
                    AutoScroll="true" Padding="0" Margin="0"
                    RootVisible="false" NoLeafIcon="true" UseArrows="false" EnableColumnHide="false" EnableColumnResize="false" SortableColumns="false" Scroll="Vertical"
                    Height="280">
                    <Fields>
                        <ext:ModelField Name="m_NameCol1" Type="String" />
                        <ext:ModelField Name="m_Jan" Type="Auto" />
                        <ext:ModelField Name="m_Feb" Type="Auto" />
                        <ext:ModelField Name="m_Mar" Type="Auto" />
                        <ext:ModelField Name="m_Apr" Type="Auto" />
                        <ext:ModelField Name="m_May" Type="Auto" />
                        <ext:ModelField Name="m_Jun" Type="Auto" />
                        <ext:ModelField Name="m_Jul" Type="Auto" />
                        <ext:ModelField Name="m_Aug" Type="Auto" />
                        <ext:ModelField Name="m_Sep" Type="Auto" />
                        <ext:ModelField Name="m_Oct" Type="Auto" />
                        <ext:ModelField Name="m_Nov" Type="Auto" />
                        <ext:ModelField Name="m_Dec" Type="Auto" />
                    </Fields>
                    <ColumnModel>
                        <Columns>
                            <ext:TreeColumn ID="TreeColumn1" runat="server" DataIndex="m_NameCol1" Width="260" Height="22" Text="Tier Level FTE Variance">
                            </ext:TreeColumn>
                            <ext:TemplateColumn ID="Column31" runat="server" DataIndex="m_Jan" Width="74" Text="Jan">
                                <Template ID="XTemplate1" runat="server">
                                    <Html>
                                                                                                    {m_Jan:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="TemplateColumn1" runat="server" DataIndex="m_Feb" Width="74" Text="Feb">
                                <Template ID="Template1" runat="server">
                                    <Html>
                                                                                                    {m_Feb:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column34" runat="server" DataIndex="m_Mar" Width="74" Text="Mar">
                                <Template ID="Template2" runat="server">
                                    <Html>
                                                                                                    {m_Mar:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column35" runat="server" DataIndex="m_Apr" Width="74" Text="Apr">
                                <Template ID="Template3" runat="server">
                                    <Html>
                                                                                                    {m_Apr:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column36" runat="server" DataIndex="m_May" Width="74" Text="May">
                                <Template ID="Template4" runat="server">
                                    <Html>
                                                                                                    {m_May:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column37" runat="server" DataIndex="m_Jun" Width="74" Text="Jun">
                                <Template ID="Template5" runat="server">
                                    <Html>
                                                                                                    {m_Jun:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column38" runat="server" DataIndex="m_Jul" Width="74" Text="Jul">
                                <Template ID="Template6" runat="server">
                                    <Html>
                                                                                                    {m_Jul:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column39" runat="server" DataIndex="m_Aug" Width="74" Text="Aug">
                                <Template ID="Template7" runat="server">
                                    <Html>
                                                                                                    {m_Aug:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column40" runat="server" DataIndex="m_Sep" Width="74" Text="Sep">
                                <Template ID="Template8" runat="server">
                                    <Html>
                                                                                                    {m_Sep:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column41" runat="server" DataIndex="m_Oct" Width="74" Text="Oct">
                                <Template ID="Template9" runat="server">
                                    <Html>
                                                                                                    {m_Oct:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column42" runat="server" DataIndex="m_Nov" Width="74" Text="Nov">
                                <Template ID="Template10" runat="server">
                                    <Html>
                                                                                                    {m_Nov:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                            <ext:TemplateColumn ID="Column43" runat="server" DataIndex="m_Dec" Width="74" Text="Dec">
                                <Template ID="Template11" runat="server">
                                    <Html>
                                                                                                    {m_Dec:this.formatTreeValue}
                                                                                                </Html>
                                    <Functions>
                                        <ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
                                    </Functions>
                                </Template>
                            </ext:TemplateColumn>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:TreeSelectionModel ID="TreeSelectionModel1" runat="server"></ext:TreeSelectionModel>
                    </SelectionModel>
                </ext:TreePanel>
            </div>
        </form>
    </body>
    </html>

    Page load:

      protected void Page_Load(object sender, EventArgs e)
            {
                string path = "C:/AP3/06-SourceCode/AP3 2012/Honeywell.Ap3.WebApp/treePanel.xml";
                DataSet ds = new DataSet();
                ds.ReadXml(path);
                DataTable dataTblYtdFteRecords = new DataTable();
                dataTblYtdFteRecords = ds.Tables[0];
    
                string strShortYear = "2015";
    
                treegridYTD.ColumnModel.Columns[0].Text = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tier Level FTE Variance";
                treegridYTD.ColumnModel.Columns[1].Text = "Jan " + strShortYear;
                treegridYTD.ColumnModel.Columns[2].Text = "Feb " + strShortYear;
                treegridYTD.ColumnModel.Columns[3].Text = "Mar " + strShortYear;
                treegridYTD.ColumnModel.Columns[4].Text = "Apr " + strShortYear;
                treegridYTD.ColumnModel.Columns[5].Text = "May " + strShortYear;
                treegridYTD.ColumnModel.Columns[6].Text = "Jun " + strShortYear;
                treegridYTD.ColumnModel.Columns[7].Text = "Jul " + strShortYear;
                treegridYTD.ColumnModel.Columns[8].Text = "Aug " + strShortYear;
                treegridYTD.ColumnModel.Columns[9].Text = "Sep " + strShortYear;
                treegridYTD.ColumnModel.Columns[10].Text = "Oct " + strShortYear;
                treegridYTD.ColumnModel.Columns[11].Text = "Nov " + strShortYear;
                treegridYTD.ColumnModel.Columns[12].Text = "Dec " + strShortYear;
    
    
                System.Data.DataView dataViewMetailCost = null;
    
    
                dataViewMetailCost = dataTblYtdFteRecords.DefaultView;
                dataViewMetailCost.RowFilter = "m_NameCol1 is null";
    
                //this.rptrMaterialCost.DataSource = dataViewMetailCost;
                //this.rptrMaterialCost.DataBind();
    
                dataViewMetailCost = dataTblYtdFteRecords.DefaultView;
                dataViewMetailCost.RowFilter = "m_NameCol1 ='Total FTE Variance'";
                if (dataViewMetailCost.Count > 0)
                {
                    for (int i = 0; i < dataViewMetailCost.Count; i++)
                    {
                        T0.Text = dataViewMetailCost[i]["m_NameCol1"].ToString();
    
                        var strValue = dataViewMetailCost[i]["m_Jan"].ToString();
                        var strHealth = dataViewMetailCost[i]["m_Jan_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T1);
    
                        strValue = dataViewMetailCost[i]["m_Feb"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Feb_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T2);
    
                        strValue = dataViewMetailCost[i]["m_Mar"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Mar_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T3);
    
                        strValue = dataViewMetailCost[i]["m_Apr"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Apr_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T4);
    
                        strValue = dataViewMetailCost[i]["m_May"].ToString();
                        strHealth = dataViewMetailCost[i]["m_May_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T5);
    
                        strValue = dataViewMetailCost[i]["m_Jun"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Jun_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T6);
    
                        strValue = dataViewMetailCost[i]["m_Jul"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Jul_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T7);
    
                        strValue = dataViewMetailCost[i]["m_Aug"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Aug_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T8);
    
                        strValue = dataViewMetailCost[i]["m_Sep"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Sep_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T9);
    
                        strValue = dataViewMetailCost[i]["m_Oct"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Oct_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T10);
    
                        strValue = dataViewMetailCost[i]["m_Nov"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Nov_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T11);
    
                        strValue = dataViewMetailCost[i]["m_Dec"].ToString();
                        strHealth = dataViewMetailCost[i]["m_Dec_H"].ToString();
                        SetHealthForYTDHeader(strValue, strHealth, T12);
                    }
                }
                for (int i = dataTblYtdFteRecords.Rows.Count - 1; i > 0; i--)
                {
                    if (dataTblYtdFteRecords.Rows[i]["m_NameCol1"].ToString().Trim() == string.Empty)
                    {
                        dataTblYtdFteRecords.Rows.RemoveAt(i);
                    }
                }
    
                this.BindYTDFTEGrid(treegridYTD.Root, dataTblYtdFteRecords);
            }
    
    
            private void SetHealthForYTDHeader(string strValue, string strHealth, Ext.Net.Label tBarItem)
            {
                tBarItem.Text = strValue;
                if (string.Equals(strHealth, "G"))
                {
                    tBarItem.StyleSpec = "width:74px;font-weight:bold;background-color:Green;color:White;text-align:right;padding-right:5px;border-left: solid 1px #eeeeee;padding-left:0px;left:0px !important;";
                }
                else if (string.Equals(strHealth, "Y"))
                {
                    tBarItem.StyleSpec = "width:74px;font-weight:bold;background-color:Yellow;color:Black;text-align:right;padding-right:5px;border-left: solid 1px #eeeeee;padding-left:0px;left:0px !important;";
                }
                else if (string.Equals(strHealth, "R"))
                {
                    tBarItem.StyleSpec = "width:74px;font-weight:bold;background-color:Red;color:White;text-align:right;padding-right:5px;border-left: solid 1px #eeeeee;padding-left:0px;left:0px !important;";
                }
                else
                {
                    tBarItem.StyleSpec = "width:74px;font-weight:bold;background-color :White;color:Black;text-align:right;padding-right:5px;border-left: solid 1px #eeeeee;padding-left:0px;left:0px !important;";
                }
            }
    
            private Ext.Net.NodeCollection BindYTDFTEGrid(Ext.Net.NodeCollection nodes, DataTable dataTblYtdFteRecords)
            {
                if (nodes == null)
                {
                    nodes = new Ext.Net.NodeCollection();
                }
                Ext.Net.Node root = new Ext.Net.Node();
                root.Text = "Root";
                root.Icon = Ext.Net.Icon.Add;
                nodes.Add(root);
    
                Ext.Net.Node node = null;
                Ext.Net.Node secondLevelNode = null;
                string strPrevTier = string.Empty;
                for (int i = 1; i < dataTblYtdFteRecords.Rows.Count; i++)
                {
                    if (strPrevTier != dataTblYtdFteRecords.Rows[i]["m_NameCol1"].ToString().Trim())
                    {
                        if (dataTblYtdFteRecords.Rows[i]["m_NameCol2"].ToString().Trim() == string.Empty)
                        {
                            node = new Ext.Net.Node();
                            node.NodeID = i.ToString() + 1;
                            node.Text = dataTblYtdFteRecords.Rows[i]["m_NameCol1"].ToString();
                            node.Leaf = false;
                            node.CustomAttributes.Add(new ConfigItem("m_NameCol1", dataTblYtdFteRecords.Rows[i]["m_NameCol1"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Jan", dataTblYtdFteRecords.Rows[i]["m_Jan"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Feb", dataTblYtdFteRecords.Rows[i]["m_Feb"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Mar", dataTblYtdFteRecords.Rows[i]["m_Mar"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Apr", dataTblYtdFteRecords.Rows[i]["m_Apr"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_May", dataTblYtdFteRecords.Rows[i]["m_May"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Jun", dataTblYtdFteRecords.Rows[i]["m_Jun"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Jul", dataTblYtdFteRecords.Rows[i]["m_Jul"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Aug", dataTblYtdFteRecords.Rows[i]["m_Aug"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Sep", dataTblYtdFteRecords.Rows[i]["m_Sep"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Oct", dataTblYtdFteRecords.Rows[i]["m_Oct"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Nov", dataTblYtdFteRecords.Rows[i]["m_Nov"].ToString(), ParameterMode.Value));
                            node.CustomAttributes.Add(new ConfigItem("m_Dec", dataTblYtdFteRecords.Rows[i]["m_Dec"].ToString(), ParameterMode.Value));
                            node.Expanded = false;
                            node.Icon = Ext.Net.Icon.Folder;
                            node.Cls = "x-grid-tree-node";
                            root.Children.Add(node);
                        }
                        for (int j = i + 1; j < dataTblYtdFteRecords.Rows.Count; j++)
                        {
                            if (dataTblYtdFteRecords.Rows[i]["m_NameCol1"].ToString().Trim() == dataTblYtdFteRecords.Rows[j]["m_NameCol1"].ToString().Trim() &&
                                                                                                dataTblYtdFteRecords.Rows[j]["m_NameCol2"].ToString().Trim() != string.Empty)
                            {
                                secondLevelNode = new Ext.Net.Node();
                                secondLevelNode.NodeID = j.ToString() + 2;
                                secondLevelNode.Text = dataTblYtdFteRecords.Rows[j]["m_NameCol2"].ToString();
                                secondLevelNode.Leaf = true;
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_NameCol1", dataTblYtdFteRecords.Rows[j]["m_NameCol2"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Jan", dataTblYtdFteRecords.Rows[j]["m_Jan"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Feb", dataTblYtdFteRecords.Rows[j]["m_Feb"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Mar", dataTblYtdFteRecords.Rows[j]["m_Mar"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Apr", dataTblYtdFteRecords.Rows[j]["m_Apr"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_May", dataTblYtdFteRecords.Rows[j]["m_May"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Jun", dataTblYtdFteRecords.Rows[j]["m_Jun"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Jul", dataTblYtdFteRecords.Rows[j]["m_Jul"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Aug", dataTblYtdFteRecords.Rows[j]["m_Aug"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Sep", dataTblYtdFteRecords.Rows[j]["m_Sep"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Oct", dataTblYtdFteRecords.Rows[j]["m_Oct"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Nov", dataTblYtdFteRecords.Rows[j]["m_Nov"].ToString(), ParameterMode.Value));
                                secondLevelNode.CustomAttributes.Add(new ConfigItem("m_Dec", dataTblYtdFteRecords.Rows[j]["m_Dec"].ToString(), ParameterMode.Value));
                                secondLevelNode.Expanded = false;
                                secondLevelNode.Cls = "x-grid-row";
                                node.Children.Add(secondLevelNode);
                            }
                            else
                            {
                                break;
                            }
                        }
                    }
                    strPrevTier = dataTblYtdFteRecords.Rows[i]["m_NameCol1"].ToString().Trim();
                }
                return nodes;
            }

    xml file for tree panel input:

    <?xml version="1.0" encoding="utf-8" ?>
    <TechIndicator_Table>
      <sample>
        <m_Order>1</m_Order>
        <m_NameCol1>Total FTE Varience</m_NameCol1>
        <m_NameCol2></m_NameCol2>
        <m_Jan>1</m_Jan>
        <m_Jan_H></m_Jan_H>
        <m_Feb>2</m_Feb>
        <m_Feb_H></m_Feb_H>
        <m_Mar>2</m_Mar>
        <m_Mar_H></m_Mar_H>
        <m_Apr>3</m_Apr>
        <m_Apr_H></m_Apr_H>
        <m_May>4</m_May>
        <m_May_H></m_May_H>
        <m_Jun>5</m_Jun>
        <m_Jun_H></m_Jun_H>
        <m_Jul>4</m_Jul>
        <m_Jul_H></m_Jul_H>
        <m_Aug>5</m_Aug>
        <m_Aug_H></m_Aug_H>
        <m_Sep>2</m_Sep>
        <m_Sep_H></m_Sep_H>
        <m_Oct>4</m_Oct>
        <m_Oct_H></m_Oct_H>
        <m_Nov>4</m_Nov>
        <m_Nov_H></m_Nov_H>
        <m_Dec>6</m_Dec>
        <m_Dec_H></m_Dec_H>
        <m_YTD></m_YTD>
        <m_YTD_H></m_YTD_H>
      </sample>
      <sample>
        <m_Order>1</m_Order>
        <m_NameCol1>AME</m_NameCol1>
        <m_NameCol2></m_NameCol2>
        <m_Jan>1</m_Jan>
        <m_Jan_H></m_Jan_H>
        <m_Feb>2</m_Feb>
        <m_Feb_H></m_Feb_H>
        <m_Mar>2</m_Mar>
        <m_Mar_H></m_Mar_H>
        <m_Apr>3</m_Apr>
        <m_Apr_H></m_Apr_H>
        <m_May>4</m_May>
        <m_May_H></m_May_H>
        <m_Jun>5</m_Jun>
        <m_Jun_H></m_Jun_H>
        <m_Jul>4</m_Jul>
        <m_Jul_H></m_Jul_H>
        <m_Aug>5</m_Aug>
        <m_Aug_H></m_Aug_H>
        <m_Sep>2</m_Sep>
        <m_Sep_H></m_Sep_H>
        <m_Oct>4</m_Oct>
        <m_Oct_H></m_Oct_H>
        <m_Nov>4</m_Nov>
        <m_Nov_H></m_Nov_H>
        <m_Dec>6</m_Dec>
        <m_Dec_H></m_Dec_H>
        <m_YTD></m_YTD>
        <m_YTD_H></m_YTD_H>
      </sample>
      <sample>
        <m_Order>1</m_Order>
        <m_NameCol1>AME</m_NameCol1>
        <m_NameCol2>AME_1</m_NameCol2>
        <m_Jan>1</m_Jan>
        <m_Jan_H></m_Jan_H>
        <m_Feb>2</m_Feb>
        <m_Feb_H></m_Feb_H>
        <m_Mar>2</m_Mar>
        <m_Mar_H></m_Mar_H>
        <m_Apr>3</m_Apr>
        <m_Apr_H></m_Apr_H>
        <m_May>4</m_May>
        <m_May_H></m_May_H>
        <m_Jun>5</m_Jun>
        <m_Jun_H></m_Jun_H>
        <m_Jul>4</m_Jul>
        <m_Jul_H></m_Jul_H>
        <m_Aug>5</m_Aug>
        <m_Aug_H></m_Aug_H>
        <m_Sep>2</m_Sep>
        <m_Sep_H></m_Sep_H>
        <m_Oct>4</m_Oct>
        <m_Oct_H></m_Oct_H>
        <m_Nov>4</m_Nov>
        <m_Nov_H></m_Nov_H>
        <m_Dec>6</m_Dec>
        <m_Dec_H></m_Dec_H>
        <m_YTD></m_YTD>
        <m_YTD_H></m_YTD_H>
      </sample>
      <sample>
        <m_Order>1</m_Order>
        <m_NameCol1>AME</m_NameCol1>
        <m_NameCol2>AME_2</m_NameCol2>
        <m_Jan>1</m_Jan>
        <m_Jan_H></m_Jan_H>
        <m_Feb>2</m_Feb>
        <m_Feb_H></m_Feb_H>
        <m_Mar>2</m_Mar>
        <m_Mar_H></m_Mar_H>
        <m_Apr>3</m_Apr>
        <m_Apr_H></m_Apr_H>
        <m_May>4</m_May>
        <m_May_H></m_May_H>
        <m_Jun>5</m_Jun>
        <m_Jun_H></m_Jun_H>
        <m_Jul>4</m_Jul>
        <m_Jul_H></m_Jul_H>
        <m_Aug>5</m_Aug>
        <m_Aug_H></m_Aug_H>
        <m_Sep>2</m_Sep>
        <m_Sep_H></m_Sep_H>
        <m_Oct>4</m_Oct>
        <m_Oct_H></m_Oct_H>
        <m_Nov>4</m_Nov>
        <m_Nov_H></m_Nov_H>
        <m_Dec>6</m_Dec>
        <m_Dec_H></m_Dec_H>
        <m_YTD></m_YTD>
        <m_YTD_H></m_YTD_H>
      </sample>
    </TechIndicator_Table>
  8. #8
    I would recommend you to use a GetRowClass.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var getRowClass = function(record, rowIndex, rowParams, store){
                if (record.hasChildNodes()) {
                    return "my-row";
                }
            };
        </script>
    
        <style>
            .my-row .x-grid-cell {
                background-color: #D9E8FB;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TreePanel ID="TreePanel1" runat="server">
                <Root>
                    <ext:Node Text="Root (level 0)" Expanded="true">
                        <Children>
                            <ext:Node Text="Node1 (level 1)" Expanded="true">
                                <Children>
                                    <ext:Node Text="Node1 (level 2)" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                            <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            <ext:Node Text="Node2 (level 1)" Expanded="true">
                                <Children>
                                    <ext:Node Text="Node1 (level 2)" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                            <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                <ViewConfig>
                    <GetRowClass Fn="getRowClass" />
                </ViewConfig>
            </ext:TreePanel>
        </form>
    </body>
    </html>
    P.S. Please try to provide standalone and minimized test cases, see Example (Very Helpful) here:
    Forum Guidelines For Posting New Topics

Similar Threads

  1. Replies: 7
    Last Post: Nov 22, 2014, 6:08 AM
  2. Replies: 4
    Last Post: Apr 10, 2013, 3:33 PM
  3. Replies: 5
    Last Post: Jun 29, 2012, 12:16 PM
  4. [CLOSED] GridPanel.Rows.Changing Background Color of Rows
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 01, 2012, 5:18 PM
  5. [CLOSED] Alternating background colors of a listview row
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 23, 2011, 2:35 PM

Tags for this Thread

Posting Permissions