Get Free Trial

How to have two or more actions on the same cell

Re-Open
Tiago asked on March 24, 2021

Hi, I have a question about flexmonster.on(`cellclick`, onCellClick). Is it possible to have two or more actions on the same cell? For example, we are trying to set two buttons on the same cell, each with your specific event. Is it possible to somehow control these buttons events?

3 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 25, 2021

Hello,
 
Thank you for reaching out to us.
 
The recommended approach depends on your use case.
In case you want to execute several functions one by one after clicking the cell, we suggest subscribing to the cellclick event with different functions, as shown below:

flexmonster.on("cellclick", foo);
flexmonster.on("cellclick", bar);

function foo(cell) {
  ...
}

function bar(cell) {
  ...
}

Please see the JSFiddle for reference: https://jsfiddle.net/flexmonster/cxn9td1m/.
 
If your requirement is to allow the user to choose between several separate actions, we suggest using the context menu instead.
The context menu appears after the right-click on the cell. It can be fully customized to fit your needs. It obtains the Cell Data Object of the clicked cell, similar to the cellclick event handler. Also, it can be invoked for multiple cells if needed. In this case, the handler receives an array of Cell Data Objects.
The code snippet below demonstrates the way to add functionality to the context menu:

flexmonster.customizeContextMenu(function(items, data, viewType) {
  if (Array.isArray(data)) { //handler for multiple cells
    items.push({
      label: '"baz" function',
      handler: () => {
        baz(data);
      }
    });
  } else { //handlers for a single cell
    items.push({
      label: '"foo" function',
      handler: () => {
        foo(data);
      }
    });
    items.push({
      label: '"bar" function',
      handler: () => {
        bar(data);
      }
    });
  }
  return items;
});

function foo(cell) {
  ...
}

function bar(cell) {
  ...
}

function baz(cells) {
  ...
}

You are welcome to see the JSFiddle for reference: https://jsfiddle.net/flexmonster/jrbgm1nL/. Also, we suggest checking out documentation dedicated to the context menu customization: https://www.flexmonster.com/doc/customizing-context-menu/.
 
Please let us know if it helps.
Our team is looking forward to hearing from you.
 
Regards,
Illia

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster April 1, 2021

Hello,
 
We are wondering if the suggested solution works for your case.
 
Our team is looking forward to hearing from you.

Regards,
Illia

Public
Tiago April 1, 2021

Hello,
 
Yes, thank you, works like a charm!
 
Regards,
Tiago

Please login or Register to Submit Answer