PDA

View Full Version : [CLOSED] [#489] Issue with ImageCommandColumn on GridPanel



iansriley
May 12, 2014, 4:48 PM
Hi,

In Ext V2.5 GridPanel has grouping and 2 ImageCommandColumns for Delete and Edit. When gridpanel expanded all groups, getting correct record data when we click on Edit/Delete. When collapse first group of data and trying to edit/delete record from next group of data getting first group data of same index.

Please provide solution for this issue. You can replicate same error in Ext Examples. Please find the attached images for reference.
Link: http://examples2.ext.net/#/GridPanel/Commands/Image_Command/



<%@ 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" />

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


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

<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi" />
</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>

iansriley
May 13, 2014, 8:29 AM
Please give solution ASAP.

Thank you.

Daniil
May 13, 2014, 10:16 AM
Hi @iansriley,

Thank you for the report. It is a known issue.
https://github.com/extnet/Ext.NET/issues/447

Unfortunately, we don't have a solution. At this point the only thing we can suggest not to use a Grouping and a RowBody together.

iansriley
May 13, 2014, 3:36 PM
Thanks for response.

Without RowBody also getting same issue. I have removed RowBody control and collapsed first group header, when click on Delete getting different record.

Please suggest with alternate solution or controls to show Edit, Delete icon with commands.

Thank you.

Daniil
May 13, 2014, 3:50 PM
You are right. It is reproducible without a RowBody. Here is a test case.

Steps:

1. Collapse the first group.
2. Click the ImageCommand in the second group.
3. It shows wrong data.

Example

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "group1", "1", "1" },
new object[] { "group1", "11", "11" },
new object[] { "group1", "111", "111" },
new object[] { "group2", "2", "2" },
new object[] { "group2", "22", "22" },
new object[] { "group2", "222", "222" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" GroupField="groupId">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="groupId" />
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="GroupId" DataIndex="groupId" />
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />

<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>
</Commands>
<Listeners>
<Command Handler="Ext.Msg.alert(command, record.data.test1);" />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<Features>
<ext:Grouping runat="server" />
</Features>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
May 13, 2014, 4:24 PM
Created an Issue.
https://github.com/extnet/Ext.NET/issues/489

It has been fixed in the SVN trunk, the revision #5837.

Thank you again for the report.

iansriley
May 13, 2014, 4:43 PM
what is the solution, how to incorporate in my project?

Do i need to take the latest dll or update any code?

Thank you.

Daniil
May 14, 2014, 4:42 AM
what is the solution


There are some changes in JavaScript code of ImageCommandColumn.


how to incorporate in my project?

Since the changes in JavaScript only you can add the override to the page's <head>.

Ext.grid.column.ImageCommand({
// overridden methods
});



Do i need to take the latest dll


Yes, you can also grab the latest sources for SVN and build it, getting the updated dll.

web_manufacturing
Oct 20, 2014, 11:02 AM
Hi,
I'm sorry but i haven't the SVN access...
It's possible have the FIX
Thx so much
Guglielmo

Daniil
Oct 20, 2014, 11:37 AM
Hi @web_manufacturing,

It is one of the differences between regular and premium members. Premium members have access to the latest sources and, respectively, to all the fixes, but regular members have to wait the next public release.

You are always welcome to buy a Premium Support Subscription;)