BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
var editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
var toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };
var decimalPlaces = {decimalPlaces:3};
var enableAnimation = {enableAnimation:true};
ReactDOM.render(
<div id="Grid2">
<table >
<tr>
<td>
<EJ.Grid dataSource = {window.gridData} allowPaging = {true} editSettings={editSettings} toolbarSettings={toolbarItems}>
<columns>
<column field="OrderID" isPrimaryKey={true} />
<column field="ShipCity" editType="dropdownedit" editParams={enableAnimation} />
<column field="Freight" editType="numericedit" editParams={decimalPlaces} />
<column field="ShipCountry" />
</columns>
</EJ.Grid>
</td>
</tr>
</table>
</div>,
document.getElementById('Grid')
);
|
<div id="Grid"></div>
<script type="text/babel">
var EditTemplate = {
create : function () {
return "<input>";
},
read : function (args) {
if ($(args).hasClass("e-dropdownlist"))
return args.ejDropDownList("getSelectedValue");
else
return $(args)[0].value;
},
write : function (args) {
if(args.requestType == "add") { // if new record is added, create dropdownlist
var obj = $("#ejControl_0").data("ejGrid"); // instance of grid using grid's id
args.element.ejDropDownList({
width: "100%", dataSource: obj.model.dataSource, fields: { text: "value", value: "value" },
});
}
else { // if row is edited, set inputtext for editing
$(args.element[0].form[2]).addClass("ejinputtext");
$(args.element[0].form[2]).val(args.rowdata.value);
$(args.element[0].form[2]).css({'text-align': 'left', 'width': '100%', 'height': '30px'});
}
}
};
$(function(){
------------------
ReactDOM.render(
<div id="Grid2">
<table >
<tr>
<td>
<EJ.Grid dataSource = {data} allowPaging = {true} editSettings={editSettings} toolbarSettings={toolbarItems} >
<columns>
<column field="id" isPrimaryKey={true} headerText="ID"/>
<column field="name" headerText="Name" />
<column field="value" headerText="Value" editTemplate={EditTemplate}/>
</columns>
</EJ.Grid>
</td>
</tr>
</table>
</div>,
document.getElementById('Grid')
);
});
</script>
|