Jan 21, 2015, 5:00 PM
[CLOSED] Group Command Icons disappear on row update.
Hello,
I'm using an Ext.Net 2.5 GridPanel with GroupCommands similar to your example https://examples2.ext.net/#/GridPane...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.
I'm using an Ext.Net 2.5 GridPanel with GroupCommands similar to your example https://examples2.ext.net/#/GridPane...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.children, true);
break;
case 'DeselectGroup':
column.grid.getSelectionModel().deselect(group.children, true);
break;
}
};
var renderAvailable = function (value, metaData, record, rowIndex, colIndex, store, view) {
var tpl = "<div class='{0}' title='{1}' onclick='{2}'> </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>
Last edited by Daniil; Jan 23, 2015 at 4:10 AM.
Reason: [CLOSED]