[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:
Code:
<%@ 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>
If you want to edit the value of the first row there is no problem, you can click in every place in the cell and the textarea will be open.
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
RE: [CLOSED] Change the value of a grid cell
Hi,
Please do not use tables in the grid's cell because it is completely breaks grid's logic (selectors, events handling)
It is not supported. What the reason to use grid for that functionality? You can render that tables outside the grid and use Editor control
https://examples1.ext.net/#/Editor/Basic/Overview/
RE: [CLOSED] Change the value of a grid cell
Hi vladimir,
it's neccesary to use in the grids cell because this grid displays or multilanguage texts from out database and some of them ,for example the terms of use, are builded with html code that contains tables.
Ok, i found a solution, i can open the textarea by a click on enter.
The other problem i descriped:
In my sample the heigth of the cells are different. Is it possible to resize the textarea to the heigth of the current cell?
RE: [CLOSED] Change the value of a grid cell
Hi,
Yes, add the following inner property to the column
Code:
<EditorOptions AutoSize="Fit" />
