Zoom IN -OUT Option

[cijojohn]

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.

[paramvir]

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

[cijojohn]

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.

[paramvir]

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

http://jsfiddle.net/vrjyyrqh/

[cijojohn]

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..

[paramvir]

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/