Double Click Inline Edit Page Navigation Issue

user_8756789 0
Viewed 325

In Slick Grid I am facing this issue.

Case: For Double click on the cell, the editor model should open and for the Single-Click on the cell, Navigation to Other pages should happen.

Issue: When I double click, two times single-click is called So the page is getting navigated.

Expected: I am expecting Double Click for edit option without the page being navigated.

Grid Option:

 let gridOptions: GridOption = {
        autoEdit: false,
        enableCellNavigation: true,
        editable: true
}

OnClick Action :

this.gridObj.onClick.subscribe((e, args) => {
            console.log("On Click");
this.router.Navigate()
        })

Software versions

Angular: 7.3.5

Angular-Slickgrid: 2.19.0,

TypeScript : 3.1.6

Node : 10.16.3

angular-slickgrid angular slickgrid
3 Answers

Can you try setting the grid option: enableCellNavigation: true. I think that may fix your problem.

user_19211150

You should debounce your click to make sure it's not a double click. For instance, if you set your double click time to something like 250ms, you can do the following:

this.gridObj.onClick.pipe(
  switchMap((click) => timer(250).pipe(
    mapTo(click),
    takeUntil(this.gridObj.onDblClick)
  ))
).subscribe((e) => {
  console.log("On Click");
  this.router.Navigate()
});
user_31069200

The previous answer from @Poul is probably helpful but in case that doesn't work, you could also potentially use the onBeforeEditCell (see the full Grid Events here). I use this event sometime to cancel the Editor (when I create a generic Editor but certain cells aren't editable because of a certain logic in place that is executed dynamically), if you return false on that event then the Editor is never created.

So for example

<angular-slickgrid gridId="grid29" 
  [columnDefinitions]="columnDefinitions" 
  [gridOptions]="gridOptions"
  (onBeforeEditCell)="verifyCellIsEditableBeforeEditing($event)">
</angular-slickgrid>

verifyCellIsEditableBeforeEditing(event) {
    const eventData = event?.detail?.eventData;
    const args = event?.detail?.args;

    if (args && args.column && args.item) {
      // your logic here
      if (... logic for not editable...) {
        event.preventDefault();
        eventData.stopImmediatePropagation();
        return false;
      }
    }
}

So you could combine the use of (onClick) with (onBeforeEditCell) and get that working. In our project, there's column (user) that will route to another SPA page and for that I use the `onClick)

handleOnCellClick(event, args) {
    const grid = args.grid;
    const rows = args.rows || [];
    const selectedUser = grid && grid.getDataItem(args.row) as User;
    const columnDef = grid && grid.getColumns()[args.cell];
    const field = columnDef && columnDef.field || '';

    // when clicking on any cell, we will make it the new selected row except on 1st column (field "sel")
    // we don't want to interfere with multiple row selection checkbox which is on 1st column cell
    switch (field) {
      case 'sel':
        // multiple selection(s)
        this.closeSidebar();
        this.selectedUser = null;
        break;      
      case 'userNumber':
        const url = `/users/${user.userNumber}`;
        if (event.ctrlKey || event.shiftKey) {
          const openUrl = this.location.prepareExternalUrl(url);          
          window.open(openUrl, '_blank');
        } else {
          this.router.navigateByUrl(url);
        }
        break;
      default:
        // clicked anywhere else, turn into a single selection and open quick view sidebar
        grid.setSelectedRows([args.row]);
        this.userIdSelected = selectedUser.id;
        this.openSidebar();
        break;
    }
  }

For a more complete code sample, you see this other Stack Overflow answer I wrote.

user_12121660
Related