|
[index.js]
this.shipCityParams = {
create: () => {
this.elem = document.createElement("input");
return this.elem;
},
destroy: () => {
this.element.destroy();
},
read: args => {
return this.element.text;
},
write: args => {
this.element = new DropDownList({
floatLabelType: "Never",
fields: { text: "ShipCountry", value: "OrderID" },
dataSource: orderDatas,
placeholder: "Select a Value",
value: args.rowData["OrderID"],
change: function(e) {
const tempQuery = new Query().where("OrderID", "equal", e.value);
var findData = new DataManager(
this.childGrid.dataSource
).executeLocal(tempQuery);
console.log(findData);
var gridInstance = e.element.closest(".e-grid").ej2_instances[0];
var shipCityEle = [].slice
.call(gridInstance.editModule.formObj.inputElements)
.forEach(item => {
switch (item.getAttribute("name")) {
case "ShipName":
item.value = findData[0]["ShipName"];
break;
case "OrderDate":
var intl = new Internationalization();
var dFormatter = intl.getDateFormat({ skeleton: "yMd" });
var formattedString = dFormatter(
new Date(findData[0]["OrderDate"])
);
item.ej2_instances[0].value = formattedString;
break;
}
});
}.bind(this)
});
this.element.appendTo(this.elem);
}
};
this.childGrid = {
dataSource: orderDatas,
queryString: "EmployeeID",
allowPaging: true,
pageSettings: { pageSize: 6, pageCount: 5 },
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true
},
toolbar: ["Add", "Edit", "Delete", "Cancel", "Update"],
columns: [
{
field: "OrderID",
headerText: "Order ID",
textAlign: "Right",
isPrimaruKey: true,
width: 120
},
{
field: "ShipCity",
headerText: "Ship City",
edit: this.shipCityParams,
width: 120
},
{
field: "OrderDate",
headerText: "Order Date",
type: "date",
format: { skeleton: "yMd", type: "date" },
editType: "datepickeredit",
width: 120
},
{ field: "ShipName", headerText: "Ship Name", width: 150 },
{ field: "Freight", headerText: "Freight", width: 120 }
]
};
} | 
