PDA

View Full Version : [CLOSED] Group Command Icons disappear on row update.



mjessup
Jan 21, 2015, 5:00 PM
Hello,

I'm using an Ext.Net 2.5 GridPanel with GroupCommands similar to your example http://examples2.ext.net/#/GridPanel/Commands/Group_Command/

The problem I'm having is that when I update a row client side the GroupCommands for that particular group disappear. I've included a simplified code snippet so you can verify. I appreciate any help you can offer.

Thank you.



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


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


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { 1, 2011, "Ford", "Mustang", "Red", false },
new object[] { 2, 1974, "Dodge", "Dart", "Red", false },
new object[] { 3, 1981, "GMC", "Jimmy", "White", false },
new object[] { 4, 1985, "Oldsmobile", "Cutlass", "Cream", false },
new object[] { 5, 1991, "Dodge", "1500", "White", false },
new object[] { 6, 1994, "Dodge", "1500", "Emerald", false },
new object[] { 7, 1995, "Dodge", "Dakota", "Pearl Blue", false },
new object[] { 8, 1979, "Ford", "Thunderbird", "Blue", false },
new object[] { 9, 2004, "Dodge", "Spirit", "Emerald", false },
new object[] { 10, 2001, "GMC", "Sierra 1500", "Pewter", false },
new object[] { 11, 1991, "Jeep", "Wrangler", "Red", false },
new object[] { 12, 1998, "Jeep", "Cherokee", "Silver", false }
};
GridPanel1.Store.Primary.DataBind();
}
}
</script>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Group Commands Sample</title>

<style>
.itemAvailable { background-image: url(/icons/award_star_silver_3-png/ext.axd); width: 16px; height: 16px; margin-left:auto; margin-right:auto; cursor:pointer; }
.itemNotAvailable { background-image: url(/icons/control_blank-png/ext.axd); width:16px; height:16px; margin-left:auto; margin-right:auto; cursor:pointer; }
</style>


<script>
var onGroupCommand = function (column, command, group) {
switch (command)
{
case 'SelectGroup':
column.grid.getSelectionModel().select(group.child ren, true);
break;
case 'DeselectGroup':
column.grid.getSelectionModel().deselect(group.chi ldren, true);
break;
}
};


var renderAvailable = function (value, metaData, record, rowIndex, colIndex, store, view) {
var tpl = "<div class='{0}' title='{1}' onclick='{2}'>&nbsp;</div>";

var cls = (value == true) ? "itemAvailable" : "itemNotAvailable";
var ttl = (value == true) ? "IS Available (click to toggle)" : "NOT Available (click to toggle)";
var fnc = "setAvailable(" + record.get('VehicleId') + ", " + ((value == true) ? false : true) + ");";


var val = Ext.String.format(tpl, cls, ttl, fnc);
return val;
};


var setAvailable = function (vehicleId, isAvailable) {
var store = App.GridPanel1.getStore();
var idx = store.findExact('VehicleId', vehicleId);
if (idx >= 0) {
var rec = store.getAt(idx);
rec.set('Available', isAvailable);
rec.commit();
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Collapsible="true"
Width="600"
Height="350"
RowLines="false"
Title="Vehicles"
Frame="true"
ForceFit="true">
<Store>
<ext:Store runat="server" GroupField="Make">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="VehicleId" Type="Int" />
<ext:ModelField Name="Year" Type="Int" />
<ext:ModelField Name="Make" />
<ext:ModelField Name="Model" />
<ext:ModelField Name="Color" />
<ext:ModelField Name="Available" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Year"
DataIndex="Year"
Width="80"
/>
<ext:Column
runat="server"
Text="Make"
DataIndex="Make"
Width="100"
/>
<ext:Column
runat="server"
Text="Model"
DataIndex="Model"
Width="100"
/>
<ext:Column
runat="server"
Text="Color"
DataIndex="Color"
Width="100"
/>
<ext:Column
runat="server"
Text="Available"
DataIndex="Available"
Width="60"
Align="Center">
<Renderer Fn="renderAvailable" />
</ext:Column>
<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:GridCommand Icon="TableRowDelete" CommandName="DeselectGroup">
<ToolTip Title="Deselect" Text="Deselect all rows of the group" />
</ext:GridCommand>
</GroupCommands>
<Listeners>
<GroupCommand Fn="onGroupCommand" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>


<View>
<ext:GridView runat="server" TrackOver="false" StripeRows="false" />
</View>

<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi" />
</SelectionModel>


<Features>
<ext:Grouping
runat="server"
HideGroupedHeader="true"
GroupHeaderTplString='{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? "Vehicles" : "Vehicle"]})' />
</Features>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Jan 22, 2015, 1:47 PM
Hi @mjessup,

I were able to reproduce the problem with v2.5.3, but it is not reproducible with the latest v2 sources from SVN:
http://svn.ext.net/premium/branches/2

I remember this bug has been fixed.

Please check out the sources, build the solution and refer a built Ext.Net.dll to your project.

mjessup
Jan 22, 2015, 10:06 PM
Thanks for your help Daniil. That worked like a champ. You can close this thread.