Hello @Dennis!
You missed the definition of Client.Data, and I am assuming a simple wrap-up like this should work:
public class Data
{
public class Client
{
public int ID { get; set; }
public string Name { get; set; }
public string Number { get; set; }
public string Note { get; set; }
public string NumberNew { get; set; }
public string NameNew { get; set; }
public int TransferStatus_ID { get; set; }
}
}
Then I compiled your sample in a single-file code, which seems to work for me (I will paste the compiled version last in the post). Please consider reviewing it should it help you post test cases in the future (simpler one file than several, right?).
Anyway, I finally can understand your issue -- I believe. The combo box is correct. There's no issue with it at all. If I double-click a cell in the last column, the combo box shows the correct display field. What I believe you are having trouble with, is to have the cell display the corresponding string to the number it originally has.
For that, you'd need to use a renderer to map the displayed value in the cell. You can still use the combo store to do the mapping.
An example of a renderer you could use in your example is what follows:
1: add this javascript function to your javascript bundle
var translateTransferStatus = function (value, meta) {
var store = App.cbStatuses.getStore(),
record_id = store.find('field1', value),
record, translatedValue;
if (record_id >= 0) {
record = store.getAt(record_id);
translatedValue = record.get('field2');
} else {
translatedValue = "Unknown (" + value + ")";
}
return translatedValue;
}
2: To the Status Select column, add a renderer referencing to that function above
<Renderer Fn="translateTransferStatus" />
Then always, just before the cell is "printed" on screen (rendered), it will pull the corresponding value given the ID straight from the combo box's store -- or print Unknown (N) if it couldn't find a corresponding entry in the combo box.
With these changes, and also adding another row with a client having a number not corresponding do a valid entry in the combo box, the "compiled" example based on what you provided would be:
<%@ Page Language="C#" %>
<script runat="server">
public class Data
{
public class Client
{
public int ID { get; set; }
public string Name { get; set; }
public string Number { get; set; }
public string Note { get; set; }
public string NumberNew { get; set; }
public string NameNew { get; set; }
public int TransferStatus_ID { get; set; }
}
}
protected void Page_Load(object sender, EventArgs e)
{
LoadStatuses();
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
private void LoadStatuses()
{
this.cbStatuses.Items.Add(new Ext.Net.ListItem("Pending", 1));
this.cbStatuses.Items.Add(new Ext.Net.ListItem("Accepted", 4));
this.cbStatuses.Items.Add(new Ext.Net.ListItem("Rejected", 7));
}
private void BindData()
{
Store store = this.GridPanel1.GetStore();
store.DataSource = this.GetDataNew();
store.DataBind();
}
private List<Data.Client> GetDataNew()
{
List<Data.Client> clntList = new List<Data.Client>();
clntList.Add(new Data.Client() { ID = 10, Name = "Client1", Number = "01", Note = "Client 1 Note", NumberNew = "01", NameNew = "Client1", TransferStatus_ID = 7 });
clntList.Add(new Data.Client() { ID = 11, Name = "Client2", Number = "02", Note = "Client 2 Note", NumberNew = "02", NameNew = "Client2", TransferStatus_ID = 7 });
clntList.Add(new Data.Client() { ID = 12, Name = "Client5", Number = "04", Note = "Client 5 Note", NumberNew = "08", NameNew = "Client7", TransferStatus_ID = 17 });
return clntList;
}
[DirectMethod(Namespace = "ClientX")]
public void EditNew(int id, string field, string oldValue, string newValue, object customer)
{
string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
// Send Message...
X.Msg.Notify(new NotificationConfig()
{
Title = "Edit Record #" + id.ToString(),
Html = string.Format(message, id, field, oldValue, newValue),
Width = 250,
Height = 150
}).Show();
this.GridPanel1.GetStore().GetById(id).Commit();
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var template = 'color:{0};';
var change = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value;
};
var pctChange = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value + "%";
};
var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:
grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/
// Call DirectMethod
//alert(e.value);
if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
ClientX.EditNew(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
}
};
var translateTransferStatus = function (value, meta) {
var store = App.cbStatuses.getStore(),
record_id = store.find('field1', value),
record, translatedValue;
if (record_id >= 0) {
record = store.getAt(record_id);
translatedValue = record.get('field2');
} else {
translatedValue = "Unknown (" + value + ")";
}
return translatedValue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/ExtNet/PageFunctions.js" />
</Scripts>
</asp:ScriptManager>
<h1>Editable GridPanel With Save To [DirectMethod]</h1>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Editable GridPanel"
Width="700"
Height="350">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Number" />
<ext:ModelField Name="Note" />
<ext:ModelField Name="NumberNew" />
<ext:ModelField Name="NameNew" />
<ext:ModelField Name="Note" />
<ext:ModelField Name="TransferStatus_ID" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="ID" Width="35" />
<ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
</ext:Column>
<ext:Column runat="server" Text="Number" DataIndex="Number" Flex="1">
</ext:Column>
<ext:Column runat="server" Text="Name New" DataIndex="NameNew" Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Number New" DataIndex="NumberNew" Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Note" DataIndex="Note" Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" DataIndex="TransferStatus_ID" Text="Status Select" Width="200">
<Editor>
<ext:ComboBox ID="cbStatuses" runat="server" />
</Editor>
<Renderer Fn="translateTransferStatus" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server">
<Listeners>
<Edit Fn="edit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Hope this helps!