ParamQuery grid support forum

General Category => ParamQuery Pro Evaluation Support => Topic started by: cpopolo on January 21, 2020, 02:42:26 am

Title: Want to add class before DIV is visible, and losing class after DIV scrolls away
Post by: cpopolo on January 21, 2020, 02:42:26 am

Hi,

Virtualization in the data grid is mostly a headache when a grid only has a few dozen or hundred rows - I would much rather that all rows are available for classing so that they hold their class after the row scrolls out of the viewport.  Similarly, I would like to class rows that may not yet be rendered and may scroll into view by user action.  Is there a way to turn off paging/virtualization and simply have all data available at all times?

Here's an example that illustrates my problem - and I'm open to a suggestion on how to make it work if virtualization cannot be turned off:

• User may click a bar on the bar chart.  The corresponding row in the grid is classed with 'selected' and shows with an orange month/year
• If the user scrolls up or down so that the selected row leaves the viewport, the class on the selected row is lost and the month/year is no longer orange if the user scrolls that row back into view.

Similarly, the user might select a bar in the chart that is not currently in the viewport.  I would like to add the 'selected' class to any DIV with the correct selector even if the DIV doesn't yet exist in the viewport.  jQuery handles this when the On Click events are set up properly, but I cannot seem to do the same thing in PQ.  If I create a list with getCellsByClass, only those in the current viewport are returned for example.  The list will not include future elements created with the same class...

(http://)

Thanks in advance for your advice.

Title: Re: Want to add class before DIV is visible, and losing class after DIV scrolls away
Post by: paramvir on January 21, 2020, 09:19:26 am

As mentioned in reply to your previous post, you are supposed to use pqgrid API for manipulating classes and styles for cells/rows lying in/out of the viewport.

pqgrid API takes care of the cells and rows within viewport as well as outside the viewport.

Examples:

https://paramquery.com/pro/demos/row_class

https://paramquery.com/pro/demos/row_styles

Hope it helps.

Title: Re: Want to add class before DIV is visible, and losing class after DIV scrolls away
Post by: cpopolo on January 22, 2020, 06:02:05 am

I don't see what I should target from outside of the PQ grid to set a class on a row?  In my example, if user clicks on a bar in the Highcharts bar chart, what would the onclick code look like in the Highchart even that would trigger an addClass to a specific matching row in the grid?  Could you sketch a quick code snippet that might be called from jQuery to affect a row in the grid?

Title: Re: Want to add class before DIV is visible, and losing class after DIV scrolls away
Post by: paramvir on January 22, 2020, 11:28:42 pm

you can use search method to find the matching row in grid:

https://paramquery.com/pro/api#method-search