jqGrid in a tab – load via Ajax from mysql db

[kathys2151Participant]

I’m trying to construct a grid, with two tabs acting as details. I load data regarding our PC inventory from a mysql database. The data loads into the grid, and the first tab (the data for the main table and first grid comes from the same mysql SELECT query). When I select the 2nd tab, I want data to be loaded from another mysql table (which contains the results of pings run daily against each PC) for each row in the grid. I cannot figure out how to pass the deviceId (simply a numeric identifier for each PC) so that I can select the pings for each device. What ends up happening is that all of the pings for every device are listed under every device. Hopefully this is something simple I am missing.

This is how I set up the tab and load data:
$(tabsdiv).jqxTabs({ width: 800, height: 170, theme: 'summer', initTabContent: displayPingData() });

function displayPingData() {
             var pingDataSource =
            {
                 datatype: "json",              
                 datafields: [
                   { name: 'deviceId', type: 'string', sortable: 'true'},               
                    { name: 'args', type: 'string', sortable: 'true' },
                    { name: 'pingTime', type: 'string', sortable: 'true' },                   
                    { name: 'starttime', type: 'string', sortable: 'true' }}                                                                         
                ],
				url: 'getPingData.php',	
				cache: false,		
				data:data,
				type: "GET",
				id: 'deviceId',
				cache: false,
				filter: function()
				{
					$("#pingDataGrid").jqxGrid('updatebounddata', 'filter');
				},
				sort: function()
				{
					$("#pingDataGrid").jqxGrid('updatebounddata', 'sort');
				},
				root: 'Rows',
				beforeprocessing: function(data)
				{		
					if (data != null)
					{
						//source.totalrecords = data[0].TotalRows;
						pingDataSource.totalrecords = data[0].TotalRows;					
					}
				}
			};   
         			
			var pingDataAdapter = new $.jqx.dataAdapter(pingDataSource, {
				loadError: function(xhr, status, error)
				{
					alert("error is " + error);
				}
			});
			
			//setup grid
			$("#pingDataGrid").jqxGrid(
			{		
				source: spingDataAdapter,
				editable: false,
				theme: 'summer',
				width: '900',
				filterable: true,
				showfilterrow: true,
				sortable: true,
				autoheight: true,
				pageable: true,
				Columns:
				[
					{ text: 'deviceId', datafield: 'deviceId', width: 40 },				
					{ text: 'Arguments', datafield: 'args', width: 320 },
					{ text: 'PingTime', datafield: 'PingTime', width: 80 },					
					{ text: 'Start Time', datafield: 'starttime', width: 180 }			
				]
			});			
		};

In pingData.php, I simply connect to the db, then run the following query:
$query = "SELECT SQL_CALC_FOUND_ROWS * from pingData where Id = ($_GET['device'])";

[DimitarParticipant]

Hello kathys2151,

From the provided code, it is not very clear if it is for the grid in the first or second tab.

Note, however, that the initTabContent callback should be set to a function, i.e. initTabContent: displayPingData, not the result of a function (initTabContent: displayPingData()). Please check out the demo Integration with other widgets, which shows how to correctly use initTabContent.

As for passing the deviceId, it can be done by setting the pingDataSource data property.

Best Regards,
Dimitar

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

[kathys2151Participant]

The grid is for the second tab.

I have been trying to set the deviceId in the data property with no luck. Shouldn’t the deviceId be passed already as it is defined as one of the data fields? I’ve tried setting up data as deviceId.val() with no luck.

[kathys2151Participant]

I just thought of an easier way to say it. What I am trying to do is send the deviceId for the current row to php in the data parameter. What I am doing now is:

function displayPingData() {
             var pingDataSource =
            {
                 datatype: "json",              
                 datafields: [
                   { name: 'deviceId', type: 'string', sortable: 'true'},               
                    { name: 'args', type: 'string', sortable: 'true' },
                    { name: 'pingTime', type: 'string', sortable: 'true' },                   
                    { name: 'starttime', type: 'string', sortable: 'true' })                                                                         
                ],
				url: 'getPingData.php',	
               ajaxSelectOptions: {
                     data: {
                        data: function() {
                             var rowId = $("#pingDataGrid").jqGrid('getGridParam', 'selrow');
                             var rowData = $("pingDataGrid").jqGrid.getRowData(rowId);
                             var deviceId = rowData[deviceId'];
                     }
                }

But this seems a bit convoluted to me. Is there an easier way to pass the deviceId from the main grid to php to load the ping data (which is a grid in a tab?)

[DimitarParticipant]

Hello kathys2151,

Are you using jqxGrid (our product) or jqGrid (a third-party product)? These controls have different APIs and we cannot assist you if you are using the latter.

Best Regards,
Dimitar

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

[kathys2151Participant]

Using your jqxGrid – left the “x” out – sorry. and I think I grabbed google data from the jqGrid plugin by mistake. Again, my apologies. I have a jqxGrid with two tabs. When I click the tab, I want to grab the deviceId from the main grid, and use it to populate the tab with my ping data. Can’t figure out how to pass the value of the current deviceId from the grid to php .

[DimitarParticipant]

Hi kathys2151,

In that case, I think this should work:

function displayPingData() {
    var rowIndex = $('#pingDataGrid').jqxGrid('getselectedrowindex');
    var rowId = $('#pingDataGrid').jqxGrid('getrowid', rowIndex);
    var rowData = $('#pingDataGrid').jqxGrid('getrowdata', rowIndex);

    var pingDataSource = {
            datatype: "json",
            datafields: [{
                name: 'deviceId',
                type: 'string',
                sortable: 'true'
            }, {
                name: 'args',
                type: 'string',
                sortable: 'true'
            }, {
                name: 'pingTime',
                type: 'string',
                sortable: 'true'
            }, {
                name: 'starttime',
                type: 'string',
                sortable: 'true'
            })
        ],
        url: 'getPingData.php',
        data: {
            rowId: rowId,
            rowData: rowData
        }
...

Best Regards,
Dimitar

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

[Author]

Posts