[CLOSED] GridPanel Column Renderer implementation causes an issue

  1. #1

    [CLOSED] GridPanel Column Renderer implementation causes an issue

    Hi,

    Please consider the code sample below. The implementation of the Renderer listener is a port from 1.7 and it causes a data load/display issue. If it stays uncommented, no rows become visible in the grid at all although the pager reports correct figures. If commented out, the issue disappears.
    The call to
    var iconSrc = Ext.net.ResourceMgr.getIconUrl("Book");
    seems to return a valid location of the icon file.

    Please advise kindly.
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        private object[] TestData
        {
            get
            {
                var now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData;
                this.Store1.DataBind();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
        <script type="text/javascript">
            var recordIconRenderer = function (value, metadata, record) {
                var iconSrc = Ext.net.ResourceMgr.getIconUrl("Book");
                return String.format("<img src='{0}' />", iconSrc);
            };    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
                    <Store>
                        <ext:Store ID="Store1" runat="server" RemoteSort="false"
                            AutoLoad="true" PageSize="10">
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="company">
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" Type="Float" />
                                        <ext:ModelField Name="change" Type="Float" />
                                        <ext:ModelField Name="pctChange" Type="Float" />
                                        <ext:ModelField Name="lastChange" Type="Date" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column runat="server" ID="IconColumn" MenuDisabled="true" Sortable="false" Resizable="false"
                                Hideable="false" Width="26">
                                <Renderer Fn="recordIconRenderer" />
                            </ext:Column>
                            <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
                                <Editor>
                                    <ext:TextField ID="TextField1" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                <Editor>
                                    <ext:TextField ID="TextField2" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
                            <ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
                            <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
                                Format="HH:mm:ss" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                    </SelectionModel>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                        </ext:PagingToolbar>
                    </BottomBar>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 01, 2013 at 7:45 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    I recommend you to set up:
    <extnet scriptMode="Development" />
    for development.

    This way the ext-all-dev.js script will be used. It shows much more debug info and doesn't "eat" errors like ext-all.js and ext-all-debug.

    So, with that mode you will find in the console.
    Error: String.format is not a function

    It should be replaced with "Ext.String".

    Also a small tip.

    A Column's Renderer is called for each cell. So, it is good for performance to lightweight it as much as possible. Like this:
    var bookSrc = Ext.net.ResourceMgr.getIconUrl("Book"),
        tpl = "<img src='{0}' />",
        bookImg = Ext.String.format(tpl, bookSrc);
    
    var recordIconRenderer = function (value, metadata, record) {
        return bookImg;
    };
    I understand it is not always possible, but I just demonstrate the idea.
  3. #3
    Thanks a lot for the valuable suggestions to get me back on track Daniil! I think you meant something like this to make my code more efficient:

        <script type="text/javascript">
            var _iconSrc = null;
            var getIconSrc = function () {
                if (!_iconSrc)
                    _iconSrc = Ext.String.format("<img src='{0}' />", Ext.net.ResourceMgr.getIconUrl("Book"));
                return _iconSrc;
            };
    
            var recordIconRenderer = function (value, metadata, record) {
                return getIconSrc();
            };    
        </script>
    What tool(s) do you usually use to debug VS project client side code?
    Last edited by vadym.f; Aug 01, 2013 at 2:31 PM.
  4. #4
    Yes, you got me correctly.

    I debug simple cases in FireFox if possible, i.e. if something is reproducible in FireFox.

    Chrome issues I debug using its Developer Tools.

    If a case is more difficult than "simple", I debug it in Visual Studio. IE catches errors and "debugger" statements and allows to redirect in to VS. Well, the issue should be reproducible in IE. I find VS JavaScript debugger most powerful of the mentioned above.
  5. #5
    Well, thanks again! Please close this thread down.

Similar Threads

  1. [CLOSED] when gridpanel column apply renderer.format , renderer.fn not work
    By mis@adphk.com in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2013, 10:35 AM
  2. [CLOSED] TreeGrid: clearContent() method implementation issue
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 15, 2011, 5:42 AM
  3. [CLOSED] Progressbar implementation issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 27, 2011, 5:21 PM
  4. Replies: 0
    Last Post: May 07, 2010, 12:59 AM
  5. GridPanel column renderer and AjaxMethods
    By echo in forum 1.x Help
    Replies: 1
    Last Post: Dec 23, 2008, 12:15 PM

Tags for this Thread

Posting Permissions