Right Click Menu

[Ben S.]

I would like to be able to right-click a cell in a grid and have a menu appear where the mouse was clicked. How is this done in Alpha? I'd like to have a menu option to let the user copy the value from this column to the next 4 columns, or maybe have the menu open a dialog that has options relative to the selected cell.

Ben

[lvasic]

Re: Right Click Menu

It's built into the list control. If you can capture the right-click event on the grid...

[Ben S.]

Re: Right Click Menu

It's built into the list control. If you can capture the right-click event on the grid...

Yep. That's what I'm looking for. for the grid. How to capture the right-click event and show a context menu where the mouse clicked.

[lvasic]

Re: Right Click Menu

Check out this video:

https://www.screencast.com/t/RcDr23F7S

jQuery(window).on("contextmenu", function(e){
ew = event.which;
var vselectedRow = {grid.object}.getSelectedRow();
   
   if(ew == 3 && window.cnt == 1){
   // alert("Right click on row: " + vselectedRow);
   ele = $('{grid.componentName}.ACTIONBUTTON.MENU.G0');
    ele.click();
   window.cnt = window.cnt +1;
   return false;
   }
});

return false;

[Michael1954]

Re: Right Click Menu

Lee, I am helping Ben with this.

His end goal is to click in a cell and pop up a menu. That menu offers a series of choices. (numbers)
my function takes 4 parameters.
The field name clicked
The row number clicked
The value in the row clicked
And a choice from the menu.


My problem is on the Grid I can't get a pointer to the child Object (Your window).
In the UX there is Javascript help to get a pointer to the child, I can't find a similar piece of Javascript in the Grid.

So here is where I have got stuck

https://cornford-gmail.tinytake.com/...gyMF83MDg0NTc2

I use Alt A as 4 and Alt B as 6

I guess the solution is to save my 3 parameters use your menu and then get a pointer to the parent and pass in the menu value.

P.S.
I got exactly the same repeated events when I used which. I did not know about window.cnt so thanks.

[lvasic]

Re: Right Click Menu

I've added the copy and paste menu: https://www.screencast.com/t/YZzks7QrQq

[Michael1954]

Re: Right Click Menu

Thanks, Lee going to bed now.

I have been stuck on this at the right click level so this code works for me

var id = document.activeElement.id;
var splitString = id.split(".");
var field = splitString[3]; // I can split out part of the field name and increment by one.
var rn = {Grid.RowNumber};
var cnt = 4;
var val = {grid.Object}.getValue('G',field,rn);


if (event.altKey ) {if(event.keyCode == 65){
cnt = 4; //Alt A
duplicate(field,rn,cnt,val);



}
if(event.keyCode == 66){
cnt = 6; // Alt B
duplicate(field,rn,cnt,val);


}
}


// then I pass in the 4 parameters and write to the columns

function duplicate(field,rn,cnt,val){


for (i = 1; i <= cnt; i++) {
var start = field.substring(0, 5);
var number = field.substring(5, 11);
number = parseInt(number) + i;
var fieldName = start + number;

{grid.Object}.setValue('G',fieldName,rn,val);
}

//alert(start);

}


Could you paste your bew code to let me see the process, I am not pasting in my method nut the user has to remember the Alt commands.

[lvasic]

Re: Right Click Menu

I think this one is working pretty good. This is a right click on a grid to get a menu. https://www.screencast.com/t/bME88EXVa

[Ben S.]

Re: Right Click Menu

Wow. You have come a long way. I like the look of the menu, but I think I may need to have an interactive dialog come up. I don't know if that can be done in a menu.

Our interface has a column for each week. The application has a row for each employee on a project and is used to forecast their work, as in 40 hours per week.

It could have options like:

* Copy this value through the last week.
* Copy this value for the next [_4_] weeks. (The user can edit the number in the box.)
* Distribute [_100_] hours over the next [_5_] weeks. (20 hours would go to this cell and the next 4)

The logic of distributing the hours is a secondary task. My main request is being able to get a window to appear where the mouse clicks and the window is aware of the current cell.

[Michael1954]

Re: Right Click Menu

Thanks for the help Lee.

https://cornford-gmail.tinytake.com/...g1OF83MTAwMjQ1

Michael

[lvasic]

Re: Right Click Menu

Michael, here is the last video with the code: https://www.screencast.com/t/eqSGOxsWoHx

onClick Event:

function LeftClick(vColumn){
window.cnt = 1;
window.ColumnName = vColumn;
window.vSRow = {grid.object}.getSelectedRow();
window.RC = "{Grid.ComponentName}.V.R" + window.vSRow + "." + vColumn;
}


onMouseDown Event:

function RightClick(){
jQuery(window).on("contextmenu", function(e){
ew = event.which;
  if(ew == 3 && window.cnt == 1){
  {Grid.object}.runAction('PopMenu',$(window.RC));
   window.cnt = window.cnt +1;
   return false;
   }
}); 
}

Menu Copy:
window.PasteValues = {grid.object}.getValue('G',window.ColumnName,window.vSRow);

Menu Paste:
if(window.PasteValues  == undefined){
alert('Please COPY something to PASTE something.');
}
else
{
{grid.object}.setValue('G',window.ColumnName,window.vSRow,window.PasteValues);
}

Menu Clear:
{grid.object}.setValue('G',window.ColumnName,window.vSRow,'');

Menu Add3:
{grid.object}.setValue('G','RELIGION',window.vSRow,window.PasteValues);
{grid.object}.setValue('G','FAVCOLOR',window.vSRow,window.PasteValues);
{grid.object}.setValue('G','VEHICLE',window.vSRow,window.PasteValues);

Menu Divide3:
var n = window.PasteValues
var x = n / 3;
var y =  x.toFixed(2);
{grid.object}.setValue('G','RELIGION',window.vSRow,y);
{grid.object}.setValue('G','FAVCOLOR',window.vSRow,y);
{grid.object}.setValue('G','VEHICLE',window.vSRow,y);

[lvasic]

Re: Right Click Menu

Michael, your video looks perfect. How are you using the entry form?

[Michael1954]

Re: Right Click Menu

I just wrote the HTML

<div style="height: 1in; padding: 15pt;">Fill in the cells to be duplicated
<hr>
<form id="divide">
How many cells?:
<input name="cells" type="text">
<br><br>
Value to be divided:
<input name="value" type="text">
<br>

</form>


</div>

Then the Javascript calls a function. For duplicate here is the code.

var field = window._v._fieldName ;
var val = window._v._fieldValue;
var rn = window._v._rowNum ;
var qty = document.getElementById("divide").elements[0].value;
qty = parseInt(qty);
var cnt = qty;
duplicate(field,rn,cnt,val);

[lvasic]

Re: Right Click Menu

Did you put this HTML in a message box? When you right click how is the box being called?

[Ben S.]

Re: Right Click Menu

Lee,

Instead of putting a function call behind the click event of each field, I think you can put the function call in the click event of the grid (Javascript - Row Events). We only want the menu to appear if the column name contains "fcst" for any of the weekly forecast columns.

Michael and I tried this earlier and had some success. A challenge we noticed was right clicking in a row that wasn't already selected. The result was sparodic. It didn't always seem to know what cell was being clicked.


Are you aware of a way to reference the cell to the right of the current cell and return its field name? If I have cells Fcst_201751, Fcst_201752, Fcst_201801, Date_Modified, I want to loop through the columns, updating the value until I find a column that does not begin with "fcst". Right now Michael is addressing each column by its name, assuming that the column exists. He increments the field name by 1 each time or resets to 1 if he's reached week 52. This is working but it doesn't let us know if we've reached the last column. A function where a row and column number could be passed that would return the field name would be nice.

Ben