BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<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> |