Aug 12, 2014, 4:48 AM
[CLOSED] Dynamic Editor with Form Controls in GridPanel
Hi
The following sample is used to show the Gridpanel with different editor field in a column. It is working fine in V1.x.
I mentioned what are controls will be used in row in Grid Panel.
For example ,
In Grid Panel,
if Control type is 6 then allow input with number field,
if Control type is 5 then allow input with number field with decimal
if Control type is 4 then allow input with combo box
Please suggest me how to use this process in v2.x ?
The following sample is used to show the Gridpanel with different editor field in a column. It is working fine in V1.x.
I mentioned what are controls will be used in row in Grid Panel.
For example ,
In Grid Panel,
if Control type is 6 then allow input with number field,
if Control type is 5 then allow input with number field with decimal
if Control type is 4 then allow input with combo box
Please suggest me how to use this process in v2.x ?
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
private class SupplierProfileDetail
{
public string ReferenceNo { get; set; }
public string Description { get; set; }
public string ReferenceValue { get; set; }
public int ControlType { get; set; }
public int PositionNo { get; set; }
public int SubContractor { get; set; }
public int? EnumParameter { get; set; }
public string RecordType { get; set; }
public int? EpartnerEdit { get; set; }
public int? EpartnerView { get; set; }
public string EnumDescription { get; set; }
public string OldReferenceValue { get; set; }
public int? Key { get; set; }
public string SupplierNo { get; set; }
public string DataType { get; set; }
public string TemplateNo { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var jsontext = "[{\"ReferenceNo\":\"\",\"Description\":\"Turnover per year (Number Field)\",\"ReferenceValue\":\"\",\"ControlType\":\"6\",\"PositionNo\":1,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":0,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"currency (Combo box)\",\"ReferenceValue\":\"\",\"ControlType\":\"4\",\"PositionNo\":12,\"SubContractor\":0,\"EnumParameter\":356,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":1,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"average Capacy in your own factory In Pc per year (Number Field)\",\"ReferenceValue\":\"\",\"ControlType\":\"6\",\"PositionNo\":2,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":2,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"percentage of production for takko per year (Number Field)\",\"ReferenceValue\":\"\",\"ControlType\":\"6\",\"PositionNo\":3,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":3,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"how many pices to produce per Day(Number Field with Decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":4,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":4,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"how many pices to produce per month (Number Field with decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":5,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":5,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"how many lines can you produce with? (Number Field with decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":6,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":6,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"number of female employees (Number Field with decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":7,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":7,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"number of male employees (Number Field with decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":8,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":8,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"total number of employees (Number Field with decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":9,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":9,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"number of machine operators in your own factory (Number Field with decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":10,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":10,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"},{\"ReferenceNo\":\"\",\"Description\":\"number of employees in office (Number Field with decimal)\",\"ReferenceValue\":\"\",\"ControlType\":\"5\",\"PositionNo\":11,\"SubContractor\":0,\"EnumParameter\":null,\"RecordType\":\"\",\"EpartnerEdit\":1,\"EpartnerView\":1,\"EnumDescription\":\"\",\"OldReferenceValue\":\"\",\"Key\":11,\"SupplierNo\":\"\",\"DataType\":\"\",\"TemplateNo\":\"\"}]";
List<SupplierProfileDetail> itemlist = JSON.Deserialize<List<SupplierProfileDetail>>(jsontext);
store_grid.DataSource = itemlist;
store_grid.DataBind();
}
}
[DirectMethod]
public string FillEnumDesc(string ParamValue)
{
return string.Empty;
}
protected void BeforeEdit(object sender, DirectEventArgs e)
{
this.ScriptManager1.AddScript("grideditmode=true;Dimension.gridPanel.editingPlugin.startEdit(0, 1);");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ScriptManager1" runat="server" Namespace="Dimension">
</ext:ResourceManager>
<ext:Store ID="store_grid" runat="server" IgnoreExtraFields="true" ShowWarningOnFailure="false"
WarningOnDirty="false">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Key">
</ext:ModelField>
<ext:ModelField Name="ReferenceNo">
</ext:ModelField>
<ext:ModelField Name="Description">
</ext:ModelField>
<ext:ModelField Name="ReferenceValue" Type="String">
</ext:ModelField>
<ext:ModelField Name="ControlType">
</ext:ModelField>
<ext:ModelField Name="PositionNo">
</ext:ModelField>
<ext:ModelField Name="SubContractor">
</ext:ModelField>
<ext:ModelField Name="EnumParameter">
</ext:ModelField>
<ext:ModelField Name="RecordType">
</ext:ModelField>
<ext:ModelField Name="EpartnerView">
</ext:ModelField>
<ext:ModelField Name="EpartnerEdit">
</ext:ModelField>
<ext:ModelField Name="EnumDescription">
</ext:ModelField>
<ext:ModelField Name="OldReferenceValue">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="store_enum" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="POS_VALUE">
<Fields>
<ext:ModelField Name="POS_VALUE">
</ext:ModelField>
<ext:ModelField Name="POS_DESCR">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<div>
<ext:GridPanel ID="gridPanel" StoreID="store_grid" runat="server" StripeRows="true"
Border="true" TrackMouseOver="true" Region="Center" Layout="FitLayout">
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Header="Desc" Width="450" Sortable="false" DataIndex="Description" MenuDisabled="true"
ColumnID="Description" Align="Left">
</ext:Column>
<ext:Column ID="Column2" runat="server" Header="Value" Width="250" Sortable="false" DataIndex="ReferenceValue"
MenuDisabled="true" Align="Left" ColumnID="ReferenceValue">
<Renderer Fn="showcheckcontrol" />
</ext:Column>
<ext:Column ID="Column3" runat="server" Header="" Align="Left" ColumnID="ReferenceNo" DataIndex="ReferenceNo"
Hidden="true">
</ext:Column>
<ext:Column ID="Column4" runat="server" Header="Control Type" Align="Left" ColumnID="ControlType" DataIndex="ControlType"
Hidden="false">
</ext:Column>
<ext:Column ID="Column5" runat="server" Header="" Align="Left" ColumnID="PositionNo" DataIndex="PositionNo" Hidden="true">
</ext:Column>
<ext:Column ID="Column6" runat="server" Header="" Align="Left" ColumnID="SubContractor" DataIndex="SubContractor"
Hidden="true">
</ext:Column>
<ext:Column ID="Column7" runat="server" Header="" Align="Left" ColumnID="EnumParameter" DataIndex="EnumParameter"
Hidden="true">
</ext:Column>
<ext:Column ID="Column8" runat="server" Header="" Align="Left" ColumnID="RecordType" DataIndex="RecordType" Hidden="true">
</ext:Column>
<ext:Column ID="Column9" runat="server" Header="" Align="Left" ColumnID="EpartnerView" DataIndex="EpartnerView"
Hidden="true">
</ext:Column>
<ext:Column ID="Column10" runat="server" Header="" Align="Left" ColumnID="EpartnerEdit" DataIndex="EpartnerEdit"
Hidden="true">
</ext:Column>
<ext:Column ID="Column11" runat="server" Header="" Align="Left" ColumnID="EnumDescription" DataIndex="EnumDescription"
Hidden="true">
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
<Listeners>
<BeforeEdit Fn="setEditor" />
</Listeners>
</ext:CellEditing>
</Plugins>
<Buttons>
<ext:Button AutoPostBack="false" runat="server" ID="imgEdit" Text="Edit">
<DirectEvents>
<Click OnEvent="BeforeEdit" Delay="1" ShowWarningOnFailure="false" Timeout="120000">
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
<Listeners>
<BeforeEdit Fn="setEditor" />
<Render Handler="Dimension.gridPanel.editingPlugin.startEdit(0, 1);" />
</Listeners>
</ext:GridPanel>
</div>
</form>
<script>
var grideditmode = false;
function DynamicStore(paramvalue, data) {
this.Param = paramvalue;
this.StoreData = data;
}
var DynamicStoreList = new Array();
DynamicStore.prototype.Insert = function () {
var hasElement = false;
for (var i = 0; i < DynamicStoreList.length; i++)
hasElement = hasElement || DynamicStoreList[i].Compare(this);
if (!hasElement)
DynamicStoreList.push(this);
}
DynamicStore.prototype.Compare = function (dstore) {
if (!dstore instanceof DynamicStore)
return false;
else
return (this.Param == dstore.Param);
}
function CheckStoreAdded(storelist, param) {
var returnobj = new Object();
for (var i = 0; i < storelist.length; i++) {
if (storelist[i].Param == param) {
returnobj.Data = Ext.decode(storelist[i].StoreData);
returnobj.Success = true;
return returnobj;
}
}
returnobj.Success = false;
return returnobj;
}
var setEditor = function (e) {
var column = e.grid.getColumnModel().columns[e.column], ed = column.getCellEditor(e.row);
try {
if (ed) { ed.destroy(); }
}
catch (ex) {
}
var enumparam = ''
var celleditmode = false;
if (e.record.get("EpartnerEdit") == 1) celleditmode = true;
if (grideditmode && celleditmode && e.record.get("ControlType") != "3") {
enumparam = e.record.get("EnumParameter");
switch (e.record.get("ControlType")) {
case "1":
column.setEditor(new Ext.form.TextField());
break;
case "2":
column.setEditor(new Ext.form.DateField());
break;
case "4":
if (enumparam != null && enumparam != '') {
var store_param = new Ext.data.JsonStore({ fields: ['POS_DESCR', 'POS_VALUE'], data: [] });
var ctlcombo = new Ext.form.ComboBox({
id: "cmb_param",
mode: "local", triggerAction: "all",
displayField: "POS_DESCR",
valueField: "POS_VALUE",
store: store_param
});
var chkparam = CheckStoreAdded(DynamicStoreList, enumparam);
if (!chkparam.Success) {
Ext.net.DirectMethods.FillEnumDesc(enumparam, {
success: function (data) {
var objclient = new DynamicStore(enumparam, data);
objclient.Insert();
Dimension.store_param.loadData(Ext.decode(data));
}
});
}
else {
Dimension.store_param.loadData(chkparam.Data);
}
column.setEditor(ctlcombo);
}
break;
case "5":
column.setEditor(new Ext.form.NumberField({
allowdecimals: false
}));
break;
case "6":
column.setEditor(new Ext.form.NumberField());
break;
}
}
else
return false;
}
function setCheckValue(obj, rowIndex, colIndex) {
if (grideditmode) {
var recordData = Dimension.gridPanel.getStore().getAt(rowIndex);
var columncontroltypevalue = recordData.get("ControlType");
if (columncontroltypevalue == "3") {
var columnname = Dimension.ColumnModel2.getColumnId(colIndex);
var columnvalue = recordData.get(columnname);
if (recordData != null) {
if (columnvalue == '0' || columnvalue == '')
recordData.set(columnname, '1');
else
recordData.set(columnname, '0');
}
Dimension.gridPanel.getView().refreshRow(recordData);
}
}
else {
obj.checked = (obj.checked) ? false : true;
}
}
function showcheckcontrol(value, meta, record, rowIndex, colIndex, store) {
meta.style = "text-align:left;";
var strchecktemp = '<input type="checkbox" {0} {1} id="chk{2}" style="cursor:pointer;" onclick="setCheckValue(this,{3},{4});"/>';
if (record.data.ControlType == "3") {
var disablecheck = "";
if (record.data.EpartnerEdit == 0) disablecheck = "disabled";
if (value == "1") {
return Ext.String.format(strchecktemp, "checked", disablecheck, rowIndex, rowIndex, 1);
}
else {
return Ext.String.format(strchecktemp, "", disablecheck, rowIndex, rowIndex, 1);
}
}
else if (record.data.ControlType == "2") {
if (value == null || value == "") {
return null;
}
else {
return Ext.util.Format.date(value, txt_dateformat.getValue());
}
}
else if (record.data.ControlType == "4") {
var enumparam = record.data.EnumParameter;
if (enumparam != null && enumparam != "") {
var chkparam = CheckStoreAdded(DynamicStoreList, enumparam);
if (chkparam.Success) {
for (var i = 0; i < chkparam.Data.length; i++) {
if (chkparam.Data[i].POS_VALUE == value) {
return chkparam.Data[i].POS_DESCR;
}
}
}
else {
return record.data.EnumDescription;
}
return value;
}
}
else
return value;
}
</script>
</body>
</html>
Last edited by Daniil; Aug 22, 2014 at 11:12 AM.
Reason: [CLOSED]
