Page of 9

Click on the Tabs below the see the relevant code for the example: 

<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/1421206D-A4E7-DE45-A37E-254CA4ADFEE6/main.js" charset="UTF-8"></script><script type="text/ecmascript" src="../../../js/jquery.min.js"></script> 
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Frozen Columns</title>
</head>
<body>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript"> 
    
        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'data.json',
                datatype: "json",
                colNames: ['Category Name', 'Product Name', 'Country', 'Price', 'Quantity'],
                colModel: [
					{ label: 'Category Name', name: 'CategoryName', width: 100, frozen: true },
					{ label: 'Product Name', name: 'ProductName', width: 150, frozen: true },
					{ label: 'Country', name: 'Country', width: 200 },
					{ label: 'Price', name: 'Price', width: 250, sorttype: 'number' },
					{ label: 'Quantity', name: 'Quantity', width: 250, sorttype: 'integer' }                   
                ],
				loadonce: true,
                shrinkToFit: false, // must be set with frozen columns, otherwise columns will be shrank to fit the grid width
                width: 780,
                height: 200,
                rowNum: 15,
                pager: "#jqGridPager"
            });

            $("#jqGrid").jqGrid("setFrozenColumns");
        });

    </script>

    
</body>
</html>