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.
|
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
// the datasource "window.gridData" is referred from jsondata.min.js
var data = [
{"Id":2, "UserName":"daniel", Permission:"CanEdit", },
{"Id":3, "UserName":"john", Permission:"CanManage" }
];
var dropData = [{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}, {"Value":"CanManage", "Display":"Can Manage"}];
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
allowSorting: true,
allowGrouping: true,
allowMultiSorting: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "normal" },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "Id", isPrimaryKey: true, textAlign: ej.TextAlign.Right, headerText: "Order ID" },
{ field: "Permission", headerText: "Permission", editType: "dropdownedit", dataSource: dropData, editParams: {fields: {text: "Display", value: "Value"}} }
],
});
});
</script> |
{"result":[
{"Id":2, "UserName":"daniel", Permission:"CanEdit", Permissions:[{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}]},
{"Id":3, "UserName":"john", Permission:"CanManage", Permissions:[{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}, {"Value":"CanManage", "Display":"Can Manage"}]}
], "count":2}
Thanks for help!!
Daniel Plawgo
|
<div id="Grid"></div>
<script id="columnTemp" type="text/x-jsrender">
<span></span>
</script>
<script type="text/javascript">
$(function () {
var gridData = [
{
"Id": 2, "UserName": "daniel", Permission: "CanEdit",
Permissions: [
{ "Value": "CanEdit", "Display": "Can Edit" },
. . .
]
},
. .
]
$("#Grid").ejGrid({
dataSource: gridData,
. . .
columns: [
{ field: "Id", isPrimaryKey: true },
{
field: "Permission", headerText: "Permission", template: "#columnTemp",
editTemplate: {
create: function (args) {
return "<input>";
},
read: function (args) {
return args.val();
},
write: function (args) {
args.element.ejDropDownList({
fields: { text: "Display", value: "Value" },
dataSource: args.rowdata.Permissions
}).ejDropDownList("instance").selectItemByValue(args.rowdata.Permission);
}
}
}
],
templateRefresh: function (args) {
var text = ej.DataManager(args.data.Permissions).executeLocal(new ej.Query().where("Value", "equal", args.data.Permission))[0].Display;
$(args.cell).find("span").text(text);
}
});
});
</script> |
