We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<style type="text/css">
.eheader {
font-weight: bold;
border-bottom: 1px solid #c8c8c8;
background: #c8c8c8;
}
...
}
</style>
</head>
<body>
<div id="Grid"></div>
<script type="text/babel">
$(function(){
var pageSettings = { pageSize: 4 };
var editSettings = { allowEditing: true, allowDeleting: true, allowAdding: true };
var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]};
var columns = [
{ field: "OrderID", headerText: "OrderID",isPrimaryKey:true, width: 90 },
{ field: "CustomerID", headerText: "Last Name", width: 90 },
{ field: "EmployeeID", headerText: "EmployeeID",foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView,editTemplate:{create:"create",read:"read",write:"write"}, width: 90 },
];
ReactDOM.render(
<div id="Grid2">
...
<EJ.Grid id="Grid_1" dataSource = {window.gridData} editSettings={editSettings} toolbarSettings={toolbarSettings} allowPaging = {true} columns={columns} pageSettings={pageSettings} >
...
});
</script>
<script>
function create() {
return $("<input>");
}
function write(args) {
var gridObj = $(".e-grid").ejGrid("instance"); // Get grid object
var val = ej.isNullOrUndefined(args.rowdata["EmployeeID"]) ? "" : args.rowdata["EmployeeID"];
args.element.ejDropDownList({
width: "100%", dataSource: args.column[2].dataSource, value: args.rowdata.EmployeeID, fields: { text: "FirstName", value: "EmployeeID" },
headerTemplate: "<div class='eheader'><span>FirstName</span> <span class='emp'>EmployeeID</span></div>",
template: '<div><div class="ename"> ${FirstName} </div>' + '<div class="desig"> ${EmployeeID} </div><div>', //bound firstName value which is the foreignkeyvalue for employeeID column and with employeeID value
})
}
function read(args) {
return args.ejDropDownList("getSelectedValue"); //return the selected value in dropdown list
}
</script>
</body>
</html>
|
