- Home
- Forum
- Angular - EJ 2
- Inline editing in Grid with multiple checkbox selection
Inline editing in Grid with multiple checkbox selection
I have the following requirements for the grid:
- Editing should work with a single click.
- It should be possible to select multiple of rows.My idea was to do this via a checkbox.
The definition of the grid looks like this:
<ejs-grid [dataSource]='m_oUploadPlaeneList' locale='de-DE' allowPaging='true' class="portal-dialog_grid" [pageSettings]='initialPage' [editSettings]='editSettingsUploadPlan' [selectionSettings]='selectOptionsUploadPlan' [toolbar]='toolbarUploadPlan' #uploadGridCtrl (load)='load($event)'>
<e-columns>
<e-column type='checkbox' [allowFiltering]='false' [allowSorting]='false' width='60'></e-column>
<e-column field='Dateiname' headerText='Dateiname' width='300' textAlign='Left' isPrimaryKey='true' [allowEditing]='true'></e-column>
.
.
.
</e-columns>
</ejs-grid>
The source is:
this.editSettingsUploadPlan = { allowEditing: true, allowAdding: false, allowDeleting: false };
this.editparamsUploadPlan = { params: { popupHeight: '300px' } };
this.selectOptionsUploadPlan = { type: "Multiple", persistSelection: true, checkboxMode: true, checkboxOnly: true };
this.initialPage = { pageSizes: true, pageCount: 4};
The first try for the load function - mouseup was:
load(args) {
this.uploadGridCtrl.element.addEventListener('mouseup', (e: MouseEventArgs) => {
if ((e.target as HTMLElement).classList.contains("e-rowcell")) {
if (this.uploadGridCtrl.isEdit) {
this.uploadGridCtrl.endEdit();
let index: number = parseInt((e.target as HTMLElement).getAttribute("Index"));
this.uploadGridCtrl.selectRow(index);
this.uploadGridCtrl.startEdit();
}
}
});
}
The problem is that editing no longer works with this.
The second try for the load function - mouseup was:
load(args) {
this.uploadGridCtrl.element.addEventListener('mouseup', (e: MouseEventArgs) => {
if ((e.target as HTMLElement).classList.contains("e-rowcell")) {
if (this.uploadGridCtrl.isEdit)
this.uploadGridCtrl.endEdit();
let index: number = parseInt((e.target as HTMLElement).getAttribute("Index"));
let oSelectedRows: number[] = this.uploadGridCtrl.getSelectedRowIndexes ();
let oSelectRows: number[] = [index];
this.uploadGridCtrl.selectRows(oSelectRows);
this.uploadGridCtrl.startEdit();
this.uploadGridCtrl.clearRowSelection();
this.uploadGridCtrl.selectRows(oSelectedRows);
}
});
}
Basically the selection and editing works now, but when a row is edited the selection changes. It seems that the selection is always correct one step of editing later.
I've tried a few other things, but I haven't come up with a workable solution.
Please what am I doing wrong? I suspect it's probably just a small thing and the original double click edit function does this small thing differently.
Thanks
Hi, I have created a small quick example program.
The 2 variants of the load function are included in the source as comment. The editing should work with a single click. Unfortunately, with the first variant of the load function, editing does not work if the row is already selected. With the 2nd variant the editing works, but the function getSelectedRowIndexes in actionBegin or actionComplete returns wrong values. The whole thing is to make it possible to do something with all selected rows in actionComplete.
The used version is 19.0.2.055
Regards,
Gerhard
Attachment: GPSTest01_5934671f.zip
|
load(args) {
// first version
this.m_oGridCtrl.element.addEventListener('mouseup', (e: MouseEventArgs) => {
if ((e.target as HTMLElement).classList.contains("e-rowcell")) {
if (this.m_oGridCtrl.isEdit)
this.m_oGridCtrl.endEdit();
let index: number = parseInt((e.target as HTMLElement).getAttribute("Index"));
this.m_oGridCtrl.selectRow(index);
this.m_oGridCtrl.editModule.startEdit((e.target as HTMLTableCellElement).parentElement as HTMLTableRowElement);
}
});
}
|
- 6 Replies
- 3 Participants
-
GP Gerhard Polzhofer
- Sep 24, 2021 02:20 PM UTC
- Oct 13, 2021 04:07 AM UTC
