How to perform single click edit in Tree Grid?
This Knowledge base explains how to perform Single Click Editing in Tree Grid.
Solution
Tree Grid support the following types of edit modes
- Row
- Cell
In Tree Grid, when you double click a row or cell, it is changed to edit state. You can change the row or cell value and save to the data source. This is default behaviour of editing in Tree Grid. But we can also perform single click edit.
Row Editing
You can make a row editable on single click with Row Edit Mode of Tree Grid by using the startEdit and endEdit method.
Bind the mousedown event for Tree Grid in the load event and in the mousedown event handler, call the startEdit and endEdit methods based on the target element.
JS
import { TreeGrid, Page, Toolbar, Edit } from '@syncfusion/ej2-treegrid';
import { projectData } from './data-source';
TreeGrid.Inject(Page, Toolbar, Edit);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: projectData,
idMapping: 'TaskID',
parentIdMapping: 'parentID',
allowPaging: true,
treeColumnIndex: 1,
height: 400,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
mode: 'Row',
},
toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
load: load,
columns: [
{ field: 'TaskID', isPrimaryKey: true, headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'TaskName', headerText: 'Task Name', width: 220, editType: 'stringedit' },
{ field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit', format: { skeleton: 'yMd', type: 'date' } },
{ field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 100 }
]
});
treegrid.appendTo('#TreeGrid');
Code for Load Event
//load event
function load(args) {
let instance = this;
instance.element.addEventListener('mousedown', function (e) {
if ((e.target as HTMLElement).closest('td') != null &&
(e.target as HTMLElement).closest('td').classList.contains("e-rowcell") &&
!(e.target as HTMLElement).classList.contains("e-treegridexpand") &&
!(e.target as HTMLElement).classList.contains("e-treegridcollapse")) {
if (instance.grid.isEdit &&
!(e.target as HTMLElement).closest('.e-row').classList.contains('e-editedrow') &&
!(e.target as HTMLElement).closest('.e-row').classList.contains('e-addedrow')) {
instance.endEdit();// calling endEdit method
}
if (!instance.grid.isEdit) {
let index: number = parseInt((e.target as HTMLElement).closest('td').getAttribute('Index') as string);
instance.selectRow(index);
instance.startEdit();// calling startEdit method
let colIndex: number = parseInt((e.target as HTMLElement).closest('td').getAttribute("aria-colIndex"));
setTimeout(function () {
document.getElementsByClassName('e-input')[colIndex].focus();
});
}
};
});
}
Also refer the other frameworks demo links below,
Cell Editing
You can make a cell editable on a single click with Cell Edit Mode of Tree Grid by using the editCell and saveCell method.
Bind the mousedown event of Tree Grid in the load event and in the mousedown event handler, call the editCell and saveCell method based on the target element.
JS
import { TreeGrid, Page, Toolbar, Edit } from '@syncfusion/ej2-treegrid';
import { projectData } from './data-source';
TreeGrid.Inject(Page, Toolbar, Edit);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: projectData,
idMapping: 'TaskID',
parentIdMapping: 'parentID',
allowPaging: true,
treeColumnIndex: 1,
height: 400,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
mode: 'Cell',
},
toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
load: load,
columns: [
{ field: 'TaskID', isPrimaryKey: true, headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'TaskName', headerText: 'Task Name', width: 220, editType: 'stringedit' },
{ field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit', format: { skeleton: 'yMd', type: 'date' } },
{ field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 100 }
]
});
treegrid.appendTo('#TreeGrid');
Code for Load event
//load event
function load(args) {
let instance = this;
instance.element.addEventListener('mousedown', function (e) {
if (e.target.closest('td') !== null && (e.target as HTMLElement).closest('td').classList.contains("e-rowcell")
&& !(e.target as HTMLElement).classList.contains('e-treegridexpand') && !(e.target as HTMLElement).classList.contains('e-treegridcollapse') && (e.target as HTMLElement).closest('td').getAttribute("aria-colIndex") !== null) {
let target = (e.target as HTMLElement).closest('td');
if (instance.grid.isEdit && !target.classList.contains("e-editedbatchcell") && !document.getElementsByClassName('e-addedrow').length) {
instance.grid.saveCell();// calling saveCell method
}
if (!instance.grid.isEdit) {
let index = parseInt(target.getAttribute("Index"));
let colindex = parseInt(target.getAttribute("aria-colindex"));
let field = instance.getColumns()[colindex].field;
setTimeout(function () {
instance.editCell(index, field); // calling editCell method
});
}
};
});
}
Also refer the other frameworks demo links below,
