[CLOSED] Groupping Summary with Paging Toolbar

  1. #1

    [CLOSED] Groupping Summary with Paging Toolbar

    Hi,

    I have the following page (your example modified):

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 id="Head1" runat="server">
        <title>Coolite Toolkit - GridPanel with ObjectDataSource</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
        <script runat="server">
            protected void Store1_RefreshData( object sender, StoreRefreshDataEventArgs e )
            {
                this.Label1.Text = e.Sort + ":" + e.Dir;
    
                ObjectDataSource1.SelectParameters["start"].DefaultValue = e.Start.ToString();
                ObjectDataSource1.SelectParameters["limit"].DefaultValue = e.Limit.ToString();
                ObjectDataSource1.SelectParameters["sort"].DefaultValue = e.Sort;
                ObjectDataSource1.SelectParameters["dir"].DefaultValue = e.Dir.ToString();
    
                Store1.DataBind();
            }
    
            protected void ObjectDataSource1_Selected( object sender, ObjectDataSourceStatusEventArgs e )
            {
                ( this.Store1.Proxy[0] as DataSourceProxy ).TotalCount = (int) e.OutputParameters["count"];
            }
        </script>
    
        <style type="text/css">
            .x-grid3-td-fullName .x-grid3-cell-inner
            {
                font-family: tahoma, verdana;
                display: block;
                font-weight: normal;
                font-style: normal;
                color: #385F95;
                white-space: normal;
            }
            .x-grid3-row-body p
            {
                margin: 5px 5px 10px 5px !important;
                width: 99%;
                color: Gray;
            }
            .x-grid3-body .x-grid3-td-Cost
            {
                background-color: #f1f2f4;
            }
            .x-grid3-summary-row .x-grid3-td-Cost
            {
                background-color: #e1e2e4;
            }
            .x-grid3-dirty-cell
            {
                background-image: none;
            }
            .x-grid3-summary-row
            {
                background: #F1F2F4 none repeat scroll 0 0;
                border-left: 1px solid #FFFFFF;
                border-right: 1px solid #FFFFFF;
                color: #333333;
            }
            .x-grid3-summary-row .x-grid3-cell-inner
            {
                font-weight: bold;
                padding-bottom: 4px;
            }
            .x-grid3-cell-first .x-grid3-cell-inner
            {
                padding-left: 16px;
            }
            .x-grid-hide-summary .x-grid3-summary-row
            {
                display: none;
            }
            .x-grid3-summary-msg
            {
                font-weight: bold;
                padding: 4px 16px;
            }
        </style>
    
        <script type="text/javascript">
            var fullName = function(value, metadata, record, rowIndex, colIndex, store)
            {
                return '' + record.data.LastName + ' ' + record.data.FirstName + '';
            };
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OnSelected="ObjectDataSource1_Selected" SelectMethod="GetEmployeesFilter" TypeName="Coolite.Examples.Code.Northwind.Employee">
            <SelectParameters>
                <asp:Parameter Name="start" Type="Int32" />
                <asp:Parameter Name="limit" Type="Int32" />
                <asp:Parameter Name="sort" />
                <asp:Parameter Name="dir" />
                <asp:Parameter Name="count" Direction="Output" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
        <ext:Store ID="Store1" runat="server" AutoLoad="true" RemoteSort="true" DataSourceID="ObjectDataSource1" OnRefreshData="Store1_RefreshData" >
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="={0}" />
                <ext:Parameter Name="limit" Value="={3}" />
            </AutoLoadParams>
            <Proxy>
                <ext:DataSourceProxy />
            </Proxy>
            <Reader>
                <ext:JsonReader ReaderID="EmployeeID">
                    <Fields>
                        <ext:RecordField Name="FirstName" />
                        <ext:RecordField Name="LastName" />
                        <ext:RecordField Name="Title" />
                        <ext:RecordField Name="TitleOfCourtesy" />
                        <ext:RecordField Name="BirthDate" Type="Date" />
                        <ext:RecordField Name="HireDate" Type="Date" />
                        <ext:RecordField Name="Address" />
                        <ext:RecordField Name="City" />
                        <ext:RecordField Name="Region" />
                        <ext:RecordField Name="PostalCode" />
                        <ext:RecordField Name="Country" />
                        <ext:RecordField Name="HomePhone" />
                        <ext:RecordField Name="Extension" />
                        <ext:RecordField Name="Notes" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel runat="server" ID="GridPanel1" Title="Employees" StoreID="Store1" Height="300">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column ColumnID="fullName" Header="Full Name" Width="150" DataIndex="LastName">
                        <Renderer Fn="fullName" />
                    </ext:Column>
                    <ext:Column DataIndex="Title" Header="Title" Width="150" />
                    <ext:Column DataIndex="TitleOfCourtesy" Header="Title Of Courtesy" Width="150" />
                    <ext:GroupingSummaryColumn ColumnID="BirthDate" DataIndex="BirthDate" Header="BirthDate" Width="110" SummaryType="Max">
                        <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
                    </ext:GroupingSummaryColumn>
                    <ext:Column DataIndex="HireDate" Header="HireDate" Width="110">
                        <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
                    </ext:Column>
                    <ext:Column DataIndex="Address" Header="Address" Width="150" />
                    <ext:Column DataIndex="City" Header="City" Width="100" />
                    <ext:Column DataIndex="Region" Header="Region" Width="100" />
                    <ext:Column DataIndex="PostalCode" Header="PostalCode" Width="100" />
                    <ext:Column DataIndex="Country" Header="Country" Width="100" />
                    <ext:Column DataIndex="HomePhone" Header="HomePhone" Width="150" />
                    <ext:Column DataIndex="Extension" Header="Extension" Width="100" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GroupingView HideGroupedColumn="true" runat="server" ForceFit="true" StartCollapsed="false" GroupTextTpl="{text}" EnableRowBody="true">
                    <GetRowClass Handler="rowParams.body = '<p>'+record.data.Notes+'</p>'; return 'x-grid3-row-expanded';" />
                </ext:GroupingView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="3" StoreID="Store1" DisplayInfo="true" DisplayMsg="Displaying employees {0} - {1} of {2}" EmptyMsg="No employees to display" />
            </BottomBar>
            <LoadMask ShowMask="true" />
            <Plugins>
                <ext:GroupingSummary runat="server" />
            </Plugins>
        </ext:GridPanel>
        <ext:Label ID="Label1" runat="server" />
        </form>
    </body>
    </html>

    When I try to group (e.g. by City), I receive a JavaScript error:

    <div class="errorSourceBox errorSource-exec">"s is undefined:[img]chrome://firebug/content/blank.gif[/img] s.style.width = tw;"

    Am I missing something in the configuration?

    Regards,
    Tadeusz



  2. #2

    RE: [CLOSED] Groupping Summary with Paging Toolbar

    Hi,

    We have fixed it. Please update
  3. #3

    RE: [CLOSED] Groupping Summary with Paging Toolbar

    Thank you. It is working fine.

Similar Threads

  1. [CLOSED] paging toolbar events
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 05, 2013, 4:52 AM
  2. Replies: 11
    Last Post: Jun 13, 2012, 4:53 PM
  3. Paging ToolBar Problem
    By kiran malgi in forum 1.x Help
    Replies: 2
    Last Post: Mar 29, 2010, 8:25 AM
  4. [CLOSED] Paging Toolbar with Grid
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 23, 2009, 3:08 AM
  5. [CLOSED] Paging and the Grouping Summary
    By mjessup in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 05, 2009, 11:13 AM

Posting Permissions