Jun 28, 2012, 2:37 PM
[CLOSED] RowSelectionModel RowSelect Handler problem
Hi,
This question is related to http://forums.ext.net/showthread.php...andler-problem.
I'm still getting erratic behavior with grid row selections. My requirements are as follows:
I've put together a little sample to illustrate the workflow and the current troubles. One can add up to 5 new rows and perform unlimited updates in this example. The store data is kept in the session variable.
For starters, when a new row is added the first time, it's not selected, although the client side code does execute. Secondly, the RowSelect direct event still occurs too many times and I couldn't resolve the pattern so far as it may be different the next time. It would be great to get a working paradigm that I'd be able to apply to all GridPanels in our application.
Please advise.
This question is related to http://forums.ext.net/showthread.php...andler-problem.
I'm still getting erratic behavior with grid row selections. My requirements are as follows:
- On client sorting and paging, select the first row on the page
- After row update, the same row has to stay selected
- After a new row is inserted, it has to become selected and loaded into view
- The sort order has to be passed to the server and the store should be reloaded in the current sorting order
I've put together a little sample to illustrate the workflow and the current troubles. One can add up to 5 new rows and perform unlimited updates in this example. The store data is kept in the session variable.
For starters, when a new row is added the first time, it's not selected, although the client side code does execute. Secondly, the RowSelect direct event still occurs too many times and I couldn't resolve the pattern so far as it may be different the next time. It would be great to get a working paradigm that I'd be able to apply to all GridPanels in our application.
Please advise.
<%@ 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)
{
HttpContext.Current.Session.Clear();
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private List<object[]> Data
{
get
{
List<object[]> data = HttpContext.Current.Session["Data"] as List<object[]>;
if (data == null)
{
data = new List<object[]>
{
new object[] { 1, "3m Co", 71.72, 0.02, 0.03, "1/1 12:00:00am" },
new object[] { 2,"Alcoa Inc", 29.01, 0.42, 1.47, "1/1 12:00:00am" },
new object[] { 3,"Altria Group Inc", 83.81, 0.28, 0.34, "1/1 12:00:00am" },
new object[] { 4,"American Express Company", 52.55, 0.01, 0.02, "1/1 12:00:00am" },
new object[] { 5,"American International Group, Inc.", 64.13, 0.31, 0.49, "1/1 12:00:00am" },
new object[] { 6,"AT&T Inc.", 31.61, -0.48, -1.54, "1/1 12:00:00am" },
new object[] { 7,"Boeing Co.", 75.43, 0.53, 0.71, "1/1 12:00:00am" },
new object[] { 8,"Caterpillar Inc.", 67.27, 0.92, 1.39, "1/1 12:00:00am" },
new object[] { 9,"Citigroup, Inc.", 49.37, 0.02, 0.04, "1/1 12:00:00am" },
new object[] { 10,"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "1/1 12:00:00am" }
};
HttpContext.Current.Session["Data"] = data;
}
return data;
}
}
protected void GridPanel1_RowSelect(object sender, DirectEventArgs e)
{
string company = e.ExtraParams["company"].ToString();
decimal price = Convert.ToDecimal(e.ExtraParams["price"]);
}
protected void ButtonUpdate_Click(object sender, DirectEventArgs e)
{
string json = this.HiddenSelectedRow.Text;
Dictionary<string, string>[] values = JSON.Deserialize<Dictionary<string, string>[]>(json);
int rowid = -1;
foreach (Dictionary<string, string> row in values)
{
foreach (KeyValuePair<string, string> keyValuePair in row)
{
if (keyValuePair.Key.Equals("rowid"))
{
rowid = Convert.ToInt32(keyValuePair.Value);
break;
}
}
}
List<object[]> data = HttpContext.Current.Session["Data"] as List<object[]>;
foreach (object[] item in data)
{
if (Convert.ToInt32(item[0]) == rowid)
{
double price = Convert.ToDouble(item[2]);
double change = Convert.ToDouble(item[3]);
double pctChange = Convert.ToDouble(item[4]);
int sign = new Random().Next(2) == 0 ? -1 : 1;
double currentChange = sign * new Random().NextDouble();
item[2] = (price * (1 + currentChange/10)).ToString("#.00");
item[3] = (price * (1 + currentChange/10) - price).ToString("#.00");
item[4] = (currentChange*10).ToString("#.00"); ;
item[5] = DateTime.Now.ToString("M/d hh:mm:sstt");
break;
}
}
HttpContext.Current.Session["Data"] = data;
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
protected void ButtonAdd_Click(object sender, DirectEventArgs e)
{
List<object[]> data = HttpContext.Current.Session["Data"] as List<object[]>;
switch (data.Count)
{
case 10:
data.Add(new object[] { 11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, DateTime.Now.ToString("M/d hh:mm:sstt") });
this.HiddenNewRecordKey.Text = "11";
break;
case 11:
data.Add(new object[] { 12, "General Electric Company", 34.14, -0.08, -0.23, DateTime.Now.ToString("M/d hh:mm:sstt") });
this.HiddenNewRecordKey.Text = "12";
break;
case 12:
data.Add(new object[] { 13, "General Motors Corporation", 30.27, 1.09, 3.74, DateTime.Now.ToString("M/d hh:mm:sstt") });
this.HiddenNewRecordKey.Text = "13";
break;
case 13:
data.Add(new object[] { 14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, DateTime.Now.ToString("M/d hh:mm:sstt") });
this.HiddenNewRecordKey.Text = "14";
break;
case 14:
data.Add(new object[] { 15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, DateTime.Now.ToString("M/d hh:mm:sstt") });
this.HiddenNewRecordKey.Text = "15";
break;
case 15:
data.Add(new object[] { 16, "Intel Corporation", 19.88, 0.31, 1.58, DateTime.Now.ToString("M/d hh:mm:sstt") });
this.HiddenNewRecordKey.Text = "16";
break;
default:
this.ButtonAdd.Disabled = true;
break;
};
HttpContext.Current.Session["Data"] = data;
PagingToolbar1.PageSize = 10;
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
protected void Store1_DataBound(object sender, EventArgs e)
{
Store store = sender as Store;
List<object[]> data = store.DataSource as List<object[]>;
if (data == null)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
</script>
<!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>Simple Array Grid - Ext.NET Examples</title>
<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return String.format(template, (value > 0) ? "green" : "red", value + "%");
};
var selectNewRecord = function (recordKey) {
var grid = GridPanel1,
record = grid.store.getById(recordKey);
grid.store.openPage(record, function () {
grid.getSelectionModel().selectRow(grid.store.indexOf(record));
});
};
</script>
</head>
<body>
<%--http://forums.ext.net/showthread.php?19692-RowSelectionModel-RowSelect-Handler-problem--%>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Hidden runat="server" ID="HiddenSelectedRow" />
<ext:Hidden runat="server" ID="HiddenNewRecordKey" />
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
SelectionMemory="Enabled" ActiveIndex="0" TrackMouseOver="true" FireSelectOnLoad="true"
Width="600" Height="350" AutoExpandColumn="company">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="false" OnDataBinding="Store1_DataBound">
<Reader>
<ext:ArrayReader IDIndex="0">
<Fields>
<ext:RecordField Name="rowid" />
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mm:sstt" />
</Fields>
</ext:ArrayReader>
</Reader>
<Listeners>
<Load Handler="if (records.length > 0) {
var sm = GridPanel1.getSelectionModel();
if (!sm.hasSelection()) {
sm.selectRow(0);
}
//else{
// var rowid=GridPanel1.getRowsValues({selectedOnly: true})[0].rowid;
// sm.selectRow(Store1.find('rowid', rowid));
//}
}" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="RowId" Header="" DataIndex="rowid" Hidden="true" />
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ColumnID="Change" Header="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn Header="Last Updated" DataIndex="lastChange" Format="MMM dd, yyyy hh:mm:sstt" Width="140" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
<Listeners>
<SelectionChange Handler="#{HiddenSelectedRow}.setValue(Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly: true})));" />
</Listeners>
<DirectEvents>
<RowSelect OnEvent="GridPanel1_RowSelect">
<ExtraParams>
<ext:Parameter Name="company" Value="record.data['company']" Mode="Raw">
</ext:Parameter>
<ext:Parameter Name="price" Value="record.data['price']" Mode="Raw">
</ext:Parameter>
</ExtraParams>
<EventMask ShowMask="true" />
</RowSelect>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="Store1" PageSize="10" ID="PagingToolbar1">
<Items>
<ext:Button runat="server" ID="ButtonAdd" Text="Add" Icon="Add" Width="80">
<DirectEvents>
<Click OnEvent="ButtonAdd_Click" Success="GridPanel1.getStore().reload();selectNewRecord(HiddenNewRecordKey.getValue());">
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="ButtonUpdate" runat="server" Text="Update" Icon="Disk" ToolTip="Update"
Width="80">
<DirectEvents>
<Click OnEvent="ButtonUpdate_Click" Success="GridPanel1.getStore().reload();">
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
<Listeners>
<ViewReady Handler="this.getStore().load();" />
<SortChange Handler="if(this.getStore().getCount()>0){
var sm=GridPanel1.getSelectionModel().selectRow(0);
}" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Jul 04, 2012 at 11:18 AM.
Reason: [CLOSED]