What's New?

Add a row to Grouping Summary grid

  1. #1
    Mar 28, 2012, 4:48 PM

    Add a row to Grouping Summary grid

    Hello,

    in the example "Grouping with Remote Summary" i'm trying to figure out to allow a user inserting a row to a group. I'm assuming I will have to put some kind of icon in the summary header.

    Any help will be appreciated.

    Ernesto.
  2. #2
    Mar 29, 2012, 9:24 PM
    Hi,

    Please see the example how to set up group commands.
    https://examples1.ext.net/#/GridPane...Group_Command/
  3. #3
    Mar 30, 2012, 4:38 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    Please see the example how to set up group commands.
    https://examples1.ext.net/#/GridPane...Group_Command/
    Thank you Danil,

    Please take a look at this code sample (v 1.3).
    I have added a add row command, but this adds a new group at first, then the subsequent adds works fine.
    I want to add a row to the current group.

    <%@ Page Language="C#" %>

<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ 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">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        CultureInfo ci = new CultureInfo("en-US");
        this.Store1.DataSource = new List<Project> 
         { 
            new Project(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
         };

        this.Store1.DataBind();
    }

    [DirectMethod]
    public void AfterEdit(int id, string field, string oldValue, string newValue, object customer)
    {
        string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";

        // Send Message...
        X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
    }

    public class Project
    {
        public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
        {
            this.ProjectID = projectId;
            this.Name = name;
            this.TaskID = taskId;
            this.Description = description;
            this.Estimate = estimate;
            this.Rate = rate;
            this.Due = due;
        }

        public int ProjectID { get; set; }
        public string Name { get; set; }
        public int TaskID { get; set; }
        public string Description { get; set; }
        public int Estimate { get; set; }
        public double Rate { get; set; }
        public double Cost { get; set; }
        public DateTime Due { get; set; }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GroupingSummary Plugin - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .x-grid3-cell-inner
        {
            font-family: "segoe ui" ,tahoma, arial, sans-serif;
        }
        .x-grid-group-hd div
        {
            font-family: "segoe ui" ,tahoma, arial, sans-serif;
        }
        .x-grid3-hd-inner
        {
            font-family: "segoe ui" ,tahoma, arial, sans-serif;
            font-size: 12px;
        }
        .x-grid3-body .x-grid3-td-Cost
        {
            background-color: #f1f2f4;
        }
        .x-grid3-summary-row .x-grid3-td-Cost
        {
            background-color: #e1e2e4;
        }
    </style>

    <script type="text/javascript">
        var prepare = function(grid, toolbar, groupId, records) {
            // you can prepare ready toolbar
        };

        var afterGridEdit = function(e) {

            Ext.net.DirectMethods.AfterEdit(e.record.data.ProjectID, e.field, e.originalValue, e.value, e.record.data);

        };
    </script>

</head>
<body>
    <form id="Form1" runat="server">
    <h1>
        Group Summary Plugin</h1>
    <p>
        Advanced grouping grid that allows cell editing and includes custom dynamic summary
        calculations.</p>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Store ID="Store1" runat="server" GroupField="Name">
        <SortInfo Direction="ASC" Field="Due" />
        <Reader>
            <ext:JsonReader IDProperty="TaskID">
                <Fields>
                    <ext:RecordField Name="ProjectID" />
                    <ext:RecordField Name="Name" />
                    <ext:RecordField Name="TaskID" />
                    <ext:RecordField Name="Description" />
                    <ext:RecordField Name="Estimate" Type="Int" />
                    <ext:RecordField Name="Rate" Type="Float" />
                    <ext:RecordField Name="Due" Type="Date" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel ID="GridPanel1" runat="server" Frame="true" StoreID="Store1" StripeRows="true"
        Title="Sponsored Projects" AutoExpandColumn="Description" Collapsible="true"
        AnimCollapse="false" Icon="ApplicationViewColumns" TrackMouseOver="false" Width="800"
        Height="450" ClicksToEdit="1">
        <Listeners>
            <AfterEdit Fn="afterGridEdit" />
        </Listeners>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:CommandColumn Hidden="true">
                    <GroupCommands>
                        <ext:GridCommand Icon="Add" Text="add" StandOut="true" CommandName="AddGroupRow">
                            <ToolTip Title="Select" Text="Select all rows of the group" />
                        </ext:GridCommand>
                    </GroupCommands>
                    <PrepareGroupToolbar Fn="prepare" />
                </ext:CommandColumn>
                <ext:GroupingSummaryColumn ColumnID="Description" Header="Task" Sortable="true" DataIndex="Description"
                    Hideable="false" SummaryType="Count">
                    <SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />
                    <Editor>
                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                    </Editor>
                </ext:GroupingSummaryColumn>
                <ext:Column ColumnID="Name" Header="Project" DataIndex="Name" Width="20" />
                <ext:GroupingSummaryColumn ColumnID="Due" Width="25" Header="Due Date" Sortable="true"
                    DataIndex="Due" SummaryType="Max">
                    <Renderer Format="Date" FormatArgs="'m/d/Y'" />
                    <Editor>
                        <ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
                    </Editor>
                </ext:GroupingSummaryColumn>
                <ext:GroupingSummaryColumn Width="20" ColumnID="Estimate" Header="Estimate" Sortable="true"
                    DataIndex="Estimate" SummaryType="Sum">
                    <Renderer Handler="return value +' hours';" />
                    <Editor>
                        <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" AllowNegative="false"
                            StyleSpec="text-align:left" />
                    </Editor>
                </ext:GroupingSummaryColumn>
                <ext:GroupingSummaryColumn Width="20" ColumnID="Rate" Header="Rate" Sortable="true"
                    DataIndex="Rate" SummaryType="Average">
                    <Renderer Format="UsMoney" />
                    <Editor>
                        <ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" AllowNegative="false"
                            StyleSpec="text-align:left" />
                    </Editor>
                </ext:GroupingSummaryColumn>
                <ext:GroupingSummaryColumn Width="20" ColumnID="Cost" Header="Cost" Sortable="false"
                    Groupable="false" DataIndex="Cost" CustomSummaryType="totalCost">
                    <Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
                    <SummaryRenderer Format="UsMoney" />
                </ext:GroupingSummaryColumn>
            </Columns>
        </ColumnModel>
        <Listeners>
            <%--<GroupCommand Handler="if(command === 'AddGroupRow')Ext.Msg.alert(command, 'Group id: ' + groupId + '<br/>Count - ' + records.length);" />--%>
            <GroupCommand Handler="if(command === 'AddGroupRow') {this.insertRecord(0,{})};" />
        </Listeners>
          <SelectionModel>
            <ext:RowSelectionModel runat="server" />
          </SelectionModel>
        <View>
            <ext:GroupingView ID="GroupingView1" runat="server" ForceFit="true" MarkDirty="false"
                ShowGroupName="false" EnableNoGroups="true" HideGroupedColumn="true" />
        </View>
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Button ID="Button1" runat="server" Text="Toggle" ToolTip="Toggle the visibility of summary row">
                        <Listeners>
                            <Click Handler="#{GridPanel1}.getGroupingSummary().toggleSummaries();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Plugins>
            <ext:GroupingSummary ID="GroupingSummary1" runat="server">
                <Calculations>
                    <ext:JFunction Name="totalCost" Handler="return v + (record.data.Estimate * record.data.Rate);" />
                </Calculations>
            </ext:GroupingSummary>
        </Plugins>
    </ext:GridPanel>
    </form>
</body>
</html>
    Last edited by neostek; Apr 02, 2012 at 3:32 PM.
  4. #4
    Apr 02, 2012, 3:34 PM
    Please take a look at the sample above.
  5. #5
    Apr 02, 2012, 7:02 PM
    You should add a record with a respective group field value of the current group.

    Example
    <GroupCommand Handler="var groupField = this.getStore().groupField,
                           values;

                       if (command === 'AddGroupRow') {
                           values = {};
                           values[groupField] = records[0].get(groupField);
                           this.insertRecord(0, values);
                       };" />
  6. #6
    Apr 02, 2012, 8:23 PM
    Daniil,

    Thank you very much!
    Works like a charm!
    Please mark it as CLOSED.

    Ernesto.
  7. #7
    Apr 02, 2012, 8:55 PM
    Glad to help.

    We mark threads as closed on the Premium forums only, so, don't worry about it.
  8. #8
    Aug 06, 2012, 5:02 PM
    Hello,

    Im trying to set a value in a field in the grid after the insert, but I cannot get the row number for the added row in the group properly.
    I have tried getcount and record.length with out success.

    Help please!

    var GroupHandler = function(command, groupId, records){
         var grid = <%= GridPanel1.ClientID %>;
            var groupField = grid.getStore().groupField,values; 
            
            if (command === 'AddGroupRow') { 
                values = {}; 
                values[groupField] = records[0].get(groupField); 
                grid.insertRecord(0, values);
                var rownum = records.length;
                grid.store.getAt(rownum).set('QS_RECPT_LN_PGM_ID', 2);
            };
        }
  9. #9
    Aug 07, 2012, 5:19 AM
    Do you need a records count in the group after adding a new record?

    Will it not be this?
    records.length + 1

Similar Threads

  1. [CLOSED] Grouping Summary
    By majestic in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 18, 2011, 6:42 AM
  2. [CLOSED] Dynamic grid with Grouping Summary and Editors
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 06, 2011, 4:59 PM
  3. [CLOSED] V(0.8) How to use Grouping Summary in Bottom bar of Grid Panel
    By P2E in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 10, 2010, 9:57 AM
  4. [CLOSED] Remote grouping or grouping summary for GridPanel
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 08, 2009, 10:23 PM
  5. Summary Row Without Grouping
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Apr 27, 2009, 2:59 PM

Posting Permissions