dGrid contextmenu

[Rieck, Greg]

Hello,

I have been trying to get a context menu to display based on the data selected in a row in a dGrid. I want the context menu to have specific menu items dependant on the grid row. For example if I were to right click on rows A-C here is what I would expect to see:

ROW

 A > First, Last

 B > First, B, Last

 C > First, C1, C2, Last

I currently have the context menu displaying, but not uniquely or "dynamically" by selected row.

1) How can I get the context menu items to be dependant on the data in the selected row?

2) When I very first right click on a row the context menu displays right away. But if I then right click on a different row nothing is displayed. But then if I right click again on the same row the context menu displays. How can I avoid the double clicking to get the menu to display?

3) I am using the declarative method to expose the context menu. However, as part of this entire issue I need to be able to access the selected row and the selected context menu item in order to process the "onclick" of the context menu. I have not seen any examples of how to setup the context menu event and would really like to see an example if you can provide one.

Thank You,

Greg

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Jean-Claude Hujeux]

The following is  a programmatic (I don't use declarative) solution mockup you'll have to complete and adapt to your context :

    grid.on(".dgrid-row:mousedown, mouseDownCallback);

    mouseDownCallback: function(evt){
        var row = grid.row(evt);
        if (mouse.isRight(evt)){
            //here build your context menu depending on the content of row, for example the following will show a context menu with one item which when clicked will popup an alert box with the content of the row's name property value:
            var theMenu = new Menu({targetNodeIds: [grid.domNode], selector: ".dgrid-row"});
            theMenu.addChild(new MenuItem({label: row.name, onClick: function(evt){alert('name: ', row.name)});
        }
    }

grid is an instantiated dgrid.  mouse, Menu, MenuItem are the corresponding dojo / dijit modules. I am using mousedown event and / mouse.isRight() for context menus, as the contextmenu event did not work at the time and in my context for dgrids

jc

Le 09/05/2017 à 23:10, Rieck, Greg a écrit :

Hello,

I have been trying to get a context menu to display based on the data selected in a row in a dGrid. I want the context menu to have specific menu items dependant on the grid row. For example if I were to right click on rows A-C here is what I would expect to see:

ROW

 A > First, Last

 B > First, B, Last

 C > First, C1, C2, Last

I currently have the context menu displaying, but not uniquely or "dynamically" by selected row.

1) How can I get the context menu items to be dependant on the data in the selected row?

2) When I very first right click on a row the context menu displays right away. But if I then right click on a different row nothing is displayed. But then if I right click again on the same row the context menu displays. How can I avoid the double clicking to get the menu to display?

3) I am using the declarative method to expose the context menu. However, as part of this entire issue I need to be able to access the selected row and the selected context menu item in order to process the "onclick" of the context menu. I have not seen any examples of how to setup the context menu event and would really like to see an example if you can provide one.

Thank You,

Greg

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Rieck, Greg]

JC,

Thank you for the response. 

I had this working as a programmatic approach first. However, the right click always required two clicks to activate it. That's why I switched to declarative approach. From what I was able to determine the first click created the div and the second click displayed it.

Perhaps I'm doing something wrong with my events. I have an event on my OnDemand dGrid for when a row is selected and then inside that event I have an event for the contextmenu.

The "_theSelectedRow" object has a property "tabletype" that will be used to determine which menu to use A, B or C.

switch(_theSelectedRow.tabletype){

  case "A": Display A Menu Items; break;

  case "B": Display B Menu Items; break;

  case "C": Display C Menu Items; break;

}

this.grid.on('dgrid-select', lang.hitch(this, 'selectedRow'));

  selectedRow: function (evt) {

  _theSelectedRow = evt.rows[0].data;//gets my row data as an object

  this.grid.on('.dgrid-row:contextmenu', lang.hitch(this,  function (evt) {

  evt.preventDefault();

  if (_theSelectedRow != null && _theSelectedRow.XObject1 != null){

    Parser.parse();

    pmenu = new Menu({

      targetNodeIds: [this.grid.domNode],

      selector: "div.dgrid-row",

    });

  }));

},

Here is an example.

https://jsbin.com/miquyimuxi/1/edit?html,output

Thank You.

On Wed, May 10, 2017 at 3:12 PM, Hujeux Jean-Claude <[hidden email]> wrote:

The following is  a programmatic (I don't use declarative) solution mockup you'll have to complete and adapt to your context :

    grid.on(".dgrid-row:mousedown, mouseDownCallback);

    mouseDownCallback: function(evt){
        var row = grid.row(evt);
        if (mouse.isRight(evt)){
            //here build your context menu depending on the content of row, for example the following will show a context menu with one item which when clicked will popup an alert box with the content of the row's name property value:
            var theMenu = new Menu({targetNodeIds: [grid.domNode], selector: ".dgrid-row"});
            theMenu.addChild(new MenuItem({label: row.name, onClick: function(evt){alert('name: ', row.name)});
        }
    }

grid is an instantiated dgrid.  mouse, Menu, MenuItem are the corresponding dojo / dijit modules. I am using mousedown event and / mouse.isRight() for context menus, as the contextmenu event did not work at the time and in my context for dgrids

jc

Le 09/05/2017 à 23:10, Rieck, Greg a écrit :

Hello,

I have been trying to get a context menu to display based on the data selected in a row in a dGrid. I want the context menu to have specific menu items dependant on the grid row. For example if I were to right click on rows A-C here is what I would expect to see:

ROW

 A > First, Last

 B > First, B, Last

 C > First, C1, C2, Last

I currently have the context menu displaying, but not uniquely or "dynamically" by selected row.

1) How can I get the context menu items to be dependant on the data in the selected row?

2) When I very first right click on a row the context menu displays right away. But if I then right click on a different row nothing is displayed. But then if I right click again on the same row the context menu displays. How can I avoid the double clicking to get the menu to display?

3) I am using the declarative method to expose the context menu. However, as part of this entire issue I need to be able to access the selected row and the selected context menu item in order to process the "onclick" of the context menu. I have not seen any examples of how to setup the context menu event and would really like to see an example if you can provide one.

Thank You,

Greg

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Rieck, Greg]

JC,

I think your example is what I needed. Changing my event to the mousedown and capturing the IsRight appears to be working. I have only implemented it with your logic. I need to convert it to my design and test.

Thank You!

On Wed, May 10, 2017 at 3:12 PM, Hujeux Jean-Claude <[hidden email]> wrote:

The following is  a programmatic (I don't use declarative) solution mockup you'll have to complete and adapt to your context :

    grid.on(".dgrid-row:mousedown, mouseDownCallback);

    mouseDownCallback: function(evt){
        var row = grid.row(evt);
        if (mouse.isRight(evt)){
            //here build your context menu depending on the content of row, for example the following will show a context menu with one item which when clicked will popup an alert box with the content of the row's name property value:
            var theMenu = new Menu({targetNodeIds: [grid.domNode], selector: ".dgrid-row"});
            theMenu.addChild(new MenuItem({label: row.name, onClick: function(evt){alert('name: ', row.name)});
        }
    }

grid is an instantiated dgrid.  mouse, Menu, MenuItem are the corresponding dojo / dijit modules. I am using mousedown event and / mouse.isRight() for context menus, as the contextmenu event did not work at the time and in my context for dgrids

jc

Le 09/05/2017 à 23:10, Rieck, Greg a écrit :

Hello,

I have been trying to get a context menu to display based on the data selected in a row in a dGrid. I want the context menu to have specific menu items dependant on the grid row. For example if I were to right click on rows A-C here is what I would expect to see:

ROW

 A > First, Last

 B > First, B, Last

 C > First, C1, C2, Last

I currently have the context menu displaying, but not uniquely or "dynamically" by selected row.

1) How can I get the context menu items to be dependant on the data in the selected row?

2) When I very first right click on a row the context menu displays right away. But if I then right click on a different row nothing is displayed. But then if I right click again on the same row the context menu displays. How can I avoid the double clicking to get the menu to display?

3) I am using the declarative method to expose the context menu. However, as part of this entire issue I need to be able to access the selected row and the selected context menu item in order to process the "onclick" of the context menu. I have not seen any examples of how to setup the context menu event and would really like to see an example if you can provide one.

Thank You,

Greg

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Jean-Claude Hujeux]

Glad I could help :-),

Note that now that you build a new context menu every time you right click on a row, you may want to destroy the previous menu before creating a new one.

What I am doing is keep previous menu if it does not change, and destroy previous if I need to create a new one (theMenu.destroyRecursive()).

jc

Le 11/05/2017 à 01:40, Rieck, Greg a écrit :

JC,

I think your example is what I needed. Changing my event to the mousedown and capturing the IsRight appears to be working. I have only implemented it with your logic. I need to convert it to my design and test.

Thank You!

On Wed, May 10, 2017 at 3:12 PM, Hujeux Jean-Claude <[hidden email]> wrote:

The following is  a programmatic (I don't use declarative) solution mockup you'll have to complete and adapt to your context :

    grid.on(".dgrid-row:mousedown, mouseDownCallback);

    mouseDownCallback: function(evt){
        var row = grid.row(evt);
        if (mouse.isRight(evt)){
            //here build your context menu depending on the content of row, for example the following will show a context menu with one item which when clicked will popup an alert box with the content of the row's name property value:
            var theMenu = new Menu({targetNodeIds: [grid.domNode], selector: ".dgrid-row"});
            theMenu.addChild(new MenuItem({label: row.name, onClick: function(evt){alert('name: ', row.name)});
        }
    }

grid is an instantiated dgrid.  mouse, Menu, MenuItem are the corresponding dojo / dijit modules. I am using mousedown event and / mouse.isRight() for context menus, as the contextmenu event did not work at the time and in my context for dgrids

jc

Le 09/05/2017 à 23:10, Rieck, Greg a écrit :

Hello,

I have been trying to get a context menu to display based on the data selected in a row in a dGrid. I want the context menu to have specific menu items dependant on the grid row. For example if I were to right click on rows A-C here is what I would expect to see:

ROW

 A > First, Last

 B > First, B, Last

 C > First, C1, C2, Last

I currently have the context menu displaying, but not uniquely or "dynamically" by selected row.

1) How can I get the context menu items to be dependant on the data in the selected row?

2) When I very first right click on a row the context menu displays right away. But if I then right click on a different row nothing is displayed. But then if I right click again on the same row the context menu displays. How can I avoid the double clicking to get the menu to display?

3) I am using the declarative method to expose the context menu. However, as part of this entire issue I need to be able to access the selected row and the selected context menu item in order to process the "onclick" of the context menu. I have not seen any examples of how to setup the context menu event and would really like to see an example if you can provide one.

Thank You,

Greg

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest