Feb 22, 2012, 1:28 PM
[CLOSED] Gridpanel Filter and Recalculate Column Totals
Hi,
I?ve got a gridpanel which I?ve successfully calculated the total of 3 columns. What I?d like to do when a column is filtered is re-calculate the column totals based on the filtered results. I pass the gridpanel in as a parameter to the javascript. Do I need to put a listener on the filter?
Javascript:
Ian
I?ve got a gridpanel which I?ve successfully calculated the total of 3 columns. What I?d like to do when a column is filtered is re-calculate the column totals based on the filtered results. I pass the gridpanel in as a parameter to the javascript. Do I need to put a listener on the filter?
Javascript:
var UpdateTotal = function (grid) {
var fbar = grid.getBottomToolbar(),
column,
field,
width,
data = { Total: 0, VAT: 0, GrossTotal: 0, Payments: 0, Balance: 0 },
c,
cs = grid.view.getColumnData();
var currencySymbol = "";
//Iterate over the store data
for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) {
var r = grid.store.getAt(j);
if (j == 0) {
currencySymbol = r.data.CurrencySymbol;
}
for (var i = 0, len = cs.length; i < len; i++) {
c = cs[i];
data[c.name] += r.get(c.name);
}
}
//Iterate over the columns
for (var i = 0; i < grid.getColumnModel().columns.length; i++) {
column = grid.getColumnModel().columns[i];
field = fbar.findBy(function (item) {
return item.dataIndex === column.dataIndex;
})[0];
if (field != undefined) {
c = cs[i];
fbar.remove(field, false);
fbar.insert(i, field);
width = grid.getColumnModel().getColumnWidth(i);
field.setWidth(width - 5);
if (isNaN(data[c.name]))
field.setValue(" ");
else
if (data[c.name].toFixed(2) >= 0)
field.setValue(currencySymbol + data[c.name].toFixed(2));
else
field.setValue(" ");
}
}
fbar.doLayout();
};
Store / Gridpanel:<ext:Store
ID="storeRentDemandLandlordFees"
runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Fee" />
<ext:RecordField Name="Landlord" />
<ext:RecordField Name="Total" />
<ext:RecordField Name="VAT" />
<ext:RecordField Name="GrossTotal" />
<ext:RecordField Name="CurrencySymbol" />
<ext:RecordField Name="IsPaid" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="gridPanelRentDemandLandlordFees" runat="server" StoreID="storeRentDemandLandlordFees" AutoHeight="true" AutoWidth="true" EnableColumnHide="false">
<ColumnModel ID="columnModelrentDemandLandlordFees" runat="server">
<Columns>
<ext:Column ColumnID="FeeName" Header="Fee" DataIndex="Fee" Width="125" />
<ext:Column ColumnID="Landlord" Header="Landlord" DataIndex="Landlord" />
<ext:Column ColumnID="Amount" Header="Amount" DataIndex="Total" Align="Right">
<Renderer Fn="FormatAsMoney" />
</ext:Column>
<ext:Column ColumnID="VAT" Header="VAT" DataIndex="VAT" Align="Right">
<Renderer Fn="FormatAsMoney" />
</ext:Column>
<ext:Column ColumnID="Total" Header="Total" DataIndex="GrossTotal" Align="Right">
<Renderer Fn="FormatAsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:DisplayField ID="dfFeeName" runat="server" DataIndex="Fee" Cls="total-field" />
<ext:DisplayField ID="dfLandlord" runat="server" DataIndex="Landlord" Cls="total-field" />
<ext:DisplayField ID="dfAmount" runat="server" DataIndex="Total" Cls="total-field" />
<ext:DisplayField ID="dfVAT" runat="server" DataIndex="VAT" Cls="total-field" />
<ext:DisplayField ID="dfTotal" runat="server" DataIndex="GrossTotal" Cls="total-field" />
</Items>
</ext:Toolbar>
</BottomBar>
<Plugins>
<ext:GridFilters runat="server" ID="GridFiltersLandlordFees" Local="true">
<Filters>
<ext:StringFilter DataIndex="Fee" />
<ext:StringFilter DataIndex="Landlord" />
</Filters>
</ext:GridFilters>
</Plugins>
</ext:GridPanel>
Thanks in advance.Ian
Last edited by Daniil; Feb 27, 2012 at 10:26 AM.
Reason: [CLOSED]