jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Using 'virtualmode' with 'loadServerData' › Reply To: Using 'virtualmode' with 'loadServerData'

May 23, 2013 at 11:08 am Using 'virtualmode' with 'loadServerData' #21750

Peter Stoev
Keymaster

Hi,

I’ve prepared a sample because it’s a bit tricky implementation of Virtual Scrolling using loadServerData.

Here’s a sample with Virtual Scrolling and loadServerData:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>	
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
			var source =
			{
				url: 'data.php',
				dataType: 'json',
				datatype: "json",
				cache: false,
				datafields: [
					 { name: 'OrderID' },
					 { name: 'ShippedDate' },
					 { name: 'ShipName' },
					 { name: 'ShipAddress' },
					 { name: 'ShipCity' },
					 { name: 'ShipCountry' }
				],
				root: 'Rows',
				cache: false,
				beforeprocessing: function (data) {
					source.totalrecords = data[0].TotalRows;
				}     
			};
            var dataAdapter = new $.jqx.dataAdapter(source,
				{
					loadServerData: function(postdata, source, callback)
					{
						$.ajax({
                                    dataType: "json",
                                    cache: false,
                                    type: "GET",
                                    url: source.url,
                                    data: postdata,
								    success: function (data, status, xhr)
                                  	{
									    if ($.isFunction(source.beforeprocessing)) {
                                            source.beforeprocessing(data, status, xhr);
                                        }
										var records = data;
										dataAdapter.loadjson(null, records, source);
                                        callback({records: dataAdapter.records, totalrecords: source.totalrecords});
									}
							});
					}
				}
			);
			
			$("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
				virtualmode: true,
				rendergridrows: function(obj)
				{
					return obj.data;
				},
				columns: [
					  { text: 'ID', datafield: 'OrderID', width: 200 },
					  { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 200 },
					  { text: 'Ship Name', datafield: 'ShipName', width: 200 },
					  { text: 'Address', datafield: 'ShipAddress', width: 180 },
					  { text: 'City', datafield: 'ShipCity', width: 100 },
					  { text: 'Country', datafield: 'ShipCountry', width: 140 }
				  ]
            });        
        });
    </script>
</head>
<body class='default'>
   <div id="jqxgrid"></div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/