PDA

View Full Version : [CLOSED] Grouping Summary



gets_gui
Jan 10, 2013, 7:52 PM
Hi,

When the group is collapsed, is there anyway we can select the whole group and act on it?
(Otherwise, we have to expand the group and select all the rows ...).
If it is possible, can you give an example code?

Thanks!

Baidaly
Jan 10, 2013, 11:47 PM
Hello!

Please, try to use GroupCommands: http://examples2.ext.net/#/GridPanel/Commands/Group_Command/

gets_gui
Jan 11, 2013, 8:37 PM
Baidaly,

Thanks for the info.
It seems like GroupCommand only works for the Grouping feature not GroupingSummary.

Any suggestion?

Baidaly
Jan 11, 2013, 10:07 PM
Baidaly,

Thanks for the info.
It seems like GroupCommand only works for the Grouping feature not GroupingSummary.

Any suggestion?

That's strange, we are investigating. Maybe for now you can use GroupClick event?



<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
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, new DateTime(2007, 06, 24)),
new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, new DateTime(2007, 06, 25)),
new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, new DateTime(2007, 06, 27)),
new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, new DateTime(2007, 06, 29)),
new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, new DateTime(2007, 07, 01)),
new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, new DateTime(2007, 07, 03)),
};

this.Store1.DataBind();
}

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>
<head runat="server">
<title>Ext.NET Examples</title>

<style>
.x-grid-body .x-grid-cell-Cost {
background-color : #f1f2f4;
}

.x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
background-color : #e1e2e4;
}

.task .x-grid-cell-inner {
padding-left: 15px;
}

.x-grid-row-summary .x-grid-cell-inner {
font-weight: bold;
font-size: 11px;
background-color : #f1f2f4;
}
</style>

<script>
var totalCost = function(records) {
var i = 0,
length = records.length,
total = 0,
record;

for (; i < length; ++i) {
record = records[i];
total += record.get('Estimate') * record.get('Rate');
}
return total;
};
</script>

</head>
<body>
<form 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" SourceFormatting="True" ScriptMode="Debug" />

<ext:Store ID="Store1" runat="server" GroupField="Name">
<Sorters>
<ext:DataSorter Property="Due" Direction="ASC" />
</Sorters>
<Model>
<ext:Model runat="server" IDProperty="TaskID">
<Fields>
<ext:ModelField Name="ProjectID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="TaskID" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="Estimate" Type="Int" />
<ext:ModelField Name="Rate" Type="Float" />
<ext:ModelField Name="Cost" Type="Float" />
<ext:ModelField Name="Due" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Frame="true"
StoreID="Store1"
Title="Sponsored Projects"
Collapsible="true"
AnimCollapse="false"
Icon="ApplicationViewColumns"
Width="800"
Height="450">
<ColumnModel runat="server">
<Columns>
<ext:SummaryColumn
runat="server"
TdCls="task"
Text="Task"
Sortable="true"
DataIndex="Description"
Hideable="false"
SummaryType="Count"
Flex="1">
<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />
</ext:SummaryColumn>

<ext:Column runat="server" Text="Project" DataIndex="Name" Width="20" />

<ext:SummaryColumn
runat="server"
Width="85"
Text="Due Date"
Sortable="true"
DataIndex="Due"
SummaryType="Max">
<Renderer Format="Date" FormatArgs="'m/d/Y'" />
<SummaryRenderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
<Editor>
<ext:DateField runat="server" Format="MM/dd/yyyy" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn
runat="server"
Width="75"
Text="Estimate"
Sortable="true"
DataIndex="Estimate"
SummaryType="Sum">
<Renderer Handler="return value +' hours';" />
<SummaryRenderer Handler="return value +' hours';" />
<Editor>
<ext:NumberField runat="server" AllowBlank="false" MinValue="0" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn
runat="server"
Width="75"
Text="Rate"
Sortable="true"
DataIndex="Rate"
SummaryType="Average">
<Renderer Format="UsMoney" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
<Editor>
<ext:NumberField runat="server" AllowBlank="false" MinValue="0" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn
runat="server"
Width="75"
ID="Cost"
Text="Cost"
Sortable="false"
Groupable="false"
DataIndex="Cost"
CustomSummaryType="totalCost">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
</ext:SummaryColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" StripeRows="true" MarkDirty="false">
<Listeners>
<GroupClick Handler="#{GridPanel1}.selModel.select(#{GridPanel1}.store. data.filterBy(function(i) { if (i.data.Name == group) return i; }).items);"></GroupClick>
</Listeners>
</ext:GridView>
</View>
<Features>
<ext:GroupingSummary ID="GroupingSummary1" runat="server" GroupHeaderTplString="{name}" HideGroupedHeader="true" EnableGroupingMenu="true">
</ext:GroupingSummary>
</Features>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server"></ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Jan 14, 2013, 11:45 AM
There is a bug. I think we will fix it shortly.

gets_gui
Jan 14, 2013, 2:33 PM
Great, the GroupClick event works for now before the bug gets fixed.
Can you send us a sample code to select all the rows in the clicked group?
We cannot figure how to do it based on those four parameters(item, node, group, e).
The group is just a string for the group name not the group object?

Thanks,

Vladimir
Jan 14, 2013, 5:23 PM
The fix is available in SVN



Can you send us a sample code to select all the rows in the clicked group?

Try this


<GroupClick Handler="#{GridPanel1}.selModel.select(#{GridPanel1}.store. getGroups(group).children);" />

gets_gui
Jan 14, 2013, 5:45 PM
The fix is available in SVN

Try this


<GroupClick Handler="#{GridPanel1}.selModel.select(#{GridPanel1}.store. getGroups(group).children);" />


Cool, we will check it out.
The problem for us to use the above code is that the group (name) can be the same for multiple groups in a special case.

We will try the new build from SVN.

Thanks,

gets_gui
Jan 14, 2013, 6:56 PM
Vladimir,

Where should we get the bug fixes, 2.1 branch or trunk?

Thanks,

Baidaly
Jan 14, 2013, 11:05 PM
Vladimir,

Where should we get the bug fixes, 2.1 branch or trunk?

Thanks,

All fixes go to trunk

Daniil
Jan 15, 2013, 4:39 AM
The problem for us to use the above code is that the group (name) can be the same for multiple groups in a special case.


I doubt there is a possibility to have two different groups with the same names. Could you provide a sample?

Daniil
Jan 16, 2013, 3:39 PM
If you can't update from the trunk, please add this script into the head of the page.

Fix

<script>
var fixedGetGroupingFeature = function (grid) {
return Ext.ComponentQuery.query("[alias='feature.grouping'], [alias='feature.groupingsummary']", grid.features || [])[0] || null;
};

Ext.grid.column.CommandColumn.override({
getGroupingFeature: fixedGetGroupingFeature
});

Ext.grid.column.ImageCommand.override({
getGroupingFeature: fixedGetGroupingFeature
});
</script>

gets_gui
Jan 16, 2013, 5:07 PM
Great, it works!
Thanks a lot.