Apr 11, 2014, 12:08 PM
[FIXED] [#467] [2.6] Problem with GroupCommand and single row
I use a gridpanel with groupcommand and I encountered the following problem with the group command buttons when there is a single grouped row:
Browser: Google Chrome, but I reproduced it on IE also.
If there are at least 2 grouped rows, the buttons appear ok.
I built a test page using the example from https://examples2.ext.net/#/GridPane...Group_Command/ but with a single grouped row:
- First look - expanded by default - looks ok
- On Collapse - the command buttons are shifted below the group text
- On Expand after doing collapse - the command buttons appear in line with the group text and also below it
Browser: Google Chrome, but I reproduced it on IE also.
If there are at least 2 grouped rows, the buttons appear ok.
I built a test page using the example from https://examples2.ext.net/#/GridPane...Group_Command/ but with a single grouped row:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
public class Plant
{
public Plant(bool indoor, DateTime availability, decimal price, string light, string zone, string botanical, string common)
{
this.Indoor = indoor;
this.Availability = availability;
this.Price = price;
this.Light = light;
this.Zone = zone;
this.Botanical = botanical;
this.Common = common;
}
public Plant()
{
}
public string Common { get; set; }
public string Botanical { get; set; }
public string Zone { get; set; }
public string ColorCode { get; set; }
public string Light { get; set; }
public decimal Price { get; set; }
public DateTime Availability { get; set; }
public bool Indoor { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = getThePlants();
this.Store1.DataBind();
}
public List<Plant> getThePlants()
{
List<Plant> plants = new List<Plant>
{
new Plant(true, DateTime.Now,10, "Sunny","tropical","anemone","anemona"),
new Plant(true,new DateTime(2007, 06, 25),20, "Sunny","tropical","bloodroot","bloodroot"),
//new Plant(true,new DateTime(2007, 06, 25),20, "Shady","tropical","columbine","columbine")
};
return plants;
}
</script>
<script>
var prepareGroupToolbar = function (grid, toolbar, groupId, records) {
// you can prepare ready toolbar
};
var onGroupCommand = function (column, command, group) {
if (command === 'SelectGroup') {
column.grid.getSelectionModel().select(group.children, true);
return;
}
Ext.Msg.alert(command, 'Group name: ' + group.name + '<br/>Count - ' + group.children.length);
};
var getAdditionalData = function (data, idx, record, orig) {
return {
rowBodyColspan: record.fields.getCount(),
rowBody: Ext.String.format('<div style=\'padding:0 5px 5px 5px;\'>The {0} [{1}] requires light conditions of <i>{2}</i>.<br /><b>Price: {3}</b></div>', data.Common, data.Botanical, data.Light, Ext.util.Format.usMoney(data.Price))
};
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
runat="server"
Collapsible="true"
Width="600"
Height="350"
RowLines="false"
Title="Plants"
Frame="true"
ForceFit="true"
ID="PlantGrid">
<Store>
<ext:Store runat="server" GroupField="Light" ID="Store1">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Common" />
<ext:ModelField Name="Botanical" />
<ext:ModelField Name="Zone" Type="Int" />
<ext:ModelField Name="ColorCode" />
<ext:ModelField Name="Light" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Availability" Type="Date" />
<ext:ModelField Name="Indoor" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Common" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Common Name"
DataIndex="Common"
Width="220" />
<ext:Column
runat="server"
Text="Light"
DataIndex="Light"
Width="130" />
<ext:Column
runat="server"
Text="Price"
DataIndex="Price"
Width="70"
Align="right"
Groupable="false">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:DateColumn
runat="server"
Text="Available"
DataIndex="Availability"
Width="95"
Groupable="false"
Format="yyyy-MM-dd" />
<ext:Column
runat="server"
Text="Indoor?"
DataIndex="Indoor"
Width="55" />
<ext:CommandColumn runat="server" Hidden="true">
<GroupCommands>
<ext:GridCommand Icon="TableRow" CommandName="SelectGroup">
<ToolTip Title="Select" Text="Select all rows of the group" />
</ext:GridCommand>
<ext:CommandFill />
<ext:GridCommand Text="Menu" StandOut="true">
<Menu>
<Items>
<ext:MenuCommand CommandName="ItemCommand" Text="Item" />
<ext:MenuCommand CommandName="ItemCommand" Text="Item" />
</Items>
</Menu>
</ext:GridCommand>
</GroupCommands>
<PrepareGroupToolbar Fn="prepareGroupToolbar" />
<Listeners>
<GroupCommand Fn="onGroupCommand" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" TrackOver="false" StripeRows="false" />
</View>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" RowSpan="2" />
</SelectionModel>
<Features>
<ext:Grouping
runat="server"
HideGroupedHeader="true"
GroupHeaderTplString='{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? "Items" : "Item"]})' />
<ext:RowBody runat="server">
<GetAdditionalData Fn="getAdditionalData" />
</ext:RowBody>
<ext:RowWrap runat="server" />
</Features>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Dimitris; Feb 10, 2015 at 12:14 PM.
Reason: [FIXED]
Originally Posted by Daniil
