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.
|
<script>
var onClick = function(args){ // click event of button
var rowObj = grid.getRowObjectFromUID(ej.base.closest(args.target, '.e-row').getAttribute('data-uid')); // method to get current row object
var data = rowObj.data;
alert(JSON.stringify(data));
}
var grid = new ej.grids.Grid({
dataSource: employeeData,
editSettings: { allowEditing: true, allowDeleting: true },
columns: [
{headerText: 'Action',template: '#actionTemplate',width: 125}, // using column.template
. . .
{ headerText: 'Commands', width: 120, commands: [{ buttonOption: { content: 'Details', cssClass: 'e-primary', click: onClick } }]} // using custom command button
],
height: 310
});
grid.appendTo('#Grid');
</script>
<script id="actionTemplate" type="text/x-template">
<input type='button' value='Action' onClick="onClick(event);">
</script> |
|
<script>
var onClick = function(args){
var rowObj = grid.getRowObjectFromUID(ej.base.closest(args.target, '.e-row').getAttribute('data-uid'));
var data = rowObj.data;
alert(JSON.stringify(data));
}
var grid = new ej.grids.Grid({
dataSource: employeeData,
editSettings: { allowEditing: true, allowDeleting: true },
columns: [
. . .
{ headerText: 'Commands', width: 120, commands: [{ buttonOption: { content: 'Details', cssClass: 'e-primary', click: onClick } }]}
],
height: 310
});
grid.appendTo('#Grid');
</script>
|
|
var grid = new ej.grids.Grid({
dataSource: data,
columns: gridColumns,
queryCellInfo: queryCellInfo,
. . .
});
function queryCellInfo(e){
if (e.cell.classList.contains('e-unboundcell')) {
e.cell.getElementsByClassName('e-primary')[0].title = 'My title';
}
}
grid.appendTo('#Grid'); |
|
var grid = new ej.grids.Grid({
load:load,
toolbar: ['Add','Delete', 'Edit','Update','Cancel'],
allowExcelExport: true,
allowSorting: true,
. . .
});
function load(args) {
let ajaxObj = new ej.base.Ajax();
ajaxObj.url = 'api/Orders';
ajaxObj.type = 'GET';
ajaxObj.send().then(function (value) {
//bind the Grid data in AJAX success function
var gridObject = document.querySelector("#Grid").ej2_instances[0]; //grid object
var data = JSON.parse(value);
gridObject.dataSource = new ej.data.DataManager({
json: data.Items,
adaptor: new ej.data.RemoteSaveAdaptor, //remote save adaptor
insertUrl: '/Home/Insert',
updateUrl: '/Home/Update',
removeUrl: '/Home/Delete'
});
});
}
grid.appendTo('#Grid');
|
|
var gridColumns = [
{ field: 'OrderID',isPrimaryKey:true, headerText: 'Type', width: 50 },
{ field: 'EmployeeID', headerText: 'Name' },
{ headerText: 'Commands', width: 120, commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
{ type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
{ type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },
{ type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }]
}
];
var grid = new ej.grids.Grid({
columns: gridColumns,
load:load,
. . .
});
function load(args) {
new ej.data.DataManager({
url: '/Home/GridDatasource',
adaptor: new ej.data.UrlAdaptor(),
headers: [{ 'Authenticcation': 'bearer123' }]
}).executeQuery(new ej.data.Query().addParams('ModuleId', 2)).then((e) =
function (e) {
var gridObject = document.querySelector("#Grid").ej2_instances[0]; //grid object
gridObject.dataSource = new ej.data.DataManager({
json: e.result,
adaptor: new ej.data.RemoteSaveAdaptor, //remote save adaptor
insertUrl: '/Home/Insert',
updateUrl: '/Home/Update',
removeUrl: '/Home/Delete',
headers: [{ 'Authenticcation': 'bearer123' }]
});
});
}
grid.appendTo('#Grid');
|
