Hover on <p:column -> appear button?

UI Components for JSF
Post Reply
rider
Posts: 317
Joined: 05 Mar 2010, 13:17

26 Jun 2020, 10:32

Hello,

Maybe it´s a stupid question, but I´m currently not sure, how I can solve this:

I would like the following, in my example especially for the Header from a p:datatable:

Here is my p:datatable.
Image

If I hover on a header column, I would like to get the 3 dots (or a button etc.)
Image

How can I do this, as soon I hove on it?
I think with <f:facet name="header"> I can add the p:commandButton

But how can I implement this, that the button will be only visible as soon I hover on it?

And one other thing is:
If i enable sorting: <p:column sortBy="#{myBean.field}", how can I avoid if I click the commandLink, that sort will be also applied?

Code: Select all

<p:column
										sortBy="#{myBean.field}"
										visible="true">
										<f:facet name="header">
											<h:outputText value="Name" />
											
											<p:commandLink id="dynaButton" global="false">
												<h:outputText styleClass="fa fa-ellipsis-v Fright" />
											</p:commandLink>
											
																					<p:tieredMenu overlay="true" trigger="dynaButton"
											my="left top" at="left bottom" style="width:200px">
											<p:submenu label="Ajax Menuitems">
												<p:menuitem value="Save" action="#{menuView.save}"
													update=":growl" icon="pi pi-save" />
												<p:menuitem value="Update" action="#{menuView.update}"
													update=":growl" icon="pi pi-refresh" />
											</p:submenu>
										</p:tieredMenu>
											
											
										</f:facet>
Any thoughts?
Primefaces 7.0, WildFly 16

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

26 Jun 2020, 13:21

You will have to use Jquery. So if your commandButton had a widgetVar="btnTest" then this will do it.

Code: Select all

PF('btnTest').jq.on("mouseenter", function() {
                $(this).hide();
        }).on("mouseleave", function() {
                $(this).show();
        });
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.2 / PF Extensions 8.0.2

rider
Posts: 317
Joined: 05 Mar 2010, 13:17

01 Jul 2020, 08:23

thank you.

I thought it will be possible directly with PF...

Can you post the whole code, please. Where do I have to add the JQuery code?

p:commandButton widgetVar="btnTest"
Primefaces 7.0, WildFly 16

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

01 Jul 2020, 13:23

Sure if you have a command button:

Code: Select all

<p:commandButton widgetVar="btnTest" ../>
Simply add this JS code to your page:

Code: Select all

<script>
        PF('btnTest').jq.on("mouseenter", function() {
                $(this).show();
        }).on("mouseleave", function() {
                $(this).hide();
        });
</script>
It may not be perfect but you get the idea.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.2 / PF Extensions 8.0.2

rider
Posts: 317
Joined: 05 Mar 2010, 13:17

03 Jul 2020, 07:34

thank you...

But this means, if I have 100 buttons, I have to add 100 times the JS code?
Primefaces 7.0, WildFly 16

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

03 Jul 2020, 14:28

Nope use a combination of Jquery and PF magic.

Use this code to find all CommandButton widgets on the page.

Code: Select all

https://stackoverflow.com/a/25531519/502366
Give your buttons that you want found some bogus CSS class like...

Code: Select all

<p:commandButton styleClass="columnButton"
Then in your JS code where you are finding the CommandButton widgets you know its one you want if it has that class.

Code: Select all

if (widget.hasClass('columnButton') {
    // add show hide
}
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.2 / PF Extensions 8.0.2

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 44 guests