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

  1. #1

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

    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.
    Attached Thumbnails Click image for larger version. 

Name:	snap.jpg 
Views:	189 
Size:	60.7 KB 
ID:	4142  
    Last edited by Daniil; Apr 25, 2012 at 10:06 PM. Reason: [CLOSED]
  2. #2
    Hi,

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

    Example
    <%@ 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>
  3. #3

    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.

    [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>
    Attached Thumbnails Click image for larger version. 

Name:	check.gif 
Views:	92 
Size:	21.9 KB 
ID:	4176  
  4. #4
    Quote Originally Posted by rosua View Post
    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/
  5. #5

    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
  6. #6
    Hi,

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

    If you use local paging please try to replace:
    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
    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);
        }
    }

Similar Threads

  1. Replies: 1
    Last Post: Apr 23, 2012, 8:00 AM
  2. Gridpanel toolbar(top bar and bottom bar) not loading
    By kondareddy1984 in forum 1.x Help
    Replies: 1
    Last Post: Nov 03, 2011, 7:03 PM
  3. GridPanel Bottom tool bar help
    By gopikrishna in forum 1.x Help
    Replies: 0
    Last Post: Mar 06, 2011, 8:28 AM
  4. [CLOSED] extra row on bottom of gridpanel
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 08, 2009, 11:14 PM
  5. Replies: 1
    Last Post: Jun 05, 2009, 8:03 AM

Tags for this Thread

Posting Permissions