user select any checkbox then it should acquire row lock

Question

Select and Lock row(s) with timer – The select-rows-action is very similar to how MS Windows File Explorer allows user to select a mixture of Files (leaf rows) and Folders (non-leaf rows).
 User click SelectRows, system: Turn-on Checkbox-Column (URL); Display 30sec-floating-timer with 1 button: Cancel; When user click EACH Checkbox: Acquires RowLock(s) or Msg: ‘Not Selected: Failed to lock’.
 The row(s) successfully locked shall be color-highlight in Pink, until user clicks Copy/Move/DelRows or let timer runs out. Then: Release all acquired RowLocks; Close timer; Turn-off Checkbox & Color-highlight.

Pon Selva Jeganathan · Accepted Answer

Hi Ayush,We are working on this query with high
priority. And we need time to find a feasible solution of your requirement. We
will update further details by 17th August 2022. Until then we value
your patience. In the meanwhile, we will contact if any details are required.Regards,  Pon
selva

Farveen Sulthana Thameeztheen Basha · Answer

Hi Ayush,Query#:- user select any checkbox then it should acquire row lockWe have achieved your requirement and display the checkbox on row Select by applying external CSS styles and also applied the background color with rowSelecting and rowDeselecting event of the TreeGrid. We have reset all by clicking the external button using clearSelection method of the TreeGrid.Refer to the code below:- App.Component.html:-

. . .

App.Component.ts:- onCancel() { alert('d'); this.treegrid['clearSelection'](); // clear selected rows after 30s here } rowSelecting(args) { if (!isNullOrUndefined(args.row)) { args.row.classList.add('bgcolor'); } } rowDeselecting(args) { Array.from(args.row).map((row) => { row.classList.remove('bgcolor'); //remove background color while on reset }); } CSS:- Sample link:- https://stackblitz.com/edit/angular-ohfqfv-whpe1z?file=app.component.ts,app.component.htmlAPI link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#rowselectinghttps://ej2.syncfusion.com/angular/documentation/api/treegrid/#rowdeselectinghttps://ej2.syncfusion.com/angular/documentation/api/treegrid/#clearselectionIf we misunderstood your query, please share more details to proceed further.Regards,Farveen sulthana TNote:- If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Ayush · Answer

hi

Farveen Sulthana Thameeztheen Basha I seems that you have not met my requirement as i have mentioned but this was not solution of my problem andnow i have added that details in pointsUser click SelectRows, system: Turn-on Checkbox-Column (URL); Display 30sec-floating-timer with 1 button: Cancel.When user click EACH Checkbox: Acquires RowLock(s) or Msg: ‘Not Selected: Failed to lock’. The row(s) successfully locked shall be color-highlight in Pink, until user clicks Copy/Move/DelRows or let timer runs out.Then: Release all acquired RowLocks; Close timer; Turn-off Checkbox & Color-highlight

Ayush · Answer

hi pon selva jeganathan thanks for your reply I will wait till you respond.

Pon Selva Jeganathan · Answer

Hi AyushSorry for the inconvenience caused.We are working on this query with high priority. And we
need time to find a feasible solution of your requirement. We will update
further details by tomorrow(19th August 2022. Until then we value your patience.Regards,  Pon
selva

Pon Selva Jeganathan · Answer

Hi AyushThanks for your patience.We have achieved your requirement by using the checkbox selection feature with rowSelecting and rowDeselecting events and clearSelection method of the treegrid. Please refer to the below code example, …. export class AppComponent { … @ViewChild('treegrid') public treegrid: TreeGridComponent; @ViewChild('dialog') public alertDialog: DialogComponent; public alertDlgButtons: Object[] = [ { buttonModel: { content: 'Cancel', cssClass: 'e-flat', }, click: function (args) { countdownClock(0, true); // here we call the timer this.hide(); // hide the dialog using dialog's hide method }, }, ]; ngOnInit(): void { this.data = sampleData; this.selectionsettings = { persistSelection: true }; } …. rowSelected(args) { if (this.treegrid.getSelectedRows().length == 1) { countdownClock(30, false); // here we set the timer this.alertDialog.show(); // show the dialog if (!isNullOrUndefined(args.row)) { args.row.classList.add('bgcolor'); // add the background color of the row } } } rowDeselecting(args) { if (!isNullOrUndefined(args.row.classList.contains('bgcolor'))) { args.row.classList.remove('bgcolor'); // remove the background color } } } var intervalID; //here enable and disable the timer function countdownClock(time, flag) { var new_tiem = time; if (new_tiem > 0) { // enable the timer using setInterval method intervalID = setInterval(function () { //calculate minutes and seconds let minutes: any = Math.floor(new_tiem / 60); let seconds: any = new_tiem % 60; minutes = minutes < 10 ? '0' + minutes : minutes; seconds = seconds < 10 ? '0' + seconds : seconds; // insert the minutes and seconds into the dialog content document.getElementById( 'dialogcontent' ).innerHTML = `${minutes}:${seconds}`; //disable the timer while timer has 0 value if (new_tiem == 0 || new_tiem < 0) { clearInterval(intervalID); var treegrid = document.getElementsByClassName('e-treegrid')[0].ej2_instances[0]; treegrid.clearSelection();// clear the selection var dialog = document.getElementsByClassName('e-dialog')[0].ej2_instances[0]; dialog.hide();// close the dialog } new_tiem--; }, 1000); } // disable the timer while force stop of dialog if (flag == true) { var treegrid = document.getElementsByClassName('e-treegrid')[0].ej2_instances[0]; treegrid.clearSelection();// clear the selection setTimeout(() => { // reset the dialog content document.getElementById('dialogcontent').innerHTML = '00:00'; // clear the timer clearInterval(intervalID); }, 100); } } In the above code example, in the rowSelected event, while selecting a row or checkbox, we show the dialogue using the dialog’s show method and add the background colour for the selected row. While the dialogue forces stop/timer out, we hide the dialogue using the dialog’s hide method and clear the selection using the clearSelection method of the treegrid. In the rowDeselecting event, we removed the background color.Please refer to the below sample,https://stackblitz.com/edit/angular-ohfqfv-jbqpg8?file=app.component.htmlPlease refer to the below help documentation,https://ej2.syncfusion.com/documentation/treegrid/selection/#checkbox-selectionPlease refer to the below API documentation,https://ej2.syncfusion.com/angular/documentation/api/treegrid/#rowselectedhttps://ej2.syncfusion.com/angular/documentation/api/treegrid/#rowdeselectinghttps://ej2.syncfusion.com/angular/documentation/api/treegrid/#clearselectionhttps://ej2.syncfusion.com/documentation/api/dialog#showhttps://ej2.syncfusion.com/documentation/api/dialog#hideKindly get back to us for further assistance.Regards, Pon selva If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.