Aug 18, 2013, 3:11 AM
[CLOSED] GridPanel row updates another row
I have a simple grid. Each row has unique data. By unique, I mean the IDProperty has unique values.
I have a simple javascript method that adds ONE row to the grid via addRecordEx. It appears to add properly. The problem is if I check the topmost checkbox on column "t3", it also changes the id value of that row (incorrectly) to match the id of the newly added row.
I created a simple example to showcase the issue.
1. Load the Page.
2. Click the Add Row button at the button. (new row should appear)
3. Click the first checkbox in the "t3" column (where id=1)
expected: the checkbox is checked
actual: the checkbox is checked AND the id column changes to -17
Thanks,
/Z
I have a simple javascript method that adds ONE row to the grid via addRecordEx. It appears to add properly. The problem is if I check the topmost checkbox on column "t3", it also changes the id value of that row (incorrectly) to match the id of the newly added row.
I created a simple example to showcase the issue.
1. Load the Page.
2. Click the Add Row button at the button. (new row should appear)
3. Click the first checkbox in the "t3" column (where id=1)
expected: the checkbox is checked
actual: the checkbox is checked AND the id column changes to -17
Thanks,
/Z
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StaticTest.aspx.cs" Inherits="Crystal.Views.Support.StaticTest" %>
<%@ Import Namespace="Crystal" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.red-text {
color : red;
font-size : large;
}
.blue-text {
color : blue;
font-size : large;
}
</style>
<script type="text/javascript">
var addT = function (obj, days) {
var gridpanel = Ext.getCmp("GridPanelTd");
var store = gridpanel.getStore();
var i = 0;
var total = store.data.length;
for (i = 0; i < days; i++) {
var pNum = (total + i + 1);
var data = store.getAt(i).data;
data.guidIdentifier = generateGUID();
data.id = -(pNum);
var o = gridpanel.addRecordEx(data);
}
};
var generateGUID = (typeof (window.crypto) != 'undefined' &&
typeof (window.crypto.getRandomValues) != 'undefined') ?
function () {
// If we have a cryptographically secure PRNG, use that
// http://stackoverflow.com/questions/6...-in-javascript
var buf = new Uint16Array(8);
window.crypto.getRandomValues(buf);
var S4 = function (num) {
var ret = num.toString(16);
while (ret.length < 4) {
ret = "0" + ret;
}
return ret;
};
return (S4(buf[0]) + S4(buf[1]) + "-" + S4(buf[2]) + "-" + S4(buf[3]) + "-" + S4(buf[4]) + "-" + S4(buf[5]) + S4(buf[6]) + S4(buf[7]));
}
:
function () {
// Otherwise, just use Math.random
// http://stackoverflow.com/questions/1...117523#2117523
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
};
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new List<Company>
{
new Company(1, "3m Co", 71.72, 0.02, 0.03, true),
new Company(2, "Alcoa Inc", 29.01, 0.42, 1.47, true),
new Company(3, "Altria Group Inc", 83.81, 0.28, 0.34, true),
new Company(4, "American Express Company", 52.55, 0.01, 0.02, true),
new Company(5, "American International Group, Inc.", 64.13, 0.31, 0.49, true),
new Company(6, "AT&T Inc.", 31.61, -0.48, -1.54, true),
new Company(7, "Boeing Co.", 75.43, 0.53, 0.71, true),
new Company(8, "Caterpillar Inc.", 67.27, 0.92, 1.39, true),
new Company(9, "Citigroup, Inc.", 49.37, 0.02, 0.04, true),
new Company(10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, true),
new Company(11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, true),
new Company(12, "General Electric Company", 34.14, -0.08, -0.23, true),
new Company(13, "General Motors Corporation", 30.27, 1.09, 3.74, true),
new Company(14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, true),
new Company(15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(16, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, true)
};
this.Store1.DataBind();
}
public class Company
{
public Company(long id, string name, double price, double change, double pctChange, bool checkedVal)
{
this.id = id;
this.Name = name;
this.Price = price;
this.Change = change;
this.PctChange = pctChange;
this.checkedVal = checkedVal;
}
public long id { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public bool checkedVal { get; set; }
}
</script>
</head>
<body>
<form id="AddNodeForm" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader IDProperty="id">
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Price" />
<ext:RecordField Name="Change" />
<ext:RecordField Name="PctChange" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" AutoScroll="True" Layout="FitLayout">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center>
<ext:GridPanel
ColumnLines="true"
ID="GridPanelTd"
runat="server"
ClicksToEdit="1"
StripeRows="true"
TrackMouseOver="true"
StoreID="Store1"
Layout="fit"
Border="true"
AutoHeight="true">
<LoadMask ShowMask="true" />
<ColumnModel ID="ColumnModelTd" runat="server">
<Columns>
<ext:Column ColumnID="No." Editable="false" Width="35" DataIndex = "id" Header="id" />
<ext:Column ColumnID="t1" Header="t1" Width="70" DataIndex="Price" >
</ext:Column>
<ext:Column ColumnID="t2" Header="t2" Width="70" DataIndex="Price">
</ext:Column>
<ext:CheckColumn ColumnID="t3" DataIndex="checkedVal" Header="t3" Editable="true" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelTd" runat="server" SingleSelect="true" />
</SelectionModel>
<BottomBar>
<ext:Toolbar ID="ToolbarTButtons" runat="server">
<Items>
<ext:Button ID="ButtonAddDay" runat="server" Text="Add Day" Icon="Add">
<Listeners>
<Click Handler="addT(this, 1);" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 19, 2013 at 1:04 PM.
Reason: [CLOSED]
