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