Printable View
Hi Team,
How to set dynamically multiple background colors in single column of tree grid based on value.
e.g
Column Header
Attachment 24356
Same function is working in grid panel column (with help of spanvar strMultiValueBackground = "<span class='{0}'>{1}</span><span class='{2}'>{3}</span>";)but unable to set the same for Tree grid template column.
thanks,
Prasoon
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.
I had tried with normal column renderer but on click on tree root node it was throwing below exception
Attachment 24357
thanks,
Prasoon
i have fixed the error but its not rendering color, please find sample code below
thanks,Code:-----------------------------------------------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;
}
}
}
Prasoon
One cell is blue, another is green. The Column's Renderer appears to be working as expected.
Attachment 24358
Please clarify do you see the cells like that?
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.
Attachment 24359
Function is “colorFillFundedUnfundedRateâ€.
Thanks and regards,
Prasoon
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 isError: String.format is not a function.
Please replace
withCode:return 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.Code:return Ext.String.format(strMultiValueBackground, ...
Okay, the replacement above gets rid of the error. Now, the problem thatylFillRateLandingand other CSS classes that you use in the Renderer are not defined on the page.
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