[OPEN] [#800] CommandColumn not rendering

  1. #1

    [OPEN] [#800] CommandColumn not rendering

    Hello

    When I have more records in grid, when scrolling, the command column icons are not appearing all the time.
    Following code to reproduce
    Click image for larger version. 

Name:	commands.PNG 
Views:	119 
Size:	38.2 KB 
ID:	23977
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
                };
    
    
                var list = new List<object>();
                for (var i = 0; i < 200; i++)
                {
                    list.Add(new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" });
                }
                this.Store1.DataSource = list;
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Basic Row Command - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Basic Row Command</h1>
            
            <br />
            
            <h3>Icons with tips</h3>
    
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server">
                        <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" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
                            
         
            
            <br />
            
            <h3>Icons with text</h3>
            
            <ext:GridPanel 
                runat="server" 
                StoreID="Store1" 
                Title="Icons with text" 
                Width="600" 
                Height="300">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column 
                            runat="server" 
                            Text="Company" 
                            DataIndex="company" 
                            Flex="1" 
                            />
                        <ext:Column 
                            runat="server" 
                            Text="Price" 
                            Width="75" 
                            DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column 
                            runat="server" 
                            Text="Change" 
                            Width="75" 
                            DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column 
                            runat="server" 
                            Text="Change" 
                            Width="75" 
                            DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn 
                            runat="server" 
                            Text="Last Updated" 
                            Width="85" 
                            DataIndex="lastChange" 
                            />
                        <ext:CommandColumn runat="server" Width="110">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete" Text="Delete" />
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit" Text="Edit" />
                            </Commands>
                            <Listeners>
                                <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>
            </ext:GridPanel>  
            
            <br />
            
          
        </form>
    </body>
    </html>
    Last edited by Daniil; May 13, 2015 at 11:00 AM. Reason: [OPEN] [#800]
  2. #2
    Hi Zdenek

    You missed to add
    <%@ Page Language="C#" %>
    to the [CODE] block :)

    I could not reproduce the problem. Even at 1000 records, all the Commands were still showing.

    What browser are you using?

    I tested on Chrome Version 42.0.2311.135 m, Firefox 35.0.1, and Internet Explorer 11.0.9600.17239.
  3. #3
    Ok, strange I used Firefox 38 and chrome 42
    as this come from clients I doubt the browser will be an issue

    maybe ExtVersion - I have 3.1.0.27288, before I will go with update, can you confirm you have different one?

    Thanks
    Zdenek
  4. #4
    Hi Zdenek,

    On second thought, I can now reproduce this on Ext 3.1.27814.

    I think this appears to be a bug. Even using any of the Infinite Scrolling examples from examples.ext.net and adding the CommandColumn has the same result.

    Here is a sample as taken from the examples with the CommandColumn added

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
        {
            Store store = (Store)sender;
            List<StockQuotation> data = new List<StockQuotation>();
    
            int start = e.Start,
                limit = e.Limit;
            Random randow = new Random();
            DateTime now = DateTime.Now;
    
            for (int i = start + 1; i <= start + limit; i++)
            {
                StockQuotation qoute = new StockQuotation()
                {
                    Company = "Company " + i,
                    Price = randow.Next(0, 200),
                    LastUpdate = now
                };
    
                data.Add(qoute);
            }
            store.Data = data;
            e.Total = 50000;
        }
    
        class StockQuotation
        {
            public string Company { get; set; }
            public int Price { get; set; }
            public DateTime LastUpdate { get; set; }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Infinite Scrolling - Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Infinite Scrolling</h1>
    
            <p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
    
            <p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
    
            <ext:GridPanel
                runat="server"
                Width="500"
                Height="500"
                DisableSelection="true"
                Title="Stock Price">
                <Store>
                    <ext:Store
                        runat="server"
                        Buffered="true"
                        PageSize="200"
                        TrailingBufferZone="10"
                        LeadingBufferZone="10"
                        OnReadData="Store_ReadData">
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader RootProperty="data" />
                                </Reader>
                            </ext:PageProxy>
                        </Proxy>
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Company" />
                                    <ext:ModelField Name="Price" />
                                    <ext:ModelField Name="LastUpdate" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:RowNumbererColumn
                            runat="server"
                            Width="50" />
                        <ext:Column
                            runat="server"
                            Text="Company"
                            DataIndex="Company"
                            Flex="1" />
                        <ext:Column
                            runat="server"
                            Text="Price, $"
                            DataIndex="Price"
                            Width="70"
                            Align="Center" />
                        <ext:Column
                            runat="server"
                            Text="Last Update"
                            DataIndex="LastUpdate"
                            Width="140">
                            <Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
                        </ext:Column>
                        <ext:CommandColumn runat="server" Width="110">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete" Text="Delete" />
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit" Text="Edit" />
                            </Commands>
                            <Listeners>
                                <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server" TrackOver="false" />
                </View>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by EnZo; May 13, 2015 at 8:23 AM.
  5. #5
    OK
    is there any workaround, or an idea when exactly the bug occures? seems that "missing" buttons are everytime on different row

    Z
  6. #6
    Thank you for the report! Created an Issue.
    https://github.com/extnet/Ext.NET/issues/800

    Please try this override.

    Possible Fix
    Ext.grid.column.CommandColumn.override({
        initRenderData: function () {
            var me = this;
            me.gridRef = me.up('tablepanel');
            me.gridRef.addCls("x-grid-componentcolumn");
            me.view = me.gridRef.getView();
            var groupFeature = me.getGroupingFeature(me.gridRef);
    
            if (me.commands) {
                if (me.overOnly) {
                    me.view.on("beforerefresh", me.moveToolbar, me);
                    me.view.on("beforeitemupdate", me.moveToolbar, me);
                    me.view.on("beforeitemremove", me.moveToolbar, me);
    
                    me.view.on("itemmouseenter", me.onItemMouseEnter, me);
                    me.view.on("itemmouseleave", me.onItemMouseLeave, me);
                } else {
                    me.shareMenus(me.commands, "initMenu");
    
                    me.view.on("beforerefresh", me.removeToolbars, me);
                    me.view.on("refresh", me.insertToolbars, me, { buffer: 10 });
    
                    me.view.on("beforeitemupdate", me.removeToolbar, me);
    
                    if (!me.view.bufferedRenderer) {
                        me.view.on("beforeitemremove", me.removeToolbar, me);
                        me.view.on("itemadd", me.itemAdded, me);
                    }
                    me.view.on("itemupdate", me.itemUpdated, me);
                }
            }
    
            if (me.groupCommands && groupFeature) {
                me.shareMenus(me.groupCommands, "initGroupMenu");
    
                if (Ext.isString(groupFeature.groupHeaderTpl)) {
                    groupFeature.groupHeaderTpl = '<div class="standard-view-group">' + groupFeature.groupHeaderTpl + '</div>';
                } else if (groupFeature.groupHeaderTpl && groupFeature.groupHeaderTpl.html) {
                    groupFeature.groupHeaderTpl.html = '<div class="standard-view-group">' + groupFeature.groupHeaderTpl.html + '</div>';
                }
    
                groupFeature.doCollapseExpand = Ext.Function.createInterceptor(groupFeature.doCollapseExpand, this.beforeCollapseExpand, this);
    
                if (!me.commands || me.overOnly) {
                    me.view.on("beforerefresh", me.removeToolbars, this);
                }
    
                me.view.on("refresh", me.insertGroupToolbars, this, { buffer: 10 });
                me.view.on("groupcollapse", me.insertGroupToolbar, this);
                me.view.on("groupexpand", me.insertGroupToolbar, this);
                me.mon(me.gridRef, "resize", me.onGridResize, me);
    
                me.view.on('groupclick', me.groupToolbarClick);
    
                me.view.on("beforeitemupdate", me.groupRemoveToolbar, me);
                me.view.on("itemupdate", me.groupItemUpdated, me);
            }
    
            if (me.gridRef.isTree || me.gridRef.ownerLockable && me.gridRef.ownerLockable.isTree) {
                me._cnrScope = { column: me, root: false };
                me.gridRef.on("beforeitemcollapse", me.removeNodeToolbars, me._cnrScope);
                me._crScope = { column: me, root: true };
                me.gridRef.on("beforeitemmove", me.removeNodeToolbars, me._crScope);
            }
    
            if (me.view.bufferedRenderer && ((me.commands && !me.overOnly) || (me.groupCommands && groupFeature))) {
                Ext.Function.interceptBefore(me.view.all, "scroll", me.beforeScroll, me);
                Ext.Function.interceptAfter(me.view.all, "scroll", Ext.Function.createBuffered(me.afterScroll, 50, me), me);
                Ext.Function.interceptBefore(me.view.all, "clear", me.beforeAllClear, me);
    
                Ext.Function.interceptAfter(me.view, "doAdd", Ext.Function.createBuffered(me.afterViewAdd, 50, me));
            }
    
            return me.callSuper(arguments);
        }
    });
    We would recommend not to use a CommandColumn at all for big grids, because it is heavy. You can notice how slow the commands are rendered.

    It works much faster with an ImageCommandColumn.
    <ext:ImageCommandColumn runat="server" Width="110">
        <Commands>
            <ext:ImageCommand Icon="Delete" CommandName="Delete" Text="Delete" />
            <ext:ImageCommand Icon="NoteEdit" CommandName="Edit" Text="Edit" />
        </Commands>
        <Listeners>
            <Command Handler="Ext.Msg.alert(command, record.data.company);" />
        </Listeners>
    </ext:ImageCommandColumn>
  7. #7
    Seems the issue is not reproducible with SVN trunk after incorporating ExtJS 5.1.1. Please let us know if you can reproduce it still.

    Ext.NET 3.2.0 is going to be released soon.
  8. #8
    Hello
    we can still reproduce this on Ext 3.2

    Hovewer we decided to go with ImageButtons

    is there a chance to have "button" look once the particular image is hovered by mouse?

    (probably some application of
    .x-btn-over > .x-btn-wrap-default-small.x-btn-split-bottom::after {
        background-image: url("/AMS/extjs/packages/ext_theme_gray/build/resources/images/button/s-arrow-bo-gif/ext.axd");
    }
    is required, but I havend found working combination ( with row-imagecommand class)

    thanks


    (Note we are using Gray theme)
  9. #9
    Hello @Zdenek,

    I've just given a shallow look on your question, and it seems a new topic not really related to the bug we are dealing with here.

    If so, would you mind opening a new thread about your question with the ImageButtons?.. If you think your question is really closely related to this bug, please disregard this message.
    Fabrício Murta
    Developer & Support Expert
  10. #10
    we can still reproduce this on Ext 3.2
    Initially, I could not reproduce, but after your update I gave it another try and got it reproducible. The issue might take time to reproduce.

    Moreover, I was able to reproduce it even with my override. Okay, we still have the issue open and keep an eye on that. But I still recommend to use ImageCommandColumn that you follow. Thank you.

    I will review the thread regarding mouse over effect with ImageButtons. Posting here a link for cross-references.
    http://forums.ext.net/showthread.php?59867

Similar Threads

  1. How to get ID of button in CommandColumn
    By Aod47 in forum 1.x Help
    Replies: 0
    Last Post: Nov 24, 2013, 12:59 AM
  2. [CLOSED] CommandColumn how to set Css??
    By gs_user in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 29, 2012, 4:22 AM
  3. CommandColumn not align
    By walle in forum 1.x Help
    Replies: 0
    Last Post: May 13, 2010, 4:15 PM
  4. Help. regarding commandcolumn
    By ydnah2 in forum 1.x Help
    Replies: 2
    Last Post: Aug 19, 2009, 11:46 AM

Posting Permissions