[CLOSED] Rownumberer not updating correctly after move up or down the row

**opendat2000** · Dec 11, 2014, 5:43 PM

How the title says.

I can move a row up or down in a GridPanel, but the rownumberer not updating correctly the number. If I move up or down the row, the rownumberer get the last number in the gridpanel (or store)

this is the code:

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }

    protected void CellClick(object sender, DirectEventArgs e)
    {
        string strCompany = e.ExtraParams["company"];
        this.WebUserControl2.Example_Show();
    }
    
    protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
    {
        this.BindData();
    }

    private void BindData()
    {
        Store store = this.GridPanel1.GetStore();

        store.DataSource = this.Data;
        store.DataBind();
    }

    private object[] Data
    {
        get
        {
            DateTime 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 },
            };
        }
    }
</script>
<script type="text/javascript">
         <%--Mover Filas--%>
    var move = function (grid, up) {
        var ds = grid.getStore();
        var record = grid.getSelectionModel().getSelection()[0];
        var rindex = ds.indexOf(record);

        rindex += up ? -1 : 1;

        if (rindex < 0 || rindex >= ds.getCount()) {
            return;
        }

        ds.remove(record);
        ds.insert(rindex, record);
        grid.getSelectionModel().select(record);
    }
    </script>
<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
    <script type="text/javascript">
        Ext.grid.RowNumberer.override(
            {
                initRenderData: function () {
                    var me = this;
                    me.grid = me.up('tablepanel');
                    me.grid.store.on("bulkremove", this.updateRecordsIndexes, me);
                    return me.callParent(arguments);
                },

                updateRecordsIndexes: function () {
                    var store = this.grid.store, i, records = store.getAllRange ? store.getAllRange() : store.getRange(), len;

                    for (i = 0, len = records.length; i < len; i++) {
                        records[i].index = i;
                    }

                    if (store.snapshot) {
                        for (i = 0, len = store.snapshot.length; i < len; i++) {
                            store.snapshot.items[i].index = i;
                        }
                    }

                    store.fireEvent('refresh', store);
                },

                renderer: function (value, metaData, record, rowIdx, colIdx, store) {
                    var rowspan = this.rowspan;
                    if (rowspan) {
                        metaData.tdAttr = 'rowspan="' + rowspan + '"';
                    }

                    metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';

                    if (store.isPagingStore && store.proxy instanceof Ext.data.proxy.Memory) {
                        return (store.allData || store.data).indexOf(record) + 1;
                    }

                    return store.indexOfTotal ? (store.indexOfTotal(record) + 1) : (rowIdx + 1);
                }
            });

        var cellClick =
            function (view, cell, columnIndex, record, row, rowIndex, e)
            {
               var t = e.getTarget(),
               columnId = this.columns[columnIndex].id;

               if (t.className == "imgEdit")
               {
                   return true;
               }

               return false;
            };

        var DetailsRender =
            function () {
                return '<img class="imgEdit" ext:qtip="Pulsa aqu? para ver/editar los detalles adicionales" style="cursor:pointer;" src="Imagenes/btnEditarG.gif"/>';
            };

    </script>
</head>

<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:GridPanel
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="700">
            <Store>
                <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
                    <Model>
                        <ext:Model ID="Model1" 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" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Sorters>
                       <ext:DataSorter Property="company" Direction="ASC" />
                    </Sorters>  
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" />
                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price" />
                    <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change" />
                    <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange" />
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                    <ext:Column ID="Column5" runat="server" 
                            Text="Detalle" 
                            Width="50" 
                            Align="Center" 
                                MenuDisabled="true" 
                            Resizable="false">
                        <Renderer Fn="DetailsRender" />                    
                    </ext:Column>
                </Columns>
            </ColumnModel>
            
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
            </SelectionModel>
            
            <View>
                <ext:GridView ID="GridView1" runat="server" StripeRows="true" />                   
            </View>      

            <Listeners>
                <Render Handler="this.on('cellclick', cellClick);" />
            </Listeners>

            <DirectEvents>
                <CellClick  OnEvent="CellClick">
                    <ExtraParams>
                        <ext:Parameter Name="company" Value="record.get('company')" Mode="Raw" />
                    </ExtraParams>
                </CellClick>
            </DirectEvents>
            <Buttons>
                <ext:Button ID="BtnUp" runat="server" Text="Subir" Icon="ArrowUp">
                                <Listeners>                                    
                                    <Click Handler="move(#{GridPanel1}, true);" />
                                </Listeners>
                            </ext:Button>

                            <ext:Button ID="BtnDown" runat="server" Text="Bajar" Icon="ArrowDown">
                                <Listeners>                                    
                                    <Click Handler="move(#{GridPanel1}, false);"/>
                                </Listeners>
                            </ext:Button>
            </Buttons>
            <BottomBar>
                 <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                    <Items>
                        <ext:Label ID="Label1" runat="server" Text="Page size:" />
                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                        <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                            <Items>
                                <ext:ListItem Text="1" />
                                <ext:ListItem Text="2" />
                                <ext:ListItem Text="5" />
                                <ext:ListItem Text="10" />
                            </Items>
                            <SelectedItems>
                                <ext:ListItem Value="10" />
                            </SelectedItems>
                            <Listeners>
                                <Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.reload();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                    <Plugins>
                        <ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
                    </Plugins>
                </ext:PagingToolbar>
            </BottomBar>
            <TopBar>
            </TopBar>
        </ext:GridPanel>

        <uc2:WebUserControl2 ID="WebUserControl2" runat="server" />
    </form>
</body>
</html>

In the next image, can see that I try to say.

1.- GridPanel with data without move

2.- GridPanel with data and up row American International....

3.- GridPanel with data and down row American International....

Thanks.

**anup** · Dec 12, 2014, 12:26 PM

Hi,

Normally you just need to refresh the view after doing the move:

grid.getView().refresh();

Add the above line to your JavaScript move function at the very end.

However, it seems in Ext JS 4, there is a bug that this step is not enough (which Daniil reported years ago to Sencha, but unfortunately still seems unresolved -- http://www.sencha.com/forum/showthre...-column-values).

Fortunately, someone provided a workaround in the above Sencha forum post:

columns: [{
                 xtype:'rownumberer',
                 renderer: function (v, p, record, rowIndex) {
                             //if (this.rowspan) {
                             //    p.cellAttr = 'rowspan="' + this.rowspan + '"';
                             //}
                             return rowIndex + 1;
                 }
        }

So in your code, where you override Numberer, you can use the above like this:

        Ext.grid.RowNumberer.override({
            initRenderData: function () {
                // etc.
            },
 
            updateRecordsIndexes: function () {
                // etc.
            },
 
            renderer: function (v, p, record, rowIndex) {
                return rowIndex + 1;
            }
        });

Note, the above renderer implementation is replacing yours which was updating some meta data and using the store's indexes. I don't think all that is needed?

Hope that helps?

**opendat2000** · Dec 12, 2014, 4:20 PM

Thanks a lot for that.

please can close the thread?.

again thanks a lot.

Thread: [CLOSED] Rownumberer not updating correctly after move up or down the row

Thread Tools

Search Thread

Display

[CLOSED] Rownumberer not updating correctly after move up or down the row

Similar Threads

[FIXED] [#204] [2.2] RowNumberer resets to 1 when you page

[OPEN] [#329] Rownumberer not updating correctly after deleting a filtered row

How to move this to code behind?

Move to next Tab

Row move

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Rownumberer not updating correctly after move up or down the row

[CLOSED] Rownumberer not updating correctly after move up or down the row

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us