[CLOSED] Renderer Fn is not functional in NumberColumn

  1. #1

    [CLOSED] Renderer Fn is not functional in NumberColumn

    Dear Coolite,

    With Renderer Fn in your Grid example, the some values should be changed in red or green.
    but still in black. please refer to the attached image file if you need the screen capture.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="StatDiv.aspx.cs" Inherits="SCMS.WEB.WEB_Report_MonthlyReport_MonthlyStatistics_StatDiv" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Statistics Division</title>
        
        <script type="text/javascript">
        var saveData = function() {
        GridData.setValue(Ext.encode(GridPanelStatDiv.getRowsValues(false)));
       }
        </script>
        
        <script type="text/javascript">
            var template = '{1}';
    
    
            var changeColor = function(value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
        </script>
        
        <style type="text/css">
        .x-grid3-col-label, .x-grid3-td-label {
         background-color: gray;
         color: #fff;
        }  
        </style>
    
    
    
    </head>
    <body>
        <form id="form1" runat="server">
        
        <ext:ResourceManager ID="ResourceManager" runat="server">
        </ext:ResourceManager>
        
        <asp:SqlDataSource ID="SqlDataSourceID" runat="server" 
            ConnectionString="<%$ ConnectionStrings:SCEGDBConnectionString %>">
        </asp:SqlDataSource>
        
        <asp:SqlDataSource ID="SqlDataSourceCurr" runat="server" 
            ConnectionString="<%$ ConnectionStrings:SCEGDBConnectionString %>"
            SelectCommand = "WEB_CURRENCY" 
            >
        </asp:SqlDataSource>
        
        <asp:SqlDataSource ID="SqlDataSourceStatDiv" runat="server" ConnectionString="<%$ ConnectionStrings:SCEGDBConnectionString %>" 
            SelectCommand="WEB_SCM_PLAN_PO_DIV"
            SelectCommandType="StoredProcedure"
        >
        <SelectParameters >
            <asp:Parameter Name="MONTH" Type="String" />
            <asp:Parameter Name="CURR_RATE_USD" Type="Decimal" />
            <asp:Parameter Name="CURR_RATE_GBP" Type="Decimal" />
        </SelectParameters>
        
        </asp:SqlDataSource>
    
    
         <ext:Store 
            ID="StoreCurr" 
            runat="server" 
            DataSourceID="SqlDataSourceCurr">
             <Reader>
                <ext:JsonReader IDProperty="YYYYMM">
                    <Fields>
                        <ext:RecordField Name="YYYYMM" />
                        <ext:RecordField Name="USD" />
                        <ext:RecordField Name="GBP" />
                        <ext:RecordField Name="PLAN_USD" />
                        <ext:RecordField Name="PLAN_GBP" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <SortInfo Field="YYYYMM" Direction="ASC" />
        </ext:Store>
        
             <ext:Store 
            ID="StoreStatDiv" 
            runat="server" 
            DataSourceID="SqlDataSourceStatDiv">
             <Reader>
                <ext:JsonReader IDProperty="DIV_CODE">
                    <Fields>
                        <ext:RecordField Name="DIV_CODE" />
                        <ext:RecordField Name="DIV_NAME" />
                        <ext:RecordField Name="T_QTY" />
                        <ext:RecordField Name="QTY" />
                        <ext:RecordField Name="QTY_PER" />
                        <ext:RecordField Name="TUCM" />
                        <ext:RecordField Name="UCM" />
                        <ext:RecordField Name="DIFF_UCM" />
                        <ext:RecordField Name="SUCM" />
                        <ext:RecordField Name="DIFF_SUCM" />
                        <ext:RecordField Name="TCM" />
                        <ext:RecordField Name="CM" />
                        <ext:RecordField Name="DIFF_CM" />
                        <ext:RecordField Name="SCM" />
                        <ext:RecordField Name="DIFF_SCM" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <SortInfo Field="DIV_CODE" Direction="ASC" />
        </ext:Store>
        
        <ext:Hidden ID="GridData" runat="server" />
        <ext:Hidden ID="hiddenCurrUSD" runat="server" ></ext:Hidden>
        <ext:Hidden ID="hiddenCurrGBP" runat="server" ></ext:Hidden>
        <ext:FormPanel 
            ID="FormPanelSearch" 
            runat="server" 
            Title="Search Option"
            MonitorPoll="500" 
            MonitorValid="true" 
            Padding="5" 
            Border ="false"
            Height="100"
            ButtonAlign="Right"
            Collapsible ="true"
            Layout="Column"
            Icon="Find">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Border="false" Header="false" ColumnWidth=".10" Layout="Form" LabelAlign="Top">
                    <Items>
                        <ext:DateField ID="DFMonth" runat="server" FieldLabel="Month" ShowToday="true" Format="yyyyMM">
                            <Plugins>              
                                <ext:MonthPicker ID="MonthPicker1" runat="server"></ext:MonthPicker>                      
                            </Plugins>
                        </ext:DateField>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel4" runat="server" Border="false" Layout="Form" ColumnWidth=".10" LabelAlign="Top" >
                    <Items>
                        <ext:Button ID="BtnSearch" runat="server" Text="Search"  FieldLabel=" " Icon="Find" LabelSeparator="">
                            <DirectEvents>
                                <Click OnEvent="SubmitMonth" />
                            </DirectEvents>
                        </ext:Button> 
                    </Items>
                </ext:Panel> 
                <ext:Panel ID="Panel3" runat="server" Border="false" Layout="Form" ColumnWidth=".12" LabelAlign="Top" >
                    <Items>
                        <ext:SpinnerField ID="TXRTCurrUSD" runat="server" FieldLabel="USD (1EUR)" 
                        DecimalPrecision="2" IncrementValue="0.01" Accelerate="true" MinValue="0" MaxValue="10" AnchorHorizontal="90%" />
                    </Items>
                </ext:Panel> 
                
                <ext:Panel ID="Panel6" runat="server" Border="false" Layout="Form" ColumnWidth=".05" LabelAlign="Top">
                    <Items>
                        <ext:Button ID="BtnUSDReset" runat="server" ToolTip ="Realtime Currency EUR->USD"  FieldLabel=" " Icon="ArrowRotateAnticlockwise" LabelSeparator="" >
                            <DirectEvents>
                                <Click OnEvent="GetRTCurrUSD" />
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Panel>   
                
                            <ext:Panel ID="Panel7" runat="server" Border="false" Layout="Form" ColumnWidth=".12" LabelAlign="Top" >
                    <Items>
                        <ext:SpinnerField ID="TXRTCurrGBP" runat="server" FieldLabel="USD (1GBP)" 
                        DecimalPrecision="2" IncrementValue="0.01" Accelerate="true" MinValue="0" MaxValue="10" AnchorHorizontal="90%" />
                    </Items>
                </ext:Panel> 
                
                <ext:Panel ID="Panel8" runat="server" Border="false" Layout="Form" ColumnWidth=".05" LabelAlign="Top">
                    <Items>
                        <ext:Button ID="BtnGBPReset" runat="server" ToolTip ="Realtime Currency GBP->USD"  FieldLabel=" " Icon="ArrowRotateAnticlockwise" LabelSeparator="" >
                            <DirectEvents>
                                <Click OnEvent="GetRTCurrGBP" />
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Panel>   
                           
                <ext:Panel ID="Panel5" runat="server" Border="false" Layout="Form" ColumnWidth=".33" LabelAlign="Top">
                    <Items>
                        <ext:Button ID="BtnSimul" runat="server" Text="Simulation"  FieldLabel=" " Icon="Calculator" LabelSeparator="">
                            <DirectEvents>
                                <Click OnEvent="SubmitMonth" />
                            </DirectEvents>
                        </ext:Button> 
                    </Items>
                </ext:Panel>         
                
                <ext:Panel ID="Panel2" runat="server" Border="false" Layout="Form" ColumnWidth=".13" LabelAlign="Top">
                    <Items>
                        <ext:Button ID="BtnCurr" runat="server" Text="Check Currency" Icon="MoneyEuro" LabelSeparator="" >
                        <Listeners>
                            <Click Handler="WindowCurr.show(this);" />
                        </Listeners>
                        </ext:Button> 
                    </Items>
                </ext:Panel>           
            </Items>
        </ext:FormPanel>
    
    
    
        <ext:GridPanel 
            ID="GridPanelStatDiv" 
            runat="server"
            TrackMouseOver="true"
            Title="PO Status-Division" 
            StoreID="StoreStatDiv" 
            AutoHeight="true"
            Frame="false" 
            Border="false"
            Icon="User">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column DataIndex="DIV_CODE" Header="DIV_CODE" Width="30" Hidden="true">
                    </ext:Column>  
                    <ext:Column DataIndex="DIV_NAME" Header="Division" Width="150" Align="Center" Sortable="false">
                    </ext:Column> 
                    <ext:NumberColumn DataIndex="T_QTY" Header="Plan" Width="60" Align="Right" Format="0,000,000,000" >
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="QTY" Header="PO" Width="60" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                     <ext:NumberColumn DataIndex="QTY_PER" Header="%" Width="50" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="TUCM" Header="Plan (A)" Width="60" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="UCM" Header="PO (B)" Width="60" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="SUCM" Header="Simul (C)" Width="60" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="DIFF_UCM" Header="Diff (A-B)" Width="60"  Align="Right" Format="0,000,000,000">
                        <Renderer Fn="changeColor" />
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="DIFF_SUCM" Header="Diff (B-C)" Width="60" Align="Right" Format="0,000,000,000">
                        <Renderer Fn="changeColor" />
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="TCM" Header="Plan (a)" Width="80" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="CM" Header="PO (b)" Width="80" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="SCM" Header="Simul (c)" Width="80" Align="Right" Format="0,000,000,000">
                    </ext:NumberColumn>
                    <ext:NumberColumn DataIndex="DIFF_CM" Header="Diff (a-b)" Width="60" Align="Right" Format="0,000,000,000">
                        <Renderer Fn="changeColor" />
                    </ext:NumberColumn>   
                    <ext:NumberColumn DataIndex="DIFF_SCM" Header="Diff (b-c)" Width="80" Align="Right" Format="0,000,000,000">
                        <Renderer Fn="changeColor" />
                    </ext:NumberColumn>
                </Columns>
            </ColumnModel>  
             <TopBar>
            <ext:Toolbar ID="Toolbar" runat="server">
                <Items>
                    <ext:ToolbarFill ID="ToolbarFill" runat="server" />
                    <ext:Button ID="ButtonExcel" runat="server" Text="To Excel" AutoPostBack="true" &#111;nclick="saveEXCELData" Icon="PageExcel">
                        <Listeners>
                            <Click Fn="saveData" /> 
                        </Listeners>
                    </ext:Button>   
                    <ext:Button ID="ButtonCSV" runat="server" Text="To CSV" AutoPostBack="true" &#111;nclick="saveCSVData" Icon="PageExcel">
                        <Listeners>
                            <Click Fn="saveData" />
                        </Listeners>
                    </ext:Button>   
                    <ext:Button ID="btnPrint" runat="server" Text="Print" Icon="Printer" OnClientClick="window.print();" />
                </Items>
            </ext:Toolbar>
        </TopBar>                                  
    
    
            <View> 
                <ext:GridView ID="GridView" ForceFit="true"  runat="server" ScrollDelay="0">
                    <HeaderGroupRows>
                        <ext:HeaderGroupRow >
                            <Columns>
                                <ext:HeaderGroupColumn ColSpan="2"  Header=" " Align="Center" />
                                <ext:HeaderGroupColumn ColSpan="3"  Header="Qty" Align="Center"/>
                                <ext:HeaderGroupColumn ColSpan="5"  Header="UCM" Align="Center"/>
                                <ext:HeaderGroupColumn ColSpan="5"  Header="CM" Align="Center"/>
                                
                            </Columns>
                        </ext:HeaderGroupRow>
                    </HeaderGroupRows>
                </ext:GridView>
            </View>
            
        </ext:GridPanel>
     
        
        <ext:Window runat="server" 
                ID="WindowCurr"
                Title="Currency"  
                Height="400px" 
                Width="300px"
                Shadow="Frame"
                X="650"
                Y="400"
                Collapsible="true"
                Hidden = "true"
                Layout="fit"
                AutoHeight="true"
                icon ="Money">
            <Items>
                <ext:GridPanel 
                    ID="GridPanelCurr" 
                    runat="server"  
                    StoreID="StoreCurr" 
                    Border="false" 
                    AutoHeight = "true"
                    AutoWidth ="true"
                    Icon="PluginAdd">
                    <ColumnModel ID="ColumnModel" runat="server">
                        <Columns>
                            <ext:Column DataIndex="YYYYMM" Header="Month" meta:ResourceKey="YYYYMM" Width="50">
                            </ext:Column>  
                            <ext:Column DataIndex="USD" Header="USD" meta:ResourceKey="USD" Width="50">
                            </ext:Column>
                            <ext:Column DataIndex="GBP" Header="GBP" meta:ResourceKey="GBP" Width="50">
                            </ext:Column>
                            <ext:Column DataIndex="PLAN_USD" Header="PLAN USD" meta:ResourceKey="PLAN_USD" Width="70">
                            </ext:Column>
                            <ext:Column DataIndex="PLAN_GBP" Header="PLAN GBP" meta:ResourceKey="PLAN_GBP" Width="70">
                            </ext:Column>
                        </Columns>  
                    </ColumnModel> 
                    <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModelCurr" runat="server" />
                    </SelectionModel>
                </ext:GridPanel> 
            </Items> 
        </ext:Window> 
    
    
    
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 6:49 AM.
  2. #2

    RE: [CLOSED] Renderer Fn is not functional in NumberColumn

    Hello, skyone!

    A user-defined Renderer is not used when it deals with NumberColumn. You can use a Column with a respective Renderer.
    Please see an example. You can choose the most appropriate Renderer.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Renderer Fn is not functional in NumberColumn.aspx.cs"
        Inherits="Work.WebForm4" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> data = new List<object>();
            if (!this.IsPostBack &amp;&amp; !X.IsAjaxRequest)
            {
                for (int i = 1, j = 1; i < 10; i++, j *= -1)
                {
                    data.Add(new Test()
                    {
                        test = (int)Math.Pow(10, i) * j
                    });
                }
                Store1.DataSource = data;
                Store1.DataBind();
            }
        }
    
        class Test
        {
            public int test { get; set; }
        }
    </script>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .greenCssClass
            {
                color: green;
            }
            .redCssClass
            {
                color: red;
            }
        </style>
    
        <script type="text/javascript">
            var template = '{1}';
            var changeColor = function(value) {
                var s = Ext.util.Format.number(value, "0,000,000,000");
                return String.format(template, (value > 0) ? "green" : "red", s);
            };
    
            var changeColor2 = function(value, metadata) {
                metadata.css = (value > 0) ? "greenCssClass" : "redCssClass";
                return Ext.util.Format.number(value, "0,000,000,000");
            };
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" AutoWidth="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column DataIndex="test" Header="Render 1" Width="200" Align="Right">
                        <Renderer Fn="changeColor" />
                    </ext:Column>
                    <ext:Column DataIndex="test" Header="Render 2" Width="200" Align="Right">
                        <Renderer Fn="changeColor2" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
  3. #3

    RE: [CLOSED] Renderer Fn is not functional in NumberColumn

    Thanks for quick response.
    it works well
  4. #4

    RE: [CLOSED] Renderer Fn is not functional in NumberColumn

    It's nice to help you:)

Similar Threads

  1. [CLOSED] Renderer function
    By tanky65 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 30, 2012, 7:21 PM
  2. [CLOSED] TreeGridColumn renderer.
    By alainfo in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 18, 2012, 3:12 PM
  3. [CLOSED] NumberColumn renderer does not work?
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 02, 2010, 11:10 AM
  4. [CLOSED] How to make a NumberColumn look as an integer instead of decimal?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 09, 2010, 8:45 PM
  5. [CLOSED] RowNumbererColumn renderer
    By danielg in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 27, 2009, 10:30 AM

Posting Permissions