PDA

View Full Version : [CLOSED] GridPanel multi-select plus image command



jchau
May 04, 2013, 4:11 AM
http://examples2.ext.net/Examples/GridPanel/Commands/Image_Command/

In this example, if you delete multiple rows using shift, and then hit delete, it clears the selection and select only one row. Is it possible to keep the multiple selection so we can apply a command to multiple rows??? We have existing functionality that depends on this.

Baidaly
May 04, 2013, 6:48 PM
Hello!

Try the following example:


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

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Group Image Commands - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var prepareCommand = function (grid, command, record, row) {
// you can prepare group command
if (command.command == 'Delete' && record.data.Price < 5) {
command.hidden = true;
command.hideMode = 'visibility'; //you can try 'display' also
}
};

var prepareGroupCommand = function (grid, command, groupId, group) {
// you can prepare group command
};

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" SourceFormatting="True" />

<h1>ImageCommandColumn is a simpler and faster version of CommandColumn</h1>

<ext:GridPanel
runat="server"
Collapsible="true"
Width="600"
Height="350"
Title="Plants"
Frame="true">
<Store>
<ext:Store runat="server" GroupField="Light">
<Proxy>
<ext:AjaxProxy Url="../../Shared/PlantService.asmx/Plants">
<ActionMethods Read="POST" />
<Reader>
<ext:XmlReader Record="Plant" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<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"
Flex="1"
/>
<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:ImageCommandColumn runat="server" Width="170">
<Commands>
<ext:ImageCommand CommandName="Delete" Icon="Delete" Text="Delete">
<ToolTip Text="Delete" />
</ext:ImageCommand>
<ext:ImageCommand CommandName="Edit" Icon="TableEdit" Text="Edit">
<ToolTip Text="Edit" />
</ext:ImageCommand>
<ext:ImageCommand CommandName="Disabled" Icon="PageWhiteEdit" Text="Disabled" Disabled="true">
<ToolTip Text="Edit" />
</ext:ImageCommand>
</Commands>

<GroupCommands>
<ext:GroupImageCommand CommandName="Delete" Icon="Delete" Text="Delete">
<ToolTip Text="Delete" />
</ext:GroupImageCommand>
<ext:GroupImageCommand CommandName="Edit" Icon="TableEdit" Text="Edit">
<ToolTip Text="Edit" />
</ext:GroupImageCommand>
<ext:GroupImageCommand CommandName="Chart" Icon="ChartBar" RightAlign="true">
<ToolTip Text="Chart" />
</ext:GroupImageCommand>
</GroupCommands>

<PrepareCommand Fn="prepareCommand" />
<PrepareGroupCommand Fn="prepareGroupCommand" />

<Listeners>
<Command Handler="item.grid.selModel.ignoreNextDeselect = item.grid.selModel.getCount(); Ext.Msg.alert(command, record.data.Common);" />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>

<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi">
<Listeners>
<BeforeDeselect Handler="
if (item.ignoreNextDeselect == null || item.ignoreNextDeselect <= 0)
return true;
else {
--item.ignoreNextDeselect;
return false;
} "></BeforeDeselect>
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>

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

<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>

Vladimir
May 05, 2013, 8:17 AM
It is a bug, command should not change a selection, fixed in SVN (in 2.2 branch also)

Baidaly
May 05, 2013, 10:41 PM
Dear @jchau,

Can you retest this issue with the last sources?

jchau
May 06, 2013, 1:32 AM
Dear @jchau,

Can you retest this issue with the last sources?

Works perfectly with latest 2.2 branch. Thanks for fixing in both branches!