[CLOSED] Totals convert as links at GridPanel issue

  1. #1

    [CLOSED] Totals convert as links at GridPanel issue

    Hi,

    I have rendered sub totals at gridPanel and I need to render those totals as links. I can able to render as links but, I didn't get how to differentiate which link is clicked using javascript function. I mean if any column in row render as link we can identify the clicked link with help of row values, but in case of totals there is no other values as in row values except totals count. I need to show different popup windows based on group total links. Please check the attachment
    Click image for larger version. 

Name:	LinksAtTotals.PNG 
Views:	117 
Size:	9.4 KB 
ID:	3119

    Please give one example code
  2. #2
    Please post a sample demonstrates how do you render links
  3. #3

    Totals convert as links at GridPanel issue

    Hi Vladimir,

    The sample code I am posting here.


    
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ExtDataLinksTest.aspx.vb" Inherits="Testing_ExtDataLinksTest" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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></title>
        <style type="text/css">
            .linkBSpecs
            {
                color: Blue;
                font-weight: bold;
                text-decoration: none;
                text-align: right;
            }
            
            .linkSpecs
            {
                color: Blue;
                text-decoration: none;
            }
        </style>
        <script language="javascript" type="text/javascript">
    
            var updateTotal = function (grid) {
                var fbar = grid.getBottomToolbar(),
                    column,
                    field,
                    width,
                    data = {},
                    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];
                        column = grid.getColumnModel().columns[i];
    
                        if (column.summaryType) {
                            data[c.name] = Ext.grid.GroupSummary.Calculations[column.summaryType](data[c.name] || 0, r, c.name, data);
                        }
                    }
                }
    
                for (var i = 0; i < grid.getColumnModel().columns.length; i++) {
                    column = grid.getColumnModel().columns[i];
                    if (column.dataIndex != grid.store.groupField) {
                        field = fbar.findBy(function (item) {
                            return item.dataIndex === column.dataIndex;
                        })[0];
    
                        if (field) { //added             
                            c = cs[i];
                            fbar.remove(field, false);
                            fbar.insert(i, field);
                            width = grid.getColumnModel().getColumnWidth(i);
                            field.setWidth(width - 5);
                            field.setValue((column.summaryRenderer || c.renderer)(data[c.name], {}, {}, 0, i, grid.store));
                        }
                    }
                }
    
                fbar.doLayout();
            }
    
            function linkRenderer(value, meta, record) {
    
                return String.format("<a class='company-link' href='#' onclick='linkClick(\"{1}\");'><b>{0}</b></a>", value, record.id);
            }
    
            function linkClick(recordId) {
    
                if (StoreLoans.getById(recordId).get("LOAN_STATUS_TYPE") == "1003 Applications")
                    OpenPipelineSummary('AllLoans', '1003', '1003');
                else if (StoreLoans.getById(recordId).get("LOAN_STATUS_TYPE") == "Loans In Final Statuses")
                    OpenPipelineSummary('AllLoans', 'LoansInFinal', StoreLoans.getById(recordId).get("LOAN_STATUS"));
                else if (StoreLoans.getById(recordId).get("LOAN_STATUS_TYPE") == "Loans In Processing")
                    OpenPipelineSummary('AllLoans', 'LoansInProcess', StoreLoans.getById(recordId).get("LOAN_STATUS"));
                else if (StoreLoans.getById(recordId).get("LOAN_STATUS_TYPE") == "Registered Loans")
                    OpenPipelineSummary('AllLoans', 'Registered', 'Registered');
            }
    
    
    
            function linkSummaryRenderer(value, meta, record) {
                //alert("value = " + value + " and RecordId " + record.id);
                return String.format("<a class='company-link' href='#' onclick='linkTotalClick(\"{1}\");'><b>{0}</b></a>", value, value);
            }
    
            function linkTotalClick(recordId) {
    
                OpenPipelineSummary('AllLoans', '1003', '1003');
            }
    
            var OpenPipelineSummary = function (screenname, linkinfo, statusinfo) {
                var windowConfig = {
                    id: "WindowPipeLinePopup",
                    height: 528,
                    width: 720,
                    hidden: false,
                    title: linkinfo,
                    closeAction: "hide",
                    buttonAlign: "center",
                    iconCls: "icon-pagewhitecode",
                    buttons: [
                        {
                            id: "btnWinPipeLineClose",
                            text: "Close",
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        //parent.pnlMain.getBody().btnEventAutoRefresh.fireEvent('click');
                                        Ext.getCmp('WindowPipeLinePopup').hide();
                                    }
                                }
                            }
                        }
                    ],
                    autoLoad: {
                        url: "ExtPipelineSummary.aspx?" + new Date().getTime(),
                        nocache: true,
                        mode: "iframe",
                        showMask: true,
                        triggerEvent: "show",
                        reloadOnEvent: true,
                        params: {
                            DEFAULT_TO_OPEN: screenname,
                            LOANSTATUS_TO_OPEN: linkinfo,
                            LOANSTATUS: statusinfo
                        }
                    }
                }
                renderWindow(windowConfig);
            }
    
            var renderWindow = function (windowConfig) {
                var win = Ext.getCmp(windowConfig.id);
                if (!win) {
                    new Ext.Window(windowConfig);
                } else {
                    win.close();
                    new Ext.Window(windowConfig);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="StoreLoans" runat="server" GroupField="LOAN_STATUS_TYPE">
            <Reader>
                <ext:JsonReader IDProperty="RECORD_ID">
                    <Fields>
                        <ext:RecordField Name="RECORD_ID" />
                        <ext:RecordField Name="LOAN_STATUS" />
                        <ext:RecordField Name="LOAN_STATUS_TYPE" />
                        <ext:RecordField Name="LOAN_STATUS_COUNT" Type="Int"/>
                    </Fields>                
                </ext:JsonReader>
            </Reader>
            <SortInfo Field="RECORD_ID" Direction="ASC"/>        
        </ext:Store>
        <ext:Viewport ID="Viewport1" runat="server" StyleSpec="bg" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="pnlProfile" runat="server" Region="Center" Layout="BorderLayout" Border="false"
                    BodyStyle="background-color:#ffffff">
                    <Items>
                        <ext:GridPanel ID="grdLoansSummary" runat="server" StoreID="StoreLoans" StripeRows="true"
                            AutoExpandColumn="LOAN_STATUS" Height="280" Region="Center">
                            <ColumnModel ID="ColumnModel4" runat="server">
                                <Columns>
                                    <ext:GroupingSummaryColumn ColumnID="LOAN_STATUS" Header="Loans" DataIndex="LOAN_STATUS"
                                        Hideable="false" SummaryType="Count">
                                        <SummaryRenderer Handler="return ((value === 0 || value > 1) ? 'Total' : 'Total');" />
                                    </ext:GroupingSummaryColumn>
                                    <ext:GroupingSummaryColumn ColumnID="LOAN_STATUS_COUNT" Header="Loan Count" DataIndex="LOAN_STATUS_COUNT"
                                        Hideable="false" SummaryType="Sum">
                                        <%--<SummaryRenderer Handler="return ((value === 0 || value > 1) ? value : '1');" />--%> 
                                        <SummaryRenderer Fn="linkSummaryRenderer" />                                   
                                        <Renderer Fn="linkRenderer" />
                                    </ext:GroupingSummaryColumn>
                                    <%--<ext:Column ColumnID="lnSCount" Header="Users" DataIndex="LOAN_STATUS_COUNT">
                                        <Renderer Fn="linkRenderer" />
                                    </ext:Column>--%>
                                    <ext:Column ColumnID="LOAN_STATUS_TYPE" DataIndex="LOAN_STATUS_TYPE">
                                    </ext:Column>
                                </Columns>
                                <Listeners>
                                    <WidthChange Handler="updateTotal(#{grdLoansSummary});" />
                                </Listeners>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel4" runat="server" />
                            </SelectionModel>
                            <Listeners>
                                <ColumnResize Handler="updateTotal(#{grdLoansSummary});" />
                                <AfterRender Handler="updateTotal(#{grdLoansSummary});" Delay="100" />
                            </Listeners>
                            <LoadMask ShowMask="true" />
                            <View>
                                <ext:GroupingView ID="GroupingView2" runat="server" ForceFit="true" MarkDirty="false"
                                    ShowGroupName="false" EnableNoGroups="true" HideGroupedColumn="true" />
                            </View>
                            <Plugins>
                                <ext:GroupingSummary ID="GroupingSummary2" runat="server">
                                </ext:GroupingSummary>
                            </Plugins>
                            <BottomBar>
                                <ext:Toolbar ID="Toolbar1" runat="server" Hidden="true">
                                    <Items>
                                        <ext:DisplayField ID="dfEvents" runat="server" DataIndex="LOAN_STATUS" Cls="total-field"
                                            Text="-" />
                                    </Items>
                                </ext:Toolbar>
                            </BottomBar>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>

    The code behind

    
    
    Partial Class Testing_ExtDataLinksTest
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest Then
                Call LoadLoanCounts()
            End If
        End Sub
    
        Public Sub LoadLoanCounts()
            StoreLoans.DataSource = GetAllLoansData()
            StoreLoans.DataBind()
        End Sub
    
        Public Function GetAllLoansData() As DataTable
            Dim dt As New DataTable
            Dim dr As DataRow
            Dim i As Integer
            Dim j As Integer
    
            dt.Columns.Add("RECORD_ID")
            dt.Columns.Add("LOAN_STATUS")
            dt.Columns.Add("LOAN_STATUS_TYPE")
            dt.Columns.Add("LOAN_STATUS_COUNT")
    
            ' Add all loans in final statuses
            For j = 0 To 3
                
                dr = dt.NewRow()
                dr(0) = i + 1
                dr(1) = "Description " & i
                dr(2) = "Loans In Final Statuses"
                dr(3) = j + i
    
                dt.Rows.Add(dr)
                i = i + 1
            Next
    
            'Add all loans in Processing status
            For j = 0 To 2
                
                dr = dt.NewRow()
                dr(0) = i + 1
                dr(1) = "Description " & i
                dr(2) = "Loans In Processing"
                dr(3) = j + i
    
                dt.Rows.Add(dr)
                i = i + 1
            Next
    
            ' Add all Registered loans
            dr = dt.NewRow()
            dr(0) = i + 1
            dr(1) = "Registered"
            dr(2) = "Registered Loans"
            dr(3) = j + i
    
            dt.Rows.Add(dr)
    
            i = i + 1
    
            'Add all 1003 status loans
            dr = dt.NewRow()
            dr(0) = i + 1
            dr(1) = "1003"
            dr(2) = "1003 Applications"
            dr(3) = j + 1
    
            dt.Rows.Add(dr)
    
    
            Return dt
        End Function
    End Class

    The main problem is, there is no specific record.id for total counts, so I didn't identify the total links while clicking, that is opening the same window for all total clicks. There is other problem also about sorting of grouping column. I don't need any sorting for that column "LOAN_STATUS_TYPE", I want to show the grid grouping columns as in this order...1. Loans In Final Statuses, 2. Loans In Processing, 3. Registered and 4. 1003 Applications. To make this I have given sortinfo field "RECORD_ID" in the store object, even though the order is as following ...1. 1003 Applications 2. Loans In Final Statuses, 3. Loans In Processing and 4. Registered.

    Quote Originally Posted by Vladimir View Post
    Please post a sample demonstrates how do you render links
  4. #4
    Unfortunately, SummaryRenderer doesn't provide any group information therefore it is required to override js code to get that info
    About sorting issue, see BeforeLoad listener for the store
    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Data" %>
    <!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></title>
    
    
        <script runat="server">        
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    StoreLoans.DataSource = GetAllLoansData();
                    StoreLoans.DataBind();
                }
            }
    
    
            public DataTable GetAllLoansData()
            {
                DataTable dt = new DataTable();
                DataRow dr = default(DataRow);
                int i = 0;
                int j = 0;
    
    
                dt.Columns.Add("RECORD_ID");
                dt.Columns.Add("LOAN_STATUS");
                dt.Columns.Add("LOAN_STATUS_TYPE");
                dt.Columns.Add("LOAN_STATUS_COUNT");
    
    
                // Add all loans in final statuses
                for (j = 0; j <= 3; j++)
                {
    
    
                    dr = dt.NewRow();
                    dr[0] = i + 1;
                    dr[1] = "Description " + i;
                    dr[2] = "Loans In Final Statuses";
                    dr[3] = j + i;
    
    
                    dt.Rows.Add(dr);
                    i = i + 1;
                }
    
    
                //Add all loans in Processing status
                for (j = 0; j <= 2; j++)
                {
    
    
                    dr = dt.NewRow();
                    dr[0] = i + 1;
                    dr[1] = "Description " + i;
                    dr[2] = "Loans In Processing";
                    dr[3] = j + i;
    
    
                    dt.Rows.Add(dr);
                    i = i + 1;
                }
    
    
                // Add all Registered loans
                dr = dt.NewRow();
                dr[0] = i + 1;
                dr[1] = "Registered";
                dr[2] = "Registered Loans";
                dr[3] = j + i;
    
    
                dt.Rows.Add(dr);
    
    
                i = i + 1;
    
    
                //Add all 1003 status loans
                dr = dt.NewRow();
                dr[0] = i + 1;
                dr[1] = "1003";
                dr[2] = "1003 Applications";
                dr[3] = j + 1;
    
    
                dt.Rows.Add(dr);
    
    
    
    
                return dt;
            }    
        </script>
    
    
        <style type="text/css">
            .linkBSpecs
            {
                color: Blue;
                font-weight: bold;
                text-decoration: none;
                text-align: right;
            }
            .linkSpecs
            {
                color: Blue;
                text-decoration: none;
            }
        </style>
        
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
    
        <script language="javascript" type="text/javascript">
        
            Ext.grid.GroupSummary.override({
                doGroupEnd: function (buf, g, cs, ds, colCount) {
                    var data = this.calculate(g.rs, cs);
                    buf.push('</div>', this.renderSummary({ data: data }, cs, g.groupId), '</div>');
                },
                
                refreshSummaryById : function(gid){
                    var g = Ext.getDom(gid);
                    if(!g){
                        return false;
                    }
                    var rs = [];
                    this.grid.getStore().each(function(r){
                        if(r._groupId == gid){
                            rs[rs.length] = r;
                        }
                    });
                    var cs = this.view.getColumnData(),
                        data = this.calculate(rs, cs),
                        markup = this.renderSummary({data: data}, cs, gid),
                        existing = this.getSummaryNode(gid);
                        
                    if(existing){
                        g.removeChild(existing);
                    }
                    Ext.DomHelper.append(g, markup);
                    return true;
                },
                
                renderSummary: function (o, cs, groupId) {
                    cs = cs || this.view.getColumnData();
                    var cfg = this.grid.getColumnModel().config,
                        buf = [], c, p = {}, cf, last = cs.length-1;
                    for (var i = 0, len = cs.length; i < len; i++) {
                        c = cs[i];
                        cf = cfg[i];
                        p.id = c.id;
                        p.style = c.style;
                        p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
    
    
                        if (cf.summaryType || cf.summaryRenderer) {
                            var groupValue = "";
                            this.grid.getStore().each(function(r){
                                if(r._groupId == groupId){
                                    groupValue = r.get(r.store.groupField);
                                    return false;
                                }
                            });
                            
                            p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o, 0, i, this.grid.store, groupValue);
                        } else {
                            p.value = '';
                        }
                        if (p.value == undefined || p.value === "") p.value = "&#160;";
                        buf[buf.length] = this.cellTpl.apply(p);
                    }
    
    
                    return this.rowTpl.apply({
                        tstyle: 'width:' + this.view.getTotalWidth() + ';',
                        cells: buf.join('')
                    });
                }
             });
    
    
    
    
    
    
            function linkRenderer(value, meta, record) {
    
    
                return String.format("<a class='company-link' href='#' onclick='linkClick(\"{1}\");'><b>{0}</b></a>", value, record.id);
            }
    
    
            function linkSummaryRenderer(value, meta, data, row, column, store, groupValue) {
                return String.format("<a class='company-link' href='#' onclick='linkTotalClick(\"{1}\");'><b>{0}</b></a>", value, groupValue);
            }
     
            function linkClick(recordId) {
                alert('Click on total of record.id = ' + recordId);
            }
            
            function linkTotalClick(groupValue) {
                alert('Click on total of for group with value = ' + groupValue);
            }
        </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="StoreLoans" runat="server" GroupField="LOAN_STATUS_TYPE">
           
            <Reader>
                <ext:JsonReader IDProperty="RECORD_ID">
                    <Fields>
                        <ext:RecordField Name="RECORD_ID" />
                        <ext:RecordField Name="LOAN_STATUS" />
                        <ext:RecordField Name="LOAN_STATUS_TYPE" />
                        <ext:RecordField Name="LOAN_STATUS_COUNT" Type="Int" />
                    </Fields>
                </ext:JsonReader>
            </Reader>        
            <Listeners>
                <BeforeLoad Handler="this.multiSortInfo.sorters = [];" />
            </Listeners>
        </ext:Store>
        <ext:Viewport ID="Viewport1" runat="server" StyleSpec="bg" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="pnlProfile" runat="server" Region="Center" Layout="BorderLayout" Border="false"
                    BodyStyle="background-color:#ffffff">
                    <Items>
                        <ext:GridPanel ID="grdLoansSummary" runat="server" StoreID="StoreLoans" StripeRows="true"
                            AutoExpandColumn="LOAN_STATUS" Height="280" Region="Center">
                            <ColumnModel ID="ColumnModel4" runat="server">
                                <Columns>
                                    <ext:GroupingSummaryColumn ColumnID="LOAN_STATUS" Header="Loans" DataIndex="LOAN_STATUS"
                                        Hideable="false" SummaryType="Count">
                                        <SummaryRenderer Handler="return ((value === 0 || value > 1) ? 'Total' : 'Total');" />
                                    </ext:GroupingSummaryColumn>
                                    
                                    <ext:GroupingSummaryColumn ColumnID="LOAN_STATUS_COUNT" Header="Loan Count" DataIndex="LOAN_STATUS_COUNT"
                                        Hideable="false" SummaryType="Sum">                                 
                                        <SummaryRenderer Fn="linkSummaryRenderer" />
                                        <Renderer Fn="linkRenderer" />
                                    </ext:GroupingSummaryColumn>
                                    
                                    <ext:Column ColumnID="LOAN_STATUS_TYPE" DataIndex="LOAN_STATUS_TYPE">
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel4" runat="server" />
                            </SelectionModel>
                            <LoadMask ShowMask="true" />
                            <View>
                                <ext:GroupingView ID="GroupingView2" runat="server" ForceFit="true" MarkDirty="false"
                                    ShowGroupName="false" EnableNoGroups="true" HideGroupedColumn="true" />
                            </View>
                            <Plugins>
                                <ext:GroupingSummary ID="GroupingSummary2" runat="server">
                                </ext:GroupingSummary>
                            </Plugins>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  5. #5

    Totals convert as links at GridPanel issue

    Hi Vladimir,

    Thank you it is working now.



    Quote Originally Posted by Vladimir View Post
    Unfortunately, SummaryRenderer doesn't provide any group information therefore it is required to override js code to get that info
    About sorting issue, see BeforeLoad listener for the store
    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Data" %>
    <!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></title>
    
    
        <script runat="server">        
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    StoreLoans.DataSource = GetAllLoansData();
                    StoreLoans.DataBind();
                }
            }
    
    
            public DataTable GetAllLoansData()
            {
                DataTable dt = new DataTable();
                DataRow dr = default(DataRow);
                int i = 0;
                int j = 0;
    
    
                dt.Columns.Add("RECORD_ID");
                dt.Columns.Add("LOAN_STATUS");
                dt.Columns.Add("LOAN_STATUS_TYPE");
                dt.Columns.Add("LOAN_STATUS_COUNT");
    
    
                // Add all loans in final statuses
                for (j = 0; j <= 3; j++)
                {
    
    
                    dr = dt.NewRow();
                    dr[0] = i + 1;
                    dr[1] = "Description " + i;
                    dr[2] = "Loans In Final Statuses";
                    dr[3] = j + i;
    
    
                    dt.Rows.Add(dr);
                    i = i + 1;
                }
    
    
                //Add all loans in Processing status
                for (j = 0; j <= 2; j++)
                {
    
    
                    dr = dt.NewRow();
                    dr[0] = i + 1;
                    dr[1] = "Description " + i;
                    dr[2] = "Loans In Processing";
                    dr[3] = j + i;
    
    
                    dt.Rows.Add(dr);
                    i = i + 1;
                }
    
    
                // Add all Registered loans
                dr = dt.NewRow();
                dr[0] = i + 1;
                dr[1] = "Registered";
                dr[2] = "Registered Loans";
                dr[3] = j + i;
    
    
                dt.Rows.Add(dr);
    
    
                i = i + 1;
    
    
                //Add all 1003 status loans
                dr = dt.NewRow();
                dr[0] = i + 1;
                dr[1] = "1003";
                dr[2] = "1003 Applications";
                dr[3] = j + 1;
    
    
                dt.Rows.Add(dr);
    
    
    
    
                return dt;
            }    
        </script>
    
    
        <style type="text/css">
            .linkBSpecs
            {
                color: Blue;
                font-weight: bold;
                text-decoration: none;
                text-align: right;
            }
            .linkSpecs
            {
                color: Blue;
                text-decoration: none;
            }
        </style>
        
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
    
        <script language="javascript" type="text/javascript">
        
            Ext.grid.GroupSummary.override({
                doGroupEnd: function (buf, g, cs, ds, colCount) {
                    var data = this.calculate(g.rs, cs);
                    buf.push('</div>', this.renderSummary({ data: data }, cs, g.groupId), '</div>');
                },
                
                refreshSummaryById : function(gid){
                    var g = Ext.getDom(gid);
                    if(!g){
                        return false;
                    }
                    var rs = [];
                    this.grid.getStore().each(function(r){
                        if(r._groupId == gid){
                            rs[rs.length] = r;
                        }
                    });
                    var cs = this.view.getColumnData(),
                        data = this.calculate(rs, cs),
                        markup = this.renderSummary({data: data}, cs, gid),
                        existing = this.getSummaryNode(gid);
                        
                    if(existing){
                        g.removeChild(existing);
                    }
                    Ext.DomHelper.append(g, markup);
                    return true;
                },
                
                renderSummary: function (o, cs, groupId) {
                    cs = cs || this.view.getColumnData();
                    var cfg = this.grid.getColumnModel().config,
                        buf = [], c, p = {}, cf, last = cs.length-1;
                    for (var i = 0, len = cs.length; i < len; i++) {
                        c = cs[i];
                        cf = cfg[i];
                        p.id = c.id;
                        p.style = c.style;
                        p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
    
    
                        if (cf.summaryType || cf.summaryRenderer) {
                            var groupValue = "";
                            this.grid.getStore().each(function(r){
                                if(r._groupId == groupId){
                                    groupValue = r.get(r.store.groupField);
                                    return false;
                                }
                            });
                            
                            p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o, 0, i, this.grid.store, groupValue);
                        } else {
                            p.value = '';
                        }
                        if (p.value == undefined || p.value === "") p.value = "*";
                        buf[buf.length] = this.cellTpl.apply(p);
                    }
    
    
                    return this.rowTpl.apply({
                        tstyle: 'width:' + this.view.getTotalWidth() + ';',
                        cells: buf.join('')
                    });
                }
             });
    
    
    
    
    
    
            function linkRenderer(value, meta, record) {
    
    
                return String.format("<a class='company-link' href='#' onclick='linkClick(\"{1}\");'><b>{0}</b></a>", value, record.id);
            }
    
    
            function linkSummaryRenderer(value, meta, data, row, column, store, groupValue) {
                return String.format("<a class='company-link' href='#' onclick='linkTotalClick(\"{1}\");'><b>{0}</b></a>", value, groupValue);
            }
     
            function linkClick(recordId) {
                alert('Click on total of record.id = ' + recordId);
            }
            
            function linkTotalClick(groupValue) {
                alert('Click on total of for group with value = ' + groupValue);
            }
        </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="StoreLoans" runat="server" GroupField="LOAN_STATUS_TYPE">
           
            <Reader>
                <ext:JsonReader IDProperty="RECORD_ID">
                    <Fields>
                        <ext:RecordField Name="RECORD_ID" />
                        <ext:RecordField Name="LOAN_STATUS" />
                        <ext:RecordField Name="LOAN_STATUS_TYPE" />
                        <ext:RecordField Name="LOAN_STATUS_COUNT" Type="Int" />
                    </Fields>
                </ext:JsonReader>
            </Reader>        
            <Listeners>
                <BeforeLoad Handler="this.multiSortInfo.sorters = [];" />
            </Listeners>
        </ext:Store>
        <ext:Viewport ID="Viewport1" runat="server" StyleSpec="bg" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="pnlProfile" runat="server" Region="Center" Layout="BorderLayout" Border="false"
                    BodyStyle="background-color:#ffffff">
                    <Items>
                        <ext:GridPanel ID="grdLoansSummary" runat="server" StoreID="StoreLoans" StripeRows="true"
                            AutoExpandColumn="LOAN_STATUS" Height="280" Region="Center">
                            <ColumnModel ID="ColumnModel4" runat="server">
                                <Columns>
                                    <ext:GroupingSummaryColumn ColumnID="LOAN_STATUS" Header="Loans" DataIndex="LOAN_STATUS"
                                        Hideable="false" SummaryType="Count">
                                        <SummaryRenderer Handler="return ((value === 0 || value > 1) ? 'Total' : 'Total');" />
                                    </ext:GroupingSummaryColumn>
                                    
                                    <ext:GroupingSummaryColumn ColumnID="LOAN_STATUS_COUNT" Header="Loan Count" DataIndex="LOAN_STATUS_COUNT"
                                        Hideable="false" SummaryType="Sum">                                 
                                        <SummaryRenderer Fn="linkSummaryRenderer" />
                                        <Renderer Fn="linkRenderer" />
                                    </ext:GroupingSummaryColumn>
                                    
                                    <ext:Column ColumnID="LOAN_STATUS_TYPE" DataIndex="LOAN_STATUS_TYPE">
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel4" runat="server" />
                            </SelectionModel>
                            <LoadMask ShowMask="true" />
                            <View>
                                <ext:GroupingView ID="GroupingView2" runat="server" ForceFit="true" MarkDirty="false"
                                    ShowGroupName="false" EnableNoGroups="true" HideGroupedColumn="true" />
                            </View>
                            <Plugins>
                                <ext:GroupingSummary ID="GroupingSummary2" runat="server">
                                </ext:GroupingSummary>
                            </Plugins>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Gridpanel Filter and Recalculate Column Totals
    By IanPearce in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 22, 2012, 3:08 PM
  2. [CLOSED] Add totals to gridpanel without grouping
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 19, 2011, 12:08 PM
  3. Links Inside GridPanel
    By marcmvc in forum 1.x Help
    Replies: 1
    Last Post: May 17, 2010, 1:43 PM
  4. Calculate Totals in GridPanel
    By simonmicheal in forum 1.x Help
    Replies: 1
    Last Post: Aug 01, 2009, 3:39 PM
  5. Replies: 2
    Last Post: Jul 01, 2009, 4:49 PM

Tags for this Thread

Posting Permissions