Hi,
I am not sure what that sample should demonstrate to me. If I add comboboxes as editors to that example then what I should to see? What difference between that example and example from the examples explorer (Editor Field Mapping) (if consider the column editors)?
add a Listener for each of them.
What listeners should I add for them?
As I understood you need to set correct data after editing from the combo editor (but you still did not provide test sample). The following sample demonstrate it
https://examples1.ext.net/#/GridPane...Field_Mapping/
Does the above sample work for you? If yes then please demonstrate how do you try to implement it in your application. We need test sample which can be tested locally without any changes
I rewrote Editor Field Mapping example using code behind
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.BuildGrid();
}
private void BuildGrid()
{
var storeCombo = new Store
{
ID = "StoreCombo",
Reader =
{
new JsonReader
{
ReaderID = "ID",
Fields =
{
new RecordField("ID", RecordFieldType.Int),
new RecordField("Name")
}
}
}
};
this.Form.Controls.Add(storeCombo);
storeCombo.DataSource = Department.GetAll();
storeCombo.DataBind();
var store1 = new Store
{
ID = "Store1",
Reader =
{
new JsonReader
{
ReaderID = "ID",
Fields =
{
new RecordField("ID", RecordFieldType.Int),
new RecordField("Name"),
new RecordField("Surname"),
new RecordField("DepartmentId"),
}
}
}
};
this.Form.Controls.Add(store1);
store1.DataSource = Employee.GetAll();
store1.DataBind();
var grid = new GridPanel
{
ID = "GridPanel1",
EnableViewState = true,
AutoHeight = true,
StoreID = "Store1",
Title = "List",
Icon = Icon.Application,
ColumnModel =
{
Columns =
{
new Column
{
Header = "ID",
Sortable=true,
DataIndex="ID"
},
new Column
{
Header = "NAME",
Sortable=true,
DataIndex="Name"
},
new Column
{
Header = "SURNAME",
Sortable=true,
DataIndex="Surname"
},
new Column
{
Header = "Department",
Width=Unit.Pixel(240),
DataIndex="DepartmentId",
Renderer =
{
Fn = "departmentRenderer"
},
Editor =
{
new ComboBox
{
ID = "cbDepartment",
Shadow = ShadowMode.Drop,
Mode = DataLoadMode.Local,
TriggerAction = TriggerAction.All,
ForceSelection = true,
StoreID="StoreCombo",
DisplayField="Name",
ValueField="ID"
}
}
}
}
}
};
this.Form.Controls.Add(grid);
}
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public Department Department { get; set; }
public int DepartmentId
{
get { return this.Department != null ? this.Department.ID : -1; }
}
public static List<Employee> GetAll()
{
return new List<Employee>
{
new Employee
{
ID = 1,
Name = "Nancy",
Surname = "Davolio",
Department = Department.GetAll()[0]
},
new Employee
{
ID = 2,
Name = "Andrew",
Surname = "Fuller",
Department = Department.GetAll()[2]
}
};
}
}
public class Department
{
public int ID { get; set; }
public string Name { get; set; }
public static List<Department> GetAll()
{
return new List<Department>
{
new Department {ID = 1, Name = "Department A"},
new Department {ID = 2, Name = "Department B"},
new Department {ID = 3, Name = "Department C"}
};
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Coolite Toolkit Example - Field Mapping</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var departmentRenderer = function(value) {
var r = StoreCombo.getById(value);
if (Ext.isEmpty(r)) {
return "";
}
return r.data.Name;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
</form>
</body>
</html>