[CLOSED] Grid Column Renderer funcation called twice

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Grid Column Renderer funcation called twice

    I've just started playing with the custom grid column renderer feature. I've noticed that the renderer function gets called twice as often as would seem neccessary. It goes down each row, calling the renderer function once for each row, then repeats going down each row again.

    Is this by design or a bug? Is there a way to preclude this?
    Last edited by Daniil; Nov 29, 2011 at 6:12 AM. Reason: [CLOSED]
  2. #2

    RE: Grid Column Renderer funcation called twice

    *Hi Randy,

    I have noticed this as well. I'll try to narrow down this problem. I'll notify you when find source of problem




  3. #3
    Hi,
    I'd like to up this topic.
    Renderers are still called twice...
    Is there any progress or workaround?
  4. #4
    Hi,

    Thanks for a bump.

    Really, a grid's body is rendered twice on initial loading. if Store's AutoLoad is not false (it's true by default).

    1. The first time - within the GridView's onDataChange function. It's a listener of the Store's DataChanged event.

    2. The second time - within the GridView's afterRender function. It's called in the render method of Ext.Component.

    I think we can just set up some flag in the onDataChange and check it within the afterRender method to do not render a body if it's already rendered.

    It should not break anything.

    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[] { "test" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
    <!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 runat="server">
        <title>Ext.Net Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        <script type="text/javascript">
            Ext.grid.GridView.override({
                onDataChange : function(){
                    this.refresh(true);
                    this.updateHeaderSortState();
                    this.syncFocusEl(0);
                    this.bodyRendered = true; //added
                },
    
                afterRender : function() {
                    if (!this.ds || !this.cm) {
                        return;
                    }
            
                    if (!this.bodyRendered) { //added
                        this.mainBody.dom.innerHTML = this.renderBody() || '*';
                        this.processRows(0, true);
    
                        if (this.deferEmptyText !== true) {
                            this.applyEmptyText();
                        }
                    }
            
                    this.grid.fireEvent('viewready', this.grid);
    
                    this.fireEvent("afterrender", this);
                }
            });
    
            var myRenderer = function (v) {
                alert("myRenderer");
                return v;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test">
                            <Renderer Fn="myRenderer" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Thanks!
    it works well for static grid. But I also have some dynamically created grids, this example makes 8 renderer calls instead of 4:

    <%@ Page Language="C#"  %>
    
    <%@ Import Namespace="Button=Ext.Net.Button" %>
    <%@ Import Namespace="System.Data" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        
       
        protected void Button1_Click(object sender, DirectEventArgs e)
        {
            Reconfigure();
        }    
        
        protected void Reconfigure()
        {
            var store = this.Store1;
            var grid = this.GridPanel1;
            // clear
            
            store.Reader.Clear();    
            grid.SelectionModel.Clear();
            grid.ColumnModel.Columns.Clear();
            grid.SelectionModel.Add(new RowSelectionModel { SingleSelect = true });
    
            // Reconfigure Store
            ArrayReader reader = new ArrayReader();
            DataTable dt = GetDataTable(/*postfix*/);
            foreach (DataColumn col in dt.Columns)
            {
                grid.ColumnModel.Columns.Add(new Column
                {
                    ColumnID = col.ColumnName,
                    Header = col.ColumnName,
                    DataIndex = col.ColumnName,
                });
                RecordField field = new RecordField(col.ColumnName) 
                { Mapping = col.ColumnName, Type = RecordFieldType.Auto, SortType = SortTypeMethod.AsUCString };
                reader.Fields.Add(field);
            }
            Renderer r = new Renderer();
            r.Fn = "renderer";
            grid.ColumnModel.Columns.Add(new Column
            {
                ColumnID = "abcd",
                Header = "img",
                DataIndex = "abcd",
                Renderer = r,  
            });
          
            store.Reader.Add(reader);
      
            store.DataSource = dt;
            store.DataBind();
    
            if (X.IsAjaxRequest)
            {
                grid.Render();
            }
        }
    
        private DataTable GetDataTable()
        {
            System.Data.DataTable dt = new System.Data.DataTable();
            dt.Columns.Add() ;
            dt.Columns.Add();
            dt.Columns.Add();
            dt.Rows.Add(new object[] { "International Business Machines", 81.41, DateTime.Now.ToLongTimeString() });
            dt.Rows.Add(new object[] { "Johnson & Johnson", 64.72, "9/1 12:00am" });
            dt.Rows.Add(new object[] { "JP Morgan & Chase & Co - " + DateTime.Now.ToLongTimeString(), 45.73, "9/1 12:00am" });
            dt.Rows.Add(new object[] { "McDonald\"s Corporation", 36.76, "9/1 12:00am" });
            return dt;
        }
        
    </script>
    
    <!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>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript" language="javascript">
            Ext.grid.GridView.override({
                onDataChange: function () {
                    this.refresh(true);
                    this.updateHeaderSortState();
                    this.syncFocusEl(0);
                    this.bodyRendered = true; //added
                },
    
                afterRender: function () {
                    if (!this.ds || !this.cm) {
                        return;
                    }
    
                    if (!this.bodyRendered) { //added
                        this.mainBody.dom.innerHTML = this.renderBody() || '*';
                        this.processRows(0, true);
    
                        if (this.deferEmptyText !== true) {
                            this.applyEmptyText();
                        }
                    }
    
                    this.grid.fireEvent('viewready', this.grid);
    
                    this.fireEvent("afterrender", this);
                }
            });
    
            var Y = 0;
            function renderer(val) {
                if (lbl != null)
                    lbl.setText(++Y);
                return "renderer runs: " + Y;
            }
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Label runat="server" ID="lbl"/>
        <ext:Button ID="Button1" ToolTip="Button"
            runat="server" 
            Text="Reconfigure" 
            Icon="Accept">
            <DirectEvents>
                <Click OnEvent="Button1_Click">
                    <EventMask ShowMask="true" Target="Page" />
                </Click>
            </DirectEvents>    
        </ext:Button>
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Border="true"
            StripeRows="true"
            TrackMouseOver="true" Stateful="false"
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server" >
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                                <ext:RecordField Name="quote" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Company" DataIndex="name" >
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel> 
    </body>
    </html>
  6. #6
    The "DataChanged" event occurs twice in that case.

    1. During an AutoLoad request.

    and

    2. After .DataBind().

    Well, you can avoid the AutoLoad request setting up AutoLoad="false" for a Store.

    P.S. Thanks for the good samples that you always provide us with.
  7. #7
    Thanks!
    It works great during postback (thanks to grid.Render()), but I need it to work during the first page load.
    When I add AutoLoad="false" to store, I see an empty grid when I add this:
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
                Reconfigure();
        }
    Sorry, previous code missed Page_Load.
    Sure there should be some workaround...
  8. #8
    You can set up AutoLoad="false" during a DirectEvent.

    Example
    if (X.IsAjaxRequest)
    {
        store.AutoLoad = false;
        grid.Render();
    }
  9. #9
    Works great on example, but doesn't on my product page...
    Probably some extra conditions are involved. Will investigate.

    Thanks a lot!
  10. #10
    Where do you apply the overrode scripts? Please ensure they are applied.
    Last edited by Daniil; Nov 24, 2011 at 5:49 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. Grid Column Renderer
    By karthik.arian03 in forum 1.x Help
    Replies: 8
    Last Post: Feb 11, 2011, 6:34 AM
  2. [CLOSED] number renderer in grid column
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 05, 2010, 10:01 AM
  3. [CLOSED] Tooltip / Renderer for Grid Header Column
    By csharpdev in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 02, 2010, 9:16 AM
  4. [CLOSED] Grid Column Renderer for Currency £
    By CMA in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 07, 2010, 4:52 PM
  5. Checkbox Column with Renderer
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Jan 13, 2009, 3:05 PM

Posting Permissions