Hi Stefan,
Greetings from Syncfusion support
Query 1 : The cell clicked should be selected, not the first cell in the row.
This can be achieved by triggering Load event. Please follow the below mentioned code example and attached sample for more reference.
Query 2 : If a checkbox is clicked the checkbox should change from checked to unchecked or from unchecked to checked on first click. Now you must click twice for it to change.
This could be achieved by using Load and actionComplete event. Please refer the below code snippet for more understanding.
|
Index.cshtml
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" load="load" actionComplete="actionComplete" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
…
</ejs-grid>
<script>
var isVerifiedColumn = false;
function load(args) {
var instance = document.getElementById('Grid').ej2_instances[0];
instance.element.addEventListener('mousedown', function (e) {
isVerifiedColumn = e.target.getAttribute('aria-colindex') === "0" ? true : false; // Verified column rowIndex = “0”
if (e.target.classList.contains("e-rowcell")) {
if (instance.isEdit)
instance.endEdit();
var index = parseInt(e.target.getAttribute("Index"));
instance.selectRow(index);
instance.startEdit();
};
});
}
function actionComplete(args) {
if (args.requestType == "beginEdit") {
if (isVerifiedColumn) {
if (args.rowData.Verified == false) {
args.form.querySelector('.e-checkbox').ej2_instances[0].checked = true;
}
else {
args.form.querySelector('.e-checkbox').ej2_instances[0].checked = false;
}
}
}
}
</script>
|
We have prepared a sample for both Query 1 & 2 in the following sample.
Query 3 : I have multiple grids in page. How do I loop through all grids in page and endEdit() in all of them?
You need to call the endEdit() method by taking grid instance from the currently viewing grid ID. Grid id’s differ for different grids.
Regards
Thavasianand S.
