ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: cijojohn on April 13, 2017, 03:08:36 pm

Title: Zoom IN -OUT Option
Post by: cijojohn on April 13, 2017, 03:08:36 pm

Hi Team,

we have a requirement to zoom in and out the grid based on the user entered % value.

 In Zoom in and out behaviour, we have to increase the font-size and column width of all the cells in grid. We tried to reset the same  in col model and refresh the grid. Its reflecting but when we scroll or type anything in the filter, the grid resets itself back to normal position.

var colM = $("#"+gridId).pqGrid( "option", "colModel" );
      for(var i = 0;i<colM.length;i++){
         var colActualWidth = arrGridCol.width * strZommVal;
         colM.width = colActualWidth;
         colM.minWidth = colActualWidth;
         colM.cls = "cls-zoom"
      }
      $("#"+gridId).pqGrid( "option", "colModel", colM );
      $("#"+gridId).pqGrid("refresh");
also if any class is applied on the grid columns is getting disappaered.

Title: Re: Zoom IN -OUT Option
Post by: paramvir on April 13, 2017, 04:45:44 pm

It's not supposed to reset back upon scroll or filter. Please share a test case reproducing the issue.

Title: Re: Zoom IN -OUT Option
Post by: cijojohn on April 13, 2017, 09:28:09 pm

Hi Team,

PFA. I have also added the the way we changed font-size. Could you please share a simple fiddle snap of how to achive this functionality.

Title: Re: Zoom IN -OUT Option
Post by: paramvir on April 13, 2017, 11:44:14 pm

You need to put that css statement in refresh event to make it persistent.

http://jsfiddle.net/vrjyyrqh/

Title: Re: Zoom IN -OUT Option
Post by: cijojohn on April 14, 2017, 12:25:04 am

Thanks Team it worked. Now one last thing, if i have  filter row also below title row, how to refresh it. when i am setting the font-size for filter row,its height is overlaped by the text of first row..

Title: Re: Zoom IN -OUT Option
Post by: paramvir on April 15, 2017, 09:52:56 am

This whole approach for changing font-size of grid in runtime is incorrect and complicated.

Grid font-size is relative to the document.

So just change the font-size of document -> it would increase the font-size of grid automatically. All you have to do is either refresh or flex the grid depending upon your requirements. Flex takes care of increasing the column widths too.

http://jsfiddle.net/w7nhxpoc/