PDA

View Full Version : [CLOSED] Grid:ProgressBarColumn color changed by different value



Geenin
Jan 17, 2014, 5:44 AM
I got a requirement for ProgressBarColumn.

if the data is > 80%, then the progressbar need to change to color RED,
if the data is > 60%, then the progressbar need to change to color Yellow

Is it possible? Thanks in advanced!


Best Regards,
Paggy

Daniil
Jan 17, 2014, 10:55 AM
Hi @Paggy,

You should chance a ProgressBarColumn's Renderer. The original version you can find here:

trunk\Ext.Net\Build\Ext.Net\extnet\src\grid\column \progressbarcolumn.js

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 0.2 },
new object[] { 2, 0.4 },
new object[] { 3, 0.6 },
new object[] { 4, 0.8 },
new object[] { 5, 1.0 }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style>
.progress-60-80 .x-progress-text {
color: yellow;
}

.progress-80-100 .x-progress-text {
color: red;
}
</style>

<script>
var myRenderer = function (value, meta) {
var me = this,
text,
cls = me.progressCls,
pCls,
percent,
cWidth = me.getWidth(true) - 2;

if(me.hideIfEmpty && (!value && value !== 0 || value < 0)){
return "";
}

percent = Math.round(value*100);
value = value || 0;
text = Ext.String.format(me.progressText, percent);

pCls = cls + ' ' + cls + '-' + me.ui;

if (percent >= 60 && percent < 80) {
pCls += " progress-60-80";
}

if (percent >= 80 && percent <= 100) {
pCls += " progress-80-100";
}

meta.tdCls = "x-progress-column-cell";
meta.style = "padding:0px;margin:0px;";
v = '<div class="' + pCls + '" style="margin:1px 1px 1px 1px;width:' + cWidth + 'px;"><div class="' + cls + '-text ' + cls + '-text-back" style="width:' + (cWidth-2) +'px;">' +
text +
'</div>' +
'<div class="' + cls + '-bar ' + cls + '-bar-' + me.ui +'" style="width: '+ value * 100 + '%;">' +
'<div class="' + cls + '-text" style="width:' + (cWidth-2) +'px;">' +
'<div>' + text + '</div>' +
'</div>' +
'</div></div>'

return v;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>ProgressBar Column</h1>

<ext:GridPanel
runat="server"
Title="ProgressBar column"
Width="320"
Height="180">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Index" Type="Int" />
<ext:ModelField Name="Percentage" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="Percentage" Text="Value" />
<ext:ProgressBarColumn runat="server" DataIndex="Percentage" Text="Progress">
<Renderer Fn="myRenderer" />
</ext:ProgressBarColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Geenin
Jan 17, 2014, 11:04 AM
Hi @Paggy,

You should chance a ProgressBarColumn's Renderer. The original version you can find here:

trunk\Ext.Net\Build\Ext.Net\extnet\src\grid\column \progressbarcolumn.js

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 0.2 },
new object[] { 2, 0.4 },
new object[] { 3, 0.6 },
new object[] { 4, 0.8 },
new object[] { 5, 1.0 }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style>
.progress-60-80 .x-progress-text {
color: yellow;
}

.progress-80-100 .x-progress-text {
color: red;
}
</style>

<script>
var myRenderer = function (value, meta) {
var me = this,
text,
cls = me.progressCls,
pCls,
percent,
cWidth = me.getWidth(true) - 2;

if(me.hideIfEmpty && (!value && value !== 0 || value < 0)){
return "";
}

percent = Math.round(value*100);
value = value || 0;
text = Ext.String.format(me.progressText, percent);

pCls = cls + ' ' + cls + '-' + me.ui;

if (percent >= 60 && percent < 80) {
pCls += " progress-60-80";
}

if (percent >= 80 && percent <= 100) {
pCls += " progress-80-100";
}

meta.tdCls = "x-progress-column-cell";
meta.style = "padding:0px;margin:0px;";
v = '<div class="' + pCls + '" style="margin:1px 1px 1px 1px;width:' + cWidth + 'px;"><div class="' + cls + '-text ' + cls + '-text-back" style="width:' + (cWidth-2) +'px;">' +
text +
'</div>' +
'<div class="' + cls + '-bar ' + cls + '-bar-' + me.ui +'" style="width: '+ value * 100 + '%;">' +
'<div class="' + cls + '-text" style="width:' + (cWidth-2) +'px;">' +
'<div>' + text + '</div>' +
'</div>' +
'</div></div>'

return v;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>ProgressBar Column</h1>

<ext:GridPanel
runat="server"
Title="ProgressBar column"
Width="320"
Height="180">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Index" Type="Int" />
<ext:ModelField Name="Percentage" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="Percentage" Text="Value" />
<ext:ProgressBarColumn runat="server" DataIndex="Percentage" Text="Progress">
<Renderer Fn="myRenderer" />
</ext:ProgressBarColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>


Thanks Daniil, is it possible to change the progress bar color?

Best Regards,
Paggy

Daniil
Jan 17, 2014, 11:12 AM
Do you mean background color? Anyway, it should be possible via CSS.

Geenin
Jan 20, 2014, 2:26 PM
Do you mean background color? Anyway, it should be possible via CSS.

Hi Danii,

Thanks! But, I'm not familiar with CSS, could you please give me some tips ?

Paggy

Daniil
Jan 20, 2014, 2:54 PM
I think you might need to set up a background-color rule:
http://www.w3schools.com/cssref/pr_background-color.asp

Or, maybe, background-image:
http://www.w3schools.com/cssref/pr_background-image.asp

This video is also worth to look at:
http://vimeo.com/10076549

Geenin
Jan 27, 2014, 7:02 AM
I think you might need to set up a background-color rule:
http://www.w3schools.com/cssref/pr_background-color.asp

Or, maybe, background-image:
http://www.w3schools.com/cssref/pr_background-image.asp

This video is also worth to look at:
http://vimeo.com/10076549

Hi Danii,

Thanks a lot :)

Paggy