What's New?

[CLOSED] Grid:ProgressBarColumn color changed by different value

  1. #1
    Jan 17, 2014, 5:44 AM

    [CLOSED] Grid:ProgressBarColumn color changed by different value

    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
    Last edited by Daniil; Jan 24, 2014 at 3:45 AM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    Jan 17, 2014, 11:04 AM
    Quote Originally Posted by Daniil View Post
    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
  4. #4
    Jan 17, 2014, 11:12 AM
    Do you mean background color? Anyway, it should be possible via CSS.
  5. #5
    Jan 20, 2014, 2:26 PM
    Quote Originally Posted by Daniil View Post
    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
  6. #6
    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
  7. #7
    Jan 27, 2014, 7:02 AM
    Quote Originally Posted by Daniil View Post
    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

Similar Threads

  1. Grid Panel Row color not changed.
    By Rupesh in forum 1.x Help
    Replies: 1
    Last Post: May 08, 2012, 10:41 AM
  2. [CLOSED] Editable Grid is not showing changed info.
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 06, 2011, 3:40 PM
  3. Need to fetch changed values from grid panel dynamically
    By pooja in forum 1.x Help
    Replies: 0
    Last Post: Oct 15, 2010, 6:04 AM
  4. How to Get the Value From The Changed Grid
    By fancycloud in forum 1.x Help
    Replies: 0
    Last Post: Dec 29, 2009, 10:05 PM
  5. Capture Grid Cell Changed Event
    By mathec in forum 1.x Help
    Replies: 2
    Last Post: Feb 01, 2009, 2:40 PM

Posting Permissions