new component sheet

Community Driven Extensions Project
Post Reply
giorgio.primefaces
Posts: 64
Joined: 19 Apr 2011, 11:43

21 Mar 2018, 11:31

Hi all,
I'm really interested in new component "Sheet", I saw in Handsontable that it is possible to enable a context menu (customizable), in the showcase I didn't see the option, is it possible to enable it?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

21 Mar 2018, 13:18

Great question. First some background...

1. We wrote sheet for our needs at a couple of our clients so it specifically met those needs. so anything you see missing is just something we didn't need yet.

2. To your question "extending or customizing Handsontable" is possible if you look at this example..

https://www.primefaces.org/showcase-ext ... olumns.jsf

See the Javascript at the bottom which calls "PF('sheetWidget').ht.updateSettings({ " you can update the Handsontable with any configs you want. So to add the context menu you would probably just need to look at the HandsonTable docs..

https://docs.handsontable.com/0.16.1/de ... -menu.html

Let me know how it goes!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

giorgio.primefaces
Posts: 64
Joined: 19 Apr 2011, 11:43

21 Mar 2018, 18:07

ok, thanks,
next week I'll try to add context menu and I will report my results, meantime, if someone else is going to do the same test, please, share your results
Giorgio

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

22 Mar 2018, 01:14

Got it working. Just follow my Dynamic columns example above but put this in the <script> section...

Code: Select all

$(document).ready(function() {
    var $hot = PF('sheetWidget').ht;
    $hot.updateSettings({
       contextMenu: {
           callback: function (key, options) {
             if (key === 'about') {
               setTimeout(function () {
                 // timeout is used to make sure the menu collapsed before alert is shown
                 alert("PrimeFaces Extensions Rocks! This is a context menu with default and custom options mixed");
               }, 100);
             }
           },
           items: {
             "row_above": {
               disabled: function () {
                 // if first row, disable this option
                 return $hot.getSelected()[0] === 0;
               }
             },
             "row_below": {},
             "hsep1": "---------",
             "remove_row": {
               name: 'Remove this row, ok?',
               disabled: function () {
                 // if first row, disable this option
                 return $hot.getSelected()[0] === 0
               }
             },
             "hsep2": "---------",
             "about": {name: 'About...'}
           }
       }
    });
 });
It makes a context menu with options. You can then use p:remoteCommand in this javascript to execute normal JSF Actions and AJAX.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests