• Post Reply Bookmark Topic Watch Topic
  • New Topic

Select Button To Display Contents of column of specific row

 
Pete Palmer
Ranch Hand
Posts: 106
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Example of my table

Below is a snippet from DataTable component to display the contents of the “Head4” column.


All the entries in the table are of type String.
However, the String content for the “Head4” column can be very larger and displaying this makes the table very large.

As an alternative, is there a way to provide a button for the “Head4” for each row and when the user selects the button on that row, the corresponding “Head4” column contents is displayed in a pop up dialog box ?

I am using Primefaces 5.0.

Thank you for your help.

Pete
 
Tim Holloway
Bartender
Posts: 18408
58
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, you can use javascript plus some vanilla HTML to do that. In fact, one of the simplest ways to do it doesn't even require a button.

Create an HTML DIV element and give it a unique ID. Set its visibility hidden.

Add an "onclick" or hover javascript attribute to the outputText element. Make the script that fires on the click or hover event set the hidden DIV's screen co-ordinates (if you want to), and insert the expanded text as a child of the DIV. Lastly, set the DIV's display attribute to "visible". Add whatever mechanism you like to hide it again when the user isn't interested in seeing it any more.

That's basically what the PrimeFaces pop-up dialogs are doing, but without all the extra features. You could actually just use a PrimeFaces dialog and put in an "onshow" script that updates the content of an outputText element in the dialog before it displays.
 
Pete Palmer
Ranch Hand
Posts: 106
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Tim

Many thanks for your suggestion.

I am completely new to JSF and Primefaces and have been given exisitng Primefaces app to further enhance to allow this button option.

I have googled for ideas and looked at the primefaces showcase too ( dialogs, tables and buttons) with no joy.

Would it be possible to provide a snippet code example that I could use please.

Thank you
Pete
 
Pete Palmer
Ranch Hand
Posts: 106
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

Unfortunately, I am still struggling with the Button select in my datatable.

Below are details of my table, managed bean and datatable component.

When the "View" button is selected on any row, the dialog ALWAYS puts out the "R3C3" message.

What I would like is if the "View" button is selected on row 1 for the dialog to contain "R1C3" and for row 2 to contain "R2C3" etc,

Any guidance/suggestion would be very much be appreciated.

Thank you again.

Pete



Managed bean




Datatable





 
Tim Holloway
Bartender
Posts: 18408
58
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Change this:


to this:


The onclick function not only attaches logic to the click event, it also inquires whether or not the click should initiate a submit of the form data to the server. In your case, you do not, you only want client-side (javascript) logic to execute.

When you define a PrimeFaces dialog, what you are actually doing is defining a section of the webpage that's just like any other section except that it's hidden. So whatever property values are mapped will be the values that they held at the time that section of the page was originally rendered. In the case where you want values specific to a given table row, that means that you have to update the dialog's rendering before displaying it. Typically that will mean that you define a pre-show function on the dialog and that function will do an AJAX partial page update for the desired values.
 
Pete Palmer
Ranch Hand
Posts: 106
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Tim

Many thanks for a detailed response.

Unfortunately adding the "return false" didn't resolve the issue. :(

Your last paragraph was interesting reading. Your point

In the case where you want values specific to a given table row, that means that you have to update the dialog's rendering before displaying it. Typically that will mean that you define a pre-show function on the dialog and that function will do an AJAX partial page update for the desired values.


suggested to me, that there some "behaviour" is missing in my implementation. Is this correct ?
If so, what that is.

As an alternative, I have implemented the tooltip mechanism to display the message content column.




Not an ideal approach, but it displays the correct message content assoiciated with the row - well amost .
Drawback with this approach :-

  • The message content will be large so tool tip is not ideal.
  • For some reason, a small part of the message content is not shown
  • I have to configure the "hideDelay" attribute to prevent the tooltip "dialog" to dissapear immediately, to ensure the user has time to read/see the message content before it disappears.



  • The button select approach is what is best suited.

    Any further suggestions to get that working would be great.

    Thank you again

    Pete

     
    Roel De Nijs
    Sheriff
    Posts: 10763
    147
    AngularJS Chrome Eclipse IDE Hibernate Java jQuery MySQL Database Spring Tomcat Server
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Hi Pete,

    First of all, I'm not a PrimeFaces expert. In fact, I didn't know of its existence until this thread

    But for your use case - only showing (very) large data when a button is clicked - the RowExpansion seems to be a match made in heaven. As far as I can see it has nothing but benefits: supported by PrimeFaces, no need to change your backend, it only requires a few front-end changes, no need to add cumbersome and hard-to-debug custom javascript,... The only "drawback": the large content is shown in a row (see demo on the url) in the table itself, not a seperate dialog. If that's really a requirement, we can definitely make the command button and dialog work with a little perseverance But I really like the RowExpansion demo, it's a very nice solution to display huge amounts of data and still have a normal table.

    Your data table will look more or less like this:


    Hope it helps!
    Kind regards,
    Roel
     
    Pete Palmer
    Ranch Hand
    Posts: 106
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Hi Roel,

    I too was not aware of Primefaces until I was given a utilty app to enhance which used Primefaces - and JSF.
    Not used either so has been an interesting, challenging task ... and enjoyable when things start to function correctly .

    As for your suggestion to use the "RowExpansion" facility ... well your quote
    a match made in heaven
    sums it up perfectly.

    This feature was simple to introduce into my data table. Can be extended to present additional information in the future easily.
    Also the overall presentation and use of the table is so much better.

    So a fantastic top tip Roel. Very much appreciated.

    As for trying to get the command button and tool tip approach working, that is not necessary now.

    Thank you.

    Best Regards
    Pete


     
    Roel De Nijs
    Sheriff
    Posts: 10763
    147
    AngularJS Chrome Eclipse IDE Hibernate Java jQuery MySQL Database Spring Tomcat Server
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Pete Palmer wrote:This feature was simple to introduce into my data table. Can be extended to present additional information in the future easily.
    Also the overall presentation and use of the table is so much better.

    Exactly why I thought this is the way to go

    Pete Palmer wrote:So a fantastic top tip Roel. Very much appreciated.

    Glad to hear I could help! My pleasure, as in the good old SCJD days
     
    • Post Reply Bookmark Topic Watch Topic
    • New Topic
    Boost this thread!