Jun 14, 2010, 1:08 PM
[CLOSED] Change the value of a grid cell
Hello,
i want to change the value of a grid cell which contains html code.
I have created a sample:
In the row 2 is this not so easy, you have to click on a cetrain place to open the textarea.
In the row 3 its inpossible.
A other Problem is.
I would like to have a textarea which has the same height like the row.
thank you for you help
TMS
i want to change the value of a grid cell which contains html code.
I have created a sample:
<%@ Page Language="C#" ValidateRequest="false" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public DateTime LastChange { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
private void BindData()
{
this.GridPanel1.Store.Primary.DataSource = this.GetData();
this.GridPanel1.Store.Primary.DataBind();
}
private List<Company> GetData()
{
return new List<Company>
{
new Company { ID = 1, Name = "<table><tbody><tr> <td width=\"20px\"><br></td> <td> <br> 1 TEST </td></tr></tbody></table></tr></tbody></table>", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now },
new Company { ID = 2, Name = "<table><tbody><tr> <td width=\"20px\"><br></td> <td> <br> 1 TEST <table><tbody><tr> <td width=\"20px\"><br></td> <td> <br> 1.1 TEST </td></tr></tbody></table></tr></tbody></table></td></tr></tbody></table></tr></tbody></table>", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now },
new Company { ID = 3, Name = "<table><tbody><tr> <td width=\"20px\"><br></td> <td> <br> 1 TEST <table><tbody><tr> <td width=\"20px\"><br></td> <td> <br> 1.1 TEST <table><tbody><tr> <td width=\"20px\"><br></td> <td> <br> 1.1.1 TEST<br/>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </td></tr></tbody></table></tr></tbody></table> </td></tr></tbody></table></tr></tbody></table></td></tr></tbody></table></tr></tbody></table>", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now },
};
}
[DirectMethod(Namespace = "CompanyX")]
public void AfterEdit(int id, string field, string oldValue, string newValue, object customer)
{
string message = "Property: {0}<br />Field: {1}<br />Old Value: {2}<br />New Value: {3}";
// Send Message...
X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
this.GridPanel1.Store.Primary.CommitChanges();
}
</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>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var template = '{1}';
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 startEditing = function (e) {
if (e.getKey() === e.ENTER) {
var grid = GridPanel1,
record = grid.getSelectionModel().getSelected(),
index = grid.store.indexOf(record);
grid.startEditing(index, 1);
}
};
var afterEdit = function (e) {
/*
Properties of 'e' include:
e.grid - This grid
e.record - The record being edited
e.field - The field name being edited
e.value - The value being set
e.originalValue - The original value for the field, before the edit.
e.row - The grid row index
e.column - The grid column index
*/
// Call DirectMethod
CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true"
IDMode="Explicit" />
<h1>
Editable GridPanel With Save To [DirectMethod]</h1>
<ext:GridPanel ID="GridPanel1" runat="server" Title="Editable GridPanel" StripeRows="true"
TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="Name">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" Type="Int" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Change" Type="Float" />
<ext:RecordField Name="PctChange" Type="Float" />
<ext:RecordField Name="LastChange" Type="Date" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<Listeners>
<KeyDown Fn="startEditing" />
<AfterEdit Fn="afterEdit" />
</Listeners>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="ID" DataIndex="ID" Width="35" />
<ext:Column ColumnID="Name" Header="NameTextField" DataIndex="Name">
<Editor>
<ext:TextField ID="TextField1" runat="server" Grow="true"/>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>In the row 2 is this not so easy, you have to click on a cetrain place to open the textarea.
In the row 3 its inpossible.
A other Problem is.
I would like to have a textarea which has the same height like the row.
thank you for you help
TMS
