[CLOSED] How to display sum of price on top and bottom of GridPanel

1 Attachment(s)

Hi.
I want to display sum of prices on top and botton of GridPanel with title "Total"
Could you please let me know how to do it with example ?

Thank you.

Hi,

The example below is based on this one.
https://examples1.ext.net/#/GridPane...Grid_TotalRow/

Example

Code:

<%@ 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) { var store = this.GridPanel1.GetStore(); store.DataSource = new object[] { new object[] {"test1", "1", "1.01"}, new object[] {"test2", "2", "2.02"}, new object[] {"test3", "3", "3.01"} }; store.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> <script type="text/javascript"> var updateTotal = function (grid) { updateTotalToolbar(grid, grid.getTopToolbar()); updateTotalToolbar(grid, grid.getBottomToolbar()); }; var updateTotalToolbar = function (grid, tb) { var column, field, width, data = {test1: 0, test2: 0, test3: 0}, c, cs = grid.view.getColumnData(); for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) { var r = grid.store.getAt(j); for (var i = 0, len = cs.length; i < len; i++) { c = cs[i]; data[c.name] += r.get(c.name); } } for (var i = 0; i < grid.getColumnModel().columns.length; i++) { column = grid.getColumnModel().columns[i]; field = tb.findBy(function (item) { return item.dataIndex === column.dataIndex; })[0]; c = cs[i]; tb.remove(field, false); tb.insert(i, field); width = grid.getColumnModel().getColumnWidth(i); field.setWidth(width - 5); if (field.getValue() !== "Total:") { field.setValue((c.renderer)(data[c.name], {}, {}, 0, i, grid.store)); } } tb.doLayout(); }; </script> <style type="text/css"> .total-field { background-color : #fff; font-weight : bold !important; color : #000; border : solid 1px silver; padding : 2px; margin-right : 5px; } .total-label { font-weight : bold !important; color : red; padding : 2px; margin-right : 5px; } </style> </head> <body> <ext:ResourceManager runat="server" /> <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true"> <Store> <ext:Store runat="server"> <Reader> <ext:ArrayReader> <Fields> <ext:RecordField Name="test1" /> <ext:RecordField Name="test2" Type="Int" /> <ext:RecordField Name="test3" Type="Float" /> </Fields> </ext:ArrayReader> </Reader> </ext:Store> </Store> <ColumnModel runat="server"> <Columns> <ext:Column Header="Test1" DataIndex="test1" /> <ext:Column Header="Test2" DataIndex="test2" /> <ext:Column Header="Test3" DataIndex="test3" /> </Columns> </ColumnModel> <View> <ext:GridView runat="server" ForceFit="true" /> </View> <Listeners> <ColumnResize Handler="updateTotal(this);" /> <AfterRender Handler="updateTotal(this);" Delay="100" /> </Listeners> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:DisplayField runat="server" DataIndex="test1" Text="Total:" Cls="total-label" /> <ext:DisplayField runat="server" DataIndex="test2" Cls="total-field" Text="-" /> <ext:DisplayField runat="server" DataIndex="test3" Cls="total-field" Text="-" /> </Items> </ext:Toolbar> </TopBar> <BottomBar> <ext:Toolbar runat="server"> <Items> <ext:DisplayField runat="server" DataIndex="test1" Text="Total:" Cls="total-label" /> <ext:DisplayField runat="server" DataIndex="test2" Cls="total-field" Text="-" /> <ext:DisplayField runat="server" DataIndex="test3" Cls="total-field" Text="-" /> </Items> </ext:Toolbar> </BottomBar> </ext:GridPanel> </body> </html>

1 Attachment(s)

I tried it, but it didn't work quiet well.

Hi.
I tried it, but the title showed up the top of GridPanel.
but, I want to display it below the title bar with the sum of price.
Sum of price didn't showed up also.
Please see attachment and following code.

Code:

[javascript Area] var refreshTotal = function (e) { updateTotal(SchDeposit_Grid, SchDeposit_Grid.getTopToolbar()); updateTotal(SchDeposit_Grid, SchDeposit_Grid.getBottomToolbar()); } // 합계 구하기 var updateTotal = function (grid, tb) { var fbar = tb, // 합계 툴바 column, // 개별 칼럼 메타데이터 field, width, // 칼럼 폭 data = { Study_Price: 0, Manage_Price: 0, Commission_Price: 0 }, // 합계 필드 및 데이터 인덱스 (주로 스토어와 맞춘다.) c, // 개별 칼럼 메타데이터(UI) cs = grid.view.getColumnData(); // 칼럼 메타데이터 집합 // 합계 라벨 렌더링 var dataIndex = "Label"; field = fbar.find("dataIndex", dataIndex)[0]; fbar.remove(field, false); fbar.insert(i, field); width = 0; for (var i = 0; i < field.colSpan; i++) { width += grid.getColumnModel().getColumnWidth(i); } field.setWidth(width); // 합계 필드 렌더링 dataIndex = "Manage_Price"; field = fbar.find("dataIndex", dataIndex)[0]; i = 1; c = cs[i]; fbar.remove(field, false); fbar.insert(i, field); width = grid.getColumnModel().getColumnWidth(i); field.setWidth(width); //i++; // 합계 필드 렌더링 dataIndex = "Commission_Price"; field = fbar.find("dataIndex", dataIndex)[0]; i = 2; c = cs[i]; fbar.remove(field, false); fbar.insert(i, field); width = grid.getColumnModel().getColumnWidth(i); field.setWidth(width); //i++; // 합계 필드 렌더링 dataIndex = "Study_Price"; field = fbar.find("dataIndex", dataIndex)[0]; i = 3; c = cs[i]; fbar.remove(field, false); fbar.insert(i, field); width = grid.getColumnModel().getColumnWidth(i); field.setWidth(width); fbar.doLayout(); }; [aspx area] <ext:GridPanel ID="SchDeposit_Grid" runat="server" Height="475" StripeRows="true" ClientIDMode="Static" BaseCls="GridCss"> <%-- Store 시작 --%> <Store> <ext:Store ID="SchDepositStore" runat="server" ClientIDMode="Static"> <Reader> <ext:JsonReader> <Fields> <ext:RecordField Name="Local" Type="Auto" /> <ext:RecordField Name="S_Code" Type="Auto" /> <ext:RecordField Name="gs_code" Type="Auto" /> <ext:RecordField Name="SS_Code" Type="Auto" /> <ext:RecordField Name="S_Name" Type="Auto" /> <ext:RecordField Name="Study_Month" Type="Auto" /> <ext:RecordField Name="Manage_Price" Type="Auto" /> <ext:RecordField Name="Commission_Price" Type="Auto" /> <ext:RecordField Name="Pay_Price" Type="Auto" /> <ext:RecordField Name="Deposit_Status" Type="Auto" /> <ext:RecordField Name="Deposit_Confirm_Date" Type="Auto" /> <ext:RecordField Name="Account_Date" Type="Auto" /> <ext:RecordField Name="Print_Date" Type="Auto" /> <ext:RecordField Name="ST_Code" Type="Auto" /> <ext:RecordField Name="Sale_Chk" Type="Auto" /> </Fields> </ext:JsonReader> </Reader> <Listeners> <AfterRender Handler="updateTotal();" Delay="400" /> </Listeners> </ext:Store> </Store> <%-- Store 끝 --%> <%-- Column 시작 --%> <ColumnModel> <Columns> <ext:Column Header="지역" Width="60" Align="Center" DataIndex="Local" MenuDisabled="true" /> <ext:Column Header="교육원명" Width="180" Align="Center" DataIndex="S_Name" MenuDisabled="true"> <Renderer Fn="SNameRender" /> </ext:Column> <ext:Column Header="청구월" Width="80" Align="Center" DataIndex="Study_Month" MenuDisabled="true" /> <ext:NumberColumn Header="관리비" Width="100" Align="right" DataIndex="Manage_Price" MenuDisabled="true" Format="000,000" /> <ext:NumberColumn Header="커미션" Width="100" Align="right" DataIndex="Commission_Price" MenuDisabled="true" Format="000,000" /> <ext:Column Header="본사입금액" Width="100" Align="right" DataIndex="Pay_Price" MenuDisabled="true"> <Renderer Fn="PayRender" /> </ext:Column> <ext:Column Header="입금상태" Width="100" Align="Center" MenuDisabled="true"> <Renderer Fn="DepositeRender" /> </ext:Column> <ext:Column Header="입금확인일" Width="120" Align="Center" DataIndex="Deposit_Confirm_Date" MenuDisabled="true" /> </Columns> </ColumnModel> <%-- Column 끝 --%> <%-- SelectionModel 설정 시작 --%> <SelectionModel> <ext:CheckboxSelectionModel ID="SchDepositCheckModel" runat="server" CheckOnly="true" ClientIDMode="Static" Width="25"> <Listeners> <RowSelect Handler="record.set('Active', 'true');" /> <RowDeselect Handler="record.set('Active', 'false');" /> </Listeners> </ext:CheckboxSelectionModel> </SelectionModel> <%-- SelectionModel 설정 끝 --%> <View> <ext:GridView ID="GridView1" runat="server" /> </View> <Listeners> <%-- Column Size 변경시에 합계 줄을 다시 그린다. --%> <ColumnResize Handler="refreshTotal();" /> <%-- 그리드 렌더링이 완료되면 Store의 데이터 변경시마다 합계를 계산하도록 이벤트 핸들러 등록 --%> <AfterRender Handler="SchDepositStore.on('datachanged', refreshTotal);" /> </Listeners> <%-- Top부분에 표시될 부분(합계) 시작 -- Grid TotalRow 예제 참고 ------------------------%> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:DisplayField runat="server" ID="SumTopLabel" ClientIDMode="Static" DataIndex="Label" Text="합계" ColSpan="4" Cls="CalcCCss" /> <ext:DisplayField ID="DisplayField2" runat="server" DataIndex="Manage_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" /> <ext:DisplayField ID="DisplayField3" runat="server" DataIndex="Commission_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" /> <ext:DisplayField ID="DisplayField4" runat="server" DataIndex="Study_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" /> </Items> </ext:Toolbar> </TopBar> <%-- Top부분에 표시될 부분(합계) 끝------------------------%> <%-- Bottom부분에 표시될 부분(합계) 시작 -- Grid TotalRow 예제 참고 ------------------------%> <BottomBar> <ext:Toolbar runat="server"> <Items> <ext:DisplayField runat="server" ID="SumLabel" ClientIDMode="Static" DataIndex="Label" Text="합계" ColSpan="4" Cls="CalcCCss" /> <ext:DisplayField ID="SaleSDMDisp" runat="server" DataIndex="Manage_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" /> <ext:DisplayField ID="SaleSDCDisp" runat="server" DataIndex="Commission_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" /> <ext:DisplayField ID="SaleSDPDisp" runat="server" DataIndex="Study_Price" Text="" ClientIDMode="Static" Cls="CalcRCss10" /> </Items> </ext:Toolbar> </BottomBar> <%-- Bottom부분에 표시될 부분(합계) 끝------------------------%> </ext:GridPanel>

Quote:

Originally Posted by rosua

I tried it, but the title showed up the top of GridPanel.

Well, I think it's possible. The single way I can see is using an additional HeaderRow instead of TopBar.
https://examples1.ext.net/#/GridPane...ader/Overview/

Gridpanel Paging total

This method can only get one page total value, if I want to total all pages line value.what to do?thanks

Hi,

If you use remote paging, a single way - count totals at server side.

If you use local paging please try to replace:

Code:

for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) { var r = grid.store.getAt(j); for (var i = 0, len = cs.length; i < len; i++) { c = cs[i]; data[c.name] += r.get(c.name); } }

with

Code:

for (var j = 0, jlen = grid.store.allData.getCount(); j < jlen; j++) { var r = grid.store.getAt(j); for (var i = 0, len = cs.length; i < len; i++) { c = cs[i]; data[c.name] += r.get(c.name); } }