Slick grid scaling issue on iPad

SlickGrid is a JavaScript grid/spreadsheet component.
It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

Some highlights:

Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
Extremely fast rendering speed
Supports jQuery UI Themes
Background post-rendering for richer cells
Configurable & customizable
Full keyboard navigation
Column resize/reorder/show/hide
Column auto sizing & force-fit
Pluggable cell formatters & editors
Support for editing and creating new rows.
Grouping, filtering, custom aggregators, and more!
Advanced detached & multi-field editors with undo/redo support.
“GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

Scaling of the grid in various devices comes to the picture when we applied it in real time process. The grid that embedded with SlickGrid can be able to load more than 1Lakh of data as usual with its default behaviour. The scaling issue occur when we deals with some PDA devices like iPad.The SlickGrid is not much more compatable for iPad or responsive manner initialy but we can able to fix the scaling problem in iPad by applying some quick fixes in CSS styles and JavaScript codes.

/*

 Fix for the iPad, set the overflow as scroll and overflow-x as auto.

 add webkit overflow touch option

*/
.slick-viewport { 
  overflow: scroll;
  overflow-x: auto !important;
 -webkit-overflow-scrolling: touch; 
}

Apply the above code by detecting the iPad devices through JavaScript code on the fly.

 var headID = document.getElementsByTagName("head")[0];         

     var cssNode = document.createElement('link');

     cssNode.type = 'text/css';

     cssNode.rel = 'stylesheet';

     cssNode.href = 'iosStyle.css';

     cssNode.media = 'screen';

     headID.appendChild(cssNode); 

Apply the css style in the 'ioasStyle.css' file.And we can able to detect iOS devices using the code,

 
function detectIOS(){

     var standalone = window.navigator.standalone,

        userAgent = window.navigator.userAgent.toLowerCase(),

        safari = /safari/.test( userAgent ),

        ios = /iphone|ipod|ipad/.test( userAgent ); 

    return ios; 

    }

This function returns a true state with the ios devices. Also we can able to detect the device navigation tools too.