PDA

View Full Version : [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
http://forums.ext.net/attachment.php?attachmentid=17131&stc=1

2.- GridPanel with data and up row American International....
http://forums.ext.net/attachment.php?attachmentid=17161&stc=1

3.- GridPanel with data and down row American International....
http://forums.ext.net/attachment.php?attachmentid=17151&stc=1

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/showthread.php?270786-After-insert-remove-record-grid-refresh-not-resetting-rownumberer-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.