[CLOSED] TreePanel

  1. #1

    [CLOSED] TreePanel

    Hi Team,

    How to set dynamically multiple background colors in single column of tree grid based on value.

    e.g
    Column Header
    Click image for larger version. 

Name:	Image.png 
Views:	2 
Size:	16.3 KB 
ID:	24356

    Same function is working in grid panel column (with help of span var strMultiValueBackground = "<span class='{0}'>{1}</span><span class='{2}'>{3}</span>";) but unable to set the same for Tree grid template column.

    thanks,
    Prasoon
    Last edited by Daniil; Dec 14, 2015 at 7:50 AM. Reason: [CLOSED]
  2. #2
    Hi @Prasoon,

    Rather than using a TemplateColumn for a TreePanel I would recommend to use a regular Column with the same Renderer that you use for the GridPanel's Column. I would expect the same result.
  3. #3
    I had tried with normal column renderer but on click on tree root node it was throwing below exception

    Click image for larger version. 

Name:	Error.png 
Views:	3 
Size:	52.1 KB 
ID:	24357

    thanks,
    Prasoon
  4. #4
    i have fixed the error but its not rendering color, please find sample code below
    -----------------------------------------------aspx file---------------------------------------
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomDashboard.aspx.cs" Inherits="Ap3.WebApp.CustomDashboard" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <link href="../../CSS/Common/Common.css" rel="stylesheet" type="text/css" />
        <link type="text/css" rel="Stylesheet" href="../../CSS/HomePages/HomePages.css" />
    
        <link type="text/css" rel="Stylesheet" href="../../CSS/HomePages/Notifications.css" />
        <style type="text/css">
            .RedIPDSColor {
                background-color: #FF0000; /* Red Color */
                color: White;
                text-align: right;
                border: 1px;
                border-color: blue;
            }
    
            .YellowIPDSColor {
                background-color: #FFFF00;
                color: Black; /*background-color:Green;*/
                text-align: right;
                border: 1px;
                border-color: blue;
            }
    
            .GreenIPDSColor {
                background-color: green;
                color: white; /*background-color:Green;*/
                text-align: right;
                border: 1px;
                border-color: blue;
            }
    
            .GrayIPDSColor {
                background-color: #c6c6c6;
                color: black;
                text-align: right;
                border: 1px;
                border-color: blue;
            }
    
            .BlueIPDSColor {
                background-color: #0002FA;
                color: white; /*background-color:Blue;*/
                text-align: right;
                border: 1px;
                border-color: blue;
            }
        </style>
        <script>
            var beforerecorddrop = function (node, data, overModel, dropPosition, dropFn) {
                if (Ext.isArray(data.records)) {
                    var records = data.records,
                        rec;
                    //  debugger;
                    data.records = [];
    
                    for (var i = 0; i < records.length; i++) {
                        rec = records[i];
    
                        data.records.push({
                            task: rec.get("task"),
                            leaf: true,
                            user: rec.get("user"),
                            change: rec.get("change"),
                            pctChange: rec.get("pctChange"),
                            qtip: rec.get("lastChange")
                        });
                        var id = rec.get("task");
    
                        rec.stores[0].remove(rec);
                    }
    
    
                    return true;
                }
            };
    
            var beforenodedrop = function (node, data, overModel, dropPosition, dropFn) {
                if (Ext.isArray(data.records)) {
                    var records = data.records,
                        rec;
                    //  debugger;
                    data.records = [];
    
                    for (var i = 0; i < records.length; i++) {
                        rec = records[i];
    
                        data.records.push(this.store.createModel({
                            company: rec.get("task"),
                            price: rec.get("user"),
                            change: rec.get("change"),
                            pctChange: rec.get("pctChange"),
                            lastChange: rec.get("qtip")
                        }));
    
                        rec.remove(true);
                    }
    
                    return true;
                }
            };
           
            
            var nodeLoad = function (store, operation, options) {
                //debugger;
                var node = operation.node;
                App.direct.NodeLoad(node.getId(), {
                    success: function (result) {
                        node.set('loading', false);
                        node.set('loaded', true);
                        var data = Ext.decode(result);
                        node.appendChild(data, undefined, true);
                        node.expand();
                    },
    
                    failure: function (errorMsg) {
                        Ext.Msg.alert('Failure', errorMsg);
                    }
                });
    
                return false;
            };
    
            var colorFillFundedUnfundedRate = function (value, metadata, record, rowIndex, colIndex, store) {
    
                strColorF = "";
                strColorUnFunded = "";
    
                if (record.data.leaf) {
                    debugger;
                    var strMultiValueBackground = "<span class='{0}'>{1}</span>" +
                                               "<span class='{2}'>{3}</span>";
    
                    if (record.data.IsAllowed == false) {
                        return;
                    }
    
                    if (record.data.FillRate_Funded_H == "2") {
                        strColorF = "grFillRateLanding";
                    }
                    else if (record.data.FillRate_Funded_H == "3") {
                        strColorF = "ylFillRateLanding";
                    }
                    else if (record.data.FillRate_Funded_H == "4") {
                        strColorF = "rdFillRateLanding";
                    }
                    else {
                        strColorF = "NoHealthLanding";
                    }
    
    
                    if (record.data.FillRate_UnFunded_H == "2") {
                        strColorUnFunded = "grFillRateUnFundedLanding";
                    }
                    else if (record.data.FillRate_UnFunded_H == "3") {
                        strColorUnFunded = "ylFillRateUnFundedLanding";
                    }
                    else if (record.data.FillRate_UnFunded_H == "4") {
                        strColorUnFunded = "rdFillRateUnFundedLanding";
                    }
                    else {
                        strColorUnFunded = "NoHealthLanding";
                    }
    
                    value_Funded = record.data.FillRate_Funded;
                    value_Unfunded = record.data.FillRate_UnFunded;
    
                    if (value_Funded != undefined && value_Funded != "" && value_Funded != null) {
                        value_Funded = parseFloat(value_Funded).toFixed(1);
                    }
    
                    if (value_Unfunded != undefined && value_Unfunded != "" && value_Unfunded != null) {
                        value_Unfunded = parseFloat(value_Unfunded).toFixed(1);
                    }
    
                    return String.format(strMultiValueBackground, strColorF, record.data.FillRate_Funded != null ? value_Funded + "%" : " ", strColorUnFunded, record.data.FillRate_UnFunded != null ? value_Unfunded + "%" : " ");
                }
                return value;
            }
        </script>
    
        <ext:XScript ID="XScript2" runat="server">
            <script type="text/javascript">
                var RenderIPDSHealth = function (columnValue, columnValueCSS, record, rowIndex) {
    
    
                    switch (columnValue) {
                        case 1://Blue                          
                            columnValueCSS.css = "BlueIPDSColor";
                            break
                        case 2://Green                           
                            columnValueCSS.css = "GreenIPDSColor";
                            break;
                        default:
                            columnValueCSS.css = "GrayIPDSColor";
                            break;
                    }
                    return columnValue;
                };
    
                var RenderTreeHealth = function (columnValue, columnValueCSS, record, rowIndex) {
    
                    var value = record.data.change.toString();
                    if (value != "") {
                        // debugger;
                        switch (value) {
                            case "1"://Blue                          
                                columnValueCSS.css = "BlueIPDSColor";
                                break
                            case "2"://Green                           
                                columnValueCSS.css = "GreenIPDSColor";
                                break;
                            default:
                                columnValueCSS.css = "GrayIPDSColor";
                                break;
                        }
                    }
                    return columnValue;
                };
    
            </script>
        </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel
                runat="server"
                Width="1200"
                Height="400"
                Layout="BorderLayout">
                <Items>
                    <ext:GridPanel
                        runat="server"
                        Region="Center"
                        Title="Grid"
                        MultiSelect="true"
                        Margins="5 0 5 5">
                        <Store>
                            <ext:Store
                                ID="Store1"
                                runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="task" />
                                            <ext:ModelField Name="user" />
                                            <ext:ModelField Name="change" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column
                                    runat="server"
                                    Text="task"
                                    Sortable="true"
                                    DataIndex="task"
                                    Flex="1" />
                                <ext:Column
                                    runat="server"
                                    Text="user"
                                    Width="75"
                                    Sortable="true"
                                    DataIndex="user" Visible="false">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                                <ext:Column
                                    runat="server"
                                    Text="change"
                                    Width="75"
                                    Sortable="true"
                                    DataIndex="change" Visible="false">
                                    <Renderer Fn="RenderIPDSHealth"></Renderer>
                                </ext:Column>
                            </Columns>
    
                        </ColumnModel>
    
                        <View>
                            <ext:GridView runat="server">
                                <Plugins>
                                    <ext:GridDragDrop runat="server" DragGroup="grid2tree" DropGroup="tree2grid" />
                                </Plugins>
                                <Listeners>
                                    <BeforeDrop Fn="beforenodedrop" />
                                </Listeners>
                            </ext:GridView>
                        </View>
                    </ext:GridPanel>
    
                    <ext:TreePanel
                        ID="treeTest"
                        runat="server"
                        Region="East"
                        Width="800"
                        Title="Tree"
                        AutoScroll="true"
                        Margins="5 5 5 0"
                        Split="true">
                        <Fields>
                            <ext:ModelField Name="task" />
                            <ext:ModelField Name="user" />
                            <ext:ModelField Name="change" />
                            <ext:ModelField Name="FillRate_Funded" />
                            <ext:ModelField Name="FillRate_Funded_H" />
                            <ext:ModelField Name="FillRate_UnFunded" />
                            <ext:ModelField Name="FillRate_UnFunded_H" />
                        </Fields>
                        <ColumnModel>
                            <Columns>
                                <ext:TreeColumn
                                    runat="server"
                                    Text="Task"
                                    Flex="2"
                                    Sortable="true"
                                    DataIndex="task">
                                </ext:TreeColumn>
                                <ext:Column
                                    runat="server"
                                    Text="Assigned To"
                                    Flex="1"
                                    Sortable="true"
                                    DataIndex="user">
                                </ext:Column>
                                <ext:Column
                                    runat="server"
                                    Text="change"
                                    Flex="1"
                                    Sortable="true"
                                    DataIndex="change">
                                    <Renderer Fn="RenderTreeHealth"></Renderer>
                                </ext:Column>
                                <ext:Column runat="server" DataIndex="" Text="Multicolor">
                                    <Renderer Fn="colorFillFundedUnfundedRate" />
                                </ext:Column>
    
                                <%-- <ext:TemplateColumn ID="TemplateColumn2" runat="server" Text="user"  Width="75" DataIndex="user"
                                                                    Align="Center">
                                                                    <Template ID="Template2" runat="server">
                                                                        <Html>
                                                                            {user:this.formatBackColorForTree}
                                                                        </Html>
                                                                        <Functions>
                                                                            <ext:JFunction Name="formatBackColor" Fn="formatBackColor" />
                                                                        </Functions>
                                                                    </Template>
                                                                </ext:TemplateColumn> 
                        <ext:TemplateColumn ID="TemplateColumn3" runat="server" Text="FillRate_Funded"  Width="75" DataIndex="change"
                                                                    Align="Center">
                                                                    <Template ID="Template3" runat="server">
                                                                        <Html>
                                                                            {change:this.formatBackColorForTree}
                                                                        </Html>
                                                                        <Functions>
                                                                            <ext:JFunction Name="formatBackColor" Fn="formatBackColor" />
                                                                        </Functions>
                                                                    </Template>
                                                                </ext:TemplateColumn> 
                         <ext:TemplateColumn ID="TemplateColumn1" runat="server" Text="FillRate_Funded"  Width="75" DataIndex="FillRate_Funded"
                                                                    Align="Center">
                                                                    <Template ID="Template1" runat="server">
                                                                        <Html>
                                                                            {FillRate_Funded:this.formatBackColorForTree}
                                                                        </Html>
                                                                        <Functions>
                                                                            <ext:JFunction Name="formatBackColor" Fn="formatBackColor" />
                                                                        </Functions>
                                                                    </Template>
                                                                </ext:TemplateColumn> --%>
                                <%--   <ext:TemplateColumn ID="TemplateColumn12" runat="server" DataIndex="" MenuDisabled="true" Text="Technical">
                                                    <Template ID="Template2" runat="server">
                                                        <Html>
                                                            <tpl for=".">
    			                                                <span style="background-color:#FF0000;color:White;width:33%;display:inline-table;text-align:right;">{FillRate_Funded}</span>
    				                                            <span style="background-color:#FEFF49;color:Black;width:33%;display:inline-table;text-align:right;">{FillRate_Funded}</span>
    				                                            <span style="background-color:#039F10;color:White;width:33%;display:inline-table;text-align:right;">{FillRate_Funded}</span>
    		                                                </tpl>
                                                        </Html>
                                                    </Template>
                                                </ext:TemplateColumn>--%>
    
                                <%--
                         <ext:TemplateColumn ID="TemplateColumn7" runat="server" Text="change" Flex="1" Width="75" DataIndex="change"
                                                                    Align="Center">
                                                                    <Template ID="Template3" runat="server">
                                                                        <Html>
                                                                            {Risk:this.RenderIPDSHealth}
                                                                        </Html>
                                                                        <Functions>
                                                                            <ext:JFunction Name="RenderIPDSHealth" Fn="RenderIPDSHealth" />
                                                                        </Functions>
                                                                    </Template>
                                                                </ext:TemplateColumn>    --%>
                            </Columns>
                        </ColumnModel>
                        <Root>
                            <ext:Node NodeID="0" Text="Root" />
                        </Root>
                        <Listeners>
                            <BeforeLoad Fn="nodeLoad" Handler="#{treeTest}.body.mask('Loading.....', 'x-mask-loading');" />
                            <Load Handler="#{treeTest}.body.unmask();" />
                        </Listeners>
                        <%--<Root>
                            <ext:Node Text="Root" Expanded="true" AllowDrag="false">                        
                                <Children>
                                    <ext:Node Text="Folder 1" Qtip="Rows dropped here will be appended to the folder" AllowDrag="false">
                                        <Children>
                                            <ext:Node Text="Subleaf 1" Qtip="Subleaf 1 Quick Tip" Leaf="true"  AllowDrag="false">
                                               <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="Mac OSX" Mode="Value" />
                                             <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                              <ext:ConfigItem Name="change" Value="1" Mode="Value">
                                                  
                                              </ext:ConfigItem>
                                              </CustomAttributes>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>  
                                    </Children>
                                </ext:Node>                                    
                                  
                        </Root>--%>
                        <View>
                            <ext:TreeView runat="server">
                                <Plugins>
                                    <ext:TreeViewDragDrop runat="server" DragGroup="tree2grid" DropGroup="grid2tree" />
                                </Plugins>
                                <Listeners>
                                    <BeforeDrop Fn="beforerecorddrop" />
    
                                    <Render Fn="RenderIPDSHealth"></Render>
                                    <%--<BeforeItemMouseLeave Fn="moveNode"></BeforeItemMouseLeave>--%>
                                    <%--  <MoveNode Fn="moveNode" />--%>
                                </Listeners>
                            </ext:TreeView>
                        </View>
                    </ext:TreePanel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    
    ---------------------------------------------------------------------------------------------------.cs-------------------------------------------------------
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    using System.Data;
    
    namespace Ap3.WebApp
    {
        public partial class CustomDashboard : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    this.Store1.DataSource = this.TestData;
                    this.Store1.DataBind();
                    
                }
            }
    
            private object[] TestData
            {
                get
                {
                    DateTime now = DateTime.Now;
    
                    return new object[]
                {
                    new object[] { "1", 71.72, 1, 0.03, now },
                    new object[] { "2", 29.01, 2, 1.47, now },
                    new object[] { "3", 83.81, 1, 0.34, now },
                    new object[] { "4", 52.55, 2, 0.02, now },
                    new object[] { "5", 64.13, 1, 0.49, now },
                    new object[] { "6", 31.61, 2, -1.54, now }              
                };
                }
            }
    
            [DirectMethod]
            public string NodeLoad(string nodeId)
            {
               
                NodeCollection nodes = new NodeCollection();
                nodes = NodeCollection();
                return nodes.ToJson();
            }
    
            public NodeCollection NodeCollection()
            {
                NodeCollection nodes = new NodeCollection();
                DataTable dt = new DataTable();
                dt.Clear();
               
                dt.Columns.Add("task");
                dt.Columns.Add("user");
                dt.Columns.Add("change");
                dt.Columns.Add("FillRate_Funded");
                dt.Columns.Add("FillRate_Funded_H");
                dt.Columns.Add("FillRate_UnFunded");
                dt.Columns.Add("FillRate_UnFunded_H");
                DataRow newRow = dt.NewRow();
                newRow["task"] = 1;
                newRow["user"] = "New User";
                newRow["change"] = 1;
                newRow["FillRate_Funded"] = "23.54";
                newRow["FillRate_Funded_H"] = "4";
                newRow["FillRate_UnFunded"] = "45.23";
                newRow["FillRate_UnFunded_H"] = "2";
               
                dt.Rows.Add(newRow);
                DataRow newRow1 = dt.NewRow();
                newRow1["task"] = 11;
                newRow1["user"] = "New User1";
                newRow1["change"] = 2;
                newRow1["FillRate_Funded"] = "45.23";
                newRow1["FillRate_Funded_H"] = "2";
                newRow1["FillRate_UnFunded"] = "23.54";
                newRow1["FillRate_UnFunded_H"] = "4";
                dt.Rows.Add(newRow1);
                foreach (DataRow row in dt.Rows)
                {
                    Node asyncNode = new Node();
                    string strName = row["task"].ToString();
                    asyncNode.NodeID = row["task"].ToString();
                    asyncNode.Text = row["task"].ToString();
    
    
                      asyncNode.CustomAttributes.Add(new ConfigItem("task", strName, ParameterMode.Value));
                      asyncNode.CustomAttributes.Add(new ConfigItem("user", row["user"].ToString(), ParameterMode.Value));
                      asyncNode.CustomAttributes.Add(new ConfigItem("change", row["change"].ToString(), ParameterMode.Value));
                      asyncNode.CustomAttributes.Add(new ConfigItem("FillRate_Funded", row["FillRate_Funded"].ToString(), ParameterMode.Value));
                      asyncNode.CustomAttributes.Add(new ConfigItem("FillRate_Funded_H", row["FillRate_Funded_H"].ToString(), ParameterMode.Value));
                      asyncNode.CustomAttributes.Add(new ConfigItem("FillRate_UnFunded", row["FillRate_UnFunded"].ToString() , ParameterMode.Value));
                      asyncNode.CustomAttributes.Add(new ConfigItem("FillRate_UnFunded_H", row["FillRate_UnFunded_H"].ToString() , ParameterMode.Value));               
                      asyncNode.Leaf = true;
                    nodes.Add(asyncNode);
                }
                return nodes;
    
            }
        }
    }
    thanks,
    Prasoon
    Last edited by Prasoon; Dec 11, 2015 at 4:32 AM.
  5. #5
    One cell is blue, another is green. The Column's Renderer appears to be working as expected.

    Click image for larger version. 

Name:	Colors.JPG 
Views:	2 
Size:	22.0 KB 
ID:	24358

    Please clarify do you see the cells like that?
  6. #6
    Hi Daniil,

    Column with single color render function is working fine but there is also one requirement where I have to bind single column with two color like below image, the render function is not working in tree grid same is working in grid panel.
    Click image for larger version. 

Name:	Image.png 
Views:	0 
Size:	16.3 KB 
ID:	24359

    Function is ā€œcolorFillFundedUnfundedRateā€.

    Thanks and regards,
    Prasoon
  7. #7
    There is a JavaScript error occurring if expand the node. I would recommend to keep a browser's JavaScript console always open to monitor if there are any errors on the page.

    The error is Error: String.format is not a function.

    Please replace
    return String.format(strMultiValueBackground, ...
    with
    return Ext.String.format(strMultiValueBackground, ...
    Well, the same code could not work with a GridPanel as well, because the error doesn't depend on that. I guess that is the code from Ext.NET v1 that, yes, should be adjusted a bit.

    Okay, the replacement above gets rid of the error. Now, the problem that ylFillRateLanding and other CSS classes that you use in the Renderer are not defined on the page.
  8. #8
    Hi Daniil,

    Below change i.e. "return Ext.String.format(strMultiValueBackground, ..." worked for me, thanks a lot.

    Please mark it as CLOSED.

    thanks and regards,
    Prasoon

Similar Threads

  1. Replies: 4
    Last Post: Jul 12, 2013, 10:07 PM
  2. Replies: 2
    Last Post: Jul 14, 2011, 6:45 PM
  3. Replies: 5
    Last Post: Mar 23, 2011, 9:57 AM
  4. Replies: 2
    Last Post: Jul 30, 2010, 12:37 AM
  5. Dynamically changing Treepanel other Treepanel
    By airforcz in forum 1.x Help
    Replies: 0
    Last Post: Jun 16, 2010, 8:33 AM

Tags for this Thread

Posting Permissions