jQWidgets Forums

Tagged: binding, dataadapter, filtering, grid, paging, php

This topic contains 5 replies, has 2 voices, and was last updated by Benji6996 11 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Using 'virtualmode' with 'loadServerData' Posts

May 22, 2013 at 11:30 pm Using 'virtualmode' with 'loadServerData' #21678

Participant

I have a grid that gets its data via ‘loadServerData’. Like so:

Ignore any reference to ‘data’ as this is what is returned from a preceeding ajax call. My datafields and columns are defined in the data object

// Prepare the response data
var source = {
	url: '//api.domain.net/something/items/',
	datatype: "json",
	datafields: data.datafields,
	data: options,
	filter: function(){
		// Update the grid and send a request to the server.
		$("#mfs_grid").jqxGrid('updatebounddata', 'filter');
	},
	sort: function(){
		// Update the grid and send a request to the server.
		$("#mfs_grid").jqxGrid('updatebounddata', 'sort');
	},
	beforeprocessing: function(data){
		if(data != null){
			// Update the total records
			source.totalrecords = data.rows;					
		}
	}
};
// Get the items
var settings = {
	loadServerData: function(serverdata,source,callback){
		MN.ajax({
			url: source.url,
			dataType: source.datatype,
			data: serverdata,
			cache: false,
			success: function(data){
				// Create the data array
				var dataArray = MN.mapDataForJQGrid(data.items,source);
				callback({ records: dataArray });
			}
		});
	}
};

The above works perfectly, until I tell the grid that it is in virtual mode (for server side paging). Like so:

// Initialize the data adapter
var dataAdapter = new $.jqx.dataAdapter(source,settings);
// Initialize the grid
$('#mfs_grid').jqxGrid({
	width: 896,		
	height: 350,	
	altrows: true,
	source: dataAdapter,
	theme: 'metro',
	selectionmode: 'singlerow',
	filterable: true,
	autoshowfiltericon: false,
	sortable: true,
	pageable: true,
	pagesize: 20,
	pagesizeoptions: [10,20,40,80],
	virtualmode: true,	
	columnsresize: true,
	columns: data.columns,
	rendergridrows: function(obj){
		return obj.data;
	}
});

My question, quite simply, is why is this not working? Is there anything I can do to get this to work? I absolutely have to use the ‘loadServerData’ method as it allows me to get data from a different subdomain, whilst maintaining cookies throughout… Therefore I must find a way to use the two together, any suggestions?

Thanks in Advance

May 23, 2013 at 3:32 am Using 'virtualmode' with 'loadServerData' #21687

Peter Stoev

Keymaster

Hi,

You should check what exactly is obj.data in your code. Is that an Array of records that the “rendergridrows” requires or not. Because for the first page it will require an array with indexes from 0 to 10, for the second from 11 to 20 and so on.

Best Regards,
Peter Stoev

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

May 23, 2013 at 10:35 am Using 'virtualmode' with 'loadServerData' #21745

Benji6996

Participant

I only placed ‘obj.data’ there because I saw it in a ‘virtualmode’ example… I wasnt too sure what it was doing but it seemed to work.

I have now debugged it and it seems that ‘rendergridrows’ is not even being called… I have done the following:

rendergridrows: function(obj){
	console.log('test');
	console.log(obj);
	return obj.data;
},

Absolutely nothing is appearing in the console. I cannot see where else I could be going wrong…

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/

May 23, 2013 at 11:54 am Using 'virtualmode' with 'loadServerData' #21754

Benji6996

Participant

That’s awesome, all sorted as far as data displaying goes…

What is the ‘dataadapter.loadjson’ method? I cannot find this in the documentation… Does this handle the mapping etc??

I am now experiencing another issue with the paging whereby, on the first page, my data object contains 20 items, but as soon as I press the next page button, my new loaded object contains all my rows not just the next 20… This is obviously a server side issue, but it may be caused by the parameter that is being sent to the server. I am about to debug it and see what I can find, if you have any insight on this then please share…

May 23, 2013 at 12:51 pm Using 'virtualmode' with 'loadServerData' #21760

Benji6996

Participant

Dont worry all sorted with the paging, it was an SQL error

But I would still like to know info about the ‘dataadapter.loadjson’. Can I use this to map my json data and then pass it to the grid?

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.