jqxgrid in jqxwindow – data not showing

[kathylParticipant]

I have a grid that displays data from a mysql db. One of the columns is set up so that when the user clicks on that column, a jqxwindow pops up, and additional data is loaded. The first grid is populated fine. Here is how the column is set up for the user to click on:

var notesRenderer = function (row, datafield, value) {
   return '<img style="margin-left: 8px; margin-top: 5px;" onClick="viewNotes()" src="../../images/' + value + '"/>';
}

var viewNotes = function(event) {
var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
	var value = $("#jqxgrid").jqxGrid('getcellvalue', row, 'deviceId');	
	$.ajax({
		type: "GET",
		url: 'getNotesData.php',
			data: {deviceId: value },
			dataType: "json",
			success: function(data){  
			        $('#notesHeader').show();
				$('#notesHeader').show();					
				$("#notesWindow").jqxWindow('open');
			//	$("#notesGrid").jqxGrid(source, 'data');
       			        $('#notesGrid').jqxGrid(data);
			},
		    error : function(xhr, status){
		        console.log(status);
		    }	
		});
	}

getNotesData.php gets the data from the db correct – I see the data returned in Firebug. The jqxWindow is displayed and the jqxgrid column headers are shown, but no data.

	$("#notesWindow ").jqxWindow({ height: 400, width: 600, title: 'Notes', isModal: true,
		showCloseButton: true, autoOpen: false, resizable: true, draggable: true, theme: theme 
	});

And here is my grid:
` $(“#notesGrid”).jqxGrid({
source: notesDataAdapter,
theme: theme,
columns: [
{ text: ‘NotesId’, datafield: ‘notesId’, hidden: true },
{ text: ‘deviceId’, datafield: ‘deviceId’, hidden: true },
{ text: ‘Note’, datafield: ‘note’, width: ‘80%’ },
{ text: ‘Date’, datafield: ‘date’, width: ‘20%’, datafield: ‘date’)
]
});`

Can you see why data is not being loaded into the grid? Thanks-

[HristoParticipant]

Hello kathyl,

This $('#notesGrid').jqxGrid(data); row is not correct.
Could you provide us more detailed code for better analyze.
Try to replace with this:

success: function(data){  
		$('#notesHeader').show();
		$('#notesHeader').show();
		$("#notesWindow").jqxWindow('open');
			//	$("#notesGrid").jqxGrid(source, 'data');
        	source.localdata = data;
		notesDataAdapter.dataBind();
		$('#notesGrid').jqxGrid('updatebounddata');
	},

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[kathylParticipant]

Sure Hristo. The above did not work – the jqxwindow displays, but same result – JSON data shows up in Firebug, but not in the window. Here is more code:

	/* notes stuff ********************/
	var notesWindowSource =
	{
		datatype: "json",              
		datafields: [
			{ name: 'noteId', type: 'string'}, 
			{ name: 'deviceId', type: 'string' },        
			{ name: 'note', type: 'string' },
			{ name: 'dateOfNote', type: 'string', }  
		],
//		id: 'deviceId',
		editable: true,
		cache: false,
       	/*addrow: function (rowid, rowdata, position, commit) {
            // synchronize with the server - send insert command
            // need to check if all cells are filled
			var data = "insert=true&" + $.param(rowdata);
			   $.ajax({
                    dataType: 'json',
                    url: 'processNotesData.php',
                    data: data,
					cache: false,
                    success: function (data, status, xhr) {
					   // insert command is executed.
						commit(true);
						$("notesGrid").trigger("reloadGrid");
					},
					error: function(jqXHR, textStatus, errorThrown)
					{
						commit(false);
					}
				});							
	    },*/
               deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
            		   var data = "delete=true&" + $.param({noteId: rowid});
            		   // need to check if all fields are filled in
				       $.ajax({
                            dataType: 'json',
                            url: 'processNotesData.php',
							cache: false,
                            data: data,
                            success: function (data, status, xhr) {
							   // delete command is executed.
							   commit(true);
							},
							error: function(jqXHR, textStatus, errorThrown)
							{
								commit(false);
							}
						});							
			   },
                updaterow: function (rowid, rowdata, commit) {
			        // synchronize with the server - send update command
            		   var data = "update=true&" + $.param(rowdata);
					      $.ajax({
                            dataType: 'json',
                            url: 'processNotesData.php',
							cache: false,
                            data: data,
                            success: function (data, status, xhr) {
							  // update command is executed.
						 	  commit(true);
							},
							error: function(jqXHR, textStatus, errorThrown)
							{
							  commit(false);
							}							
						});		
                }
           };
	    /* notesWindowSource */ 
	    
  var notesDataAdapter = new $.jqx.dataAdapter(notesWindowSource, {
			loadError: function(xhr, status, error)
			{
				alert("error is " + error);
			}
    });

var viewNotes = function(event) {
		var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
		var value = $("#jqxgrid").jqxGrid('getcellvalue', row, 'deviceId');	
		$.ajax({
			type: "GET",
			url: 'getNotesData.php',
			data: {deviceId: value },
			dataType: "json",
			success: function(data){  					
				$('#notesHeader').show();
				$("#notesWindow").jqxWindow('open');
				notesWindowSource.localdata=data;
				notesDataAdapter.dataBind();
				$('#notesGrid').jqxGrid('updatebounddata');
				},
		    error : function(status){
		        console.log(status);
		    }	
		});
	}	

[kathylParticipant]

Update: If I read JSON from a file, or a variable (see below), the data loads fine, so it must be how I am loading the data into the grid. Here is what worked:

var sampleJson = '[{"TotalRows":1,"Rows":[{"noteId":2,"deviceId":2,"note":"This note is localdata","dateOfNote":"5/\/12\/15"}]}]';
	
var notesWindowSource =
	{
		datatype: "json",              
		datafields: [
			{ name: 'noteId', type: 'string'}, 
			{ name: 'deviceId', type: 'string' },        
			{ name: 'note', type: 'string' },
			{ name: 'dateOfNote', type: 'string' }  
		],
		root: 'Rows',
	        localdata: sampleJson,
		editable: true,
		async: false,
		};

[crissiParticipant]

Hello kathyl,

Well, I’m not an expert, but in the code you posted on the 18., isn’t there the URL missing?

var notesWindowSource =
{
datatype: “json”,
datafields: [
{ name: ‘noteId’, type: ‘string’},
{ name: ‘deviceId’, type: ‘string’ },
{ name: ‘note’, type: ‘string’ },
{ name: ‘dateOfNote’, type: ‘string’, }
],
// id: ‘deviceId’,
editable: true,
cache: false,

You need an URL in this section where to get this JSON from.
Something like
url: ‘notesWindowSource.php’

[Author]

Posts