Welcome and thank you for joining our new OpenText forum. Your questions, responses, best practices, and tips shared with other members will help make this channel vibrant. We're glad you're joining us and look forward to collaborating with you online.

Check out the Getting Started With OpenText Forums for tips on personalizing your experience.

Load text data into cell, truncated (just a few words)... then...more...

SailRCGSailRCG Junior Member
edited October 11, 2016 in Designing Analytics Reports

I am trying to manage the overall look of a report using textual data, in a way that a single line row-by-row exists onLoad.  However, I would like to know when a text segment has been truncated by showing a "more..." or "read more..." is shown at the end of the cell where the text has been truncated in order to maintain a single line / row-by-row table.  


 


When a user hovers over the cell containing the truncated text, with the "more..." or "read more..." the full text will be presented in multiple lines as needed within the cell. In other words, the row / cell height increases to accommodate the entire text paragraph.   


 


The effect can either be on mouseOver / mouseOut or by mouseClick toggle. In either case, the report should go back to a single line, row-by-row. 


 


You can see my expected interaction chain of events in the attached png "mock-up" files.


 


First the report is executed (png #1), then the user clicks on a cell for more detail (png #2), then the user clicks a different cell (png #3), and finally clicking the expanded cell, the report returns to it's original state (png #4).


 


Any ideas? 


Comments

  • SailRCGSailRCG Junior Member

    I will be trying something like this.... however, I am trying to get the data into the para-attrib on two different para attribs....


     


    <!DOCTYPE html>


    <html>


    <head>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery.1.12.4/jquery.min.js"></script>


    <script>


    $(document).ready(function(){


       $("p").on("mouseover",function(){


           $(this).hide();


    });


      $("p").on("mouseout"),function(){


        $(this).show();


    });


    });


    </script>


    </head>


    <body>


     


    <p>sweep over me with the mouse... I'll go away then come back.</p>


    <p>me too...</p>


    <p>me three...</p>


    </body>


    </html>


     


     


    Other suggestions are completely welcome!

  • There's more than one way to do this.


     


    The attached solution one way using jQuery to highlight rows, alternate colors, and hide and show elements.  It was tested it in iHub 3.1.1 Designer.


     


     


    Clement Wong
    Principal Analytics Architect

    OpenText Corporation
    http://www.actuate.com | http://www.opentext.com

Sign In or Register to comment.