Grid inside Window

[internaut19Participant]

Hi,

I am having trouble getting the following code to work properly:

$('#button').jqxButton({ theme: 'energyblue' });

$('#jqxwindow_GridDetails').jqxWindow({
	resizable: false,  isModal: true, autoOpen: false, modalOpacity: 0.5
});

$('#button').on('click', function () {
	var selectedrowindexes = $('#Grid').jqxGrid('getselectedrowindexes');
	if (selectedrowindexes.length > 0){
		// returns the selected row's data.
		var rowindex = $('#Grid').jqxGrid('getselectedrowindex');
		var dataRecord = $('#Grid').jqxGrid('getrowdata', rowindex);								

		var source_GridDetails =
		{
			datatype: 'json',
			datafields: [
					{ name: 'cd_id', type: 'int'},
					{ name: 'track_name', type: 'string'},
					{ name: 'datetime', type: 'date', format: 'yyyy-MM-dd HH:mm:ss'}
			],
			id: 'cd_id',
			url: 'util_post.php?oferta_id=' + edit_dataRecord.info_id,
			root: 'Rows',
			cache: false,					
			filter: function()
			{
				// update the grid and send a request to the server.
				$('#GridDetails').jqxGrid('updatebounddata', 'filter');
			},
			beforeprocessing: function(data)
			{		
				source_GridDetails.totalrecords = data[0].TotalRows;
			}
		};

		var dataAdapter_GridDetails = new $.jqx.dataAdapter(source_GridDetails, {
			loadError: function (xhr, status, error) {
				alert('Error loading \"' + source_GridDetails.url + '\" : ' + error); 
			} 
		});

		//Initializing the demo
		$('#jqxwindow_GridDetails').jqxWindow({
			width: 'auto',
			height: 'auto',
			minWidth: 750,
			minHeight: 560,
			initContent: function () {
				$('#GridDetails').jqxGrid(
				{
					width: 750,
					height: 560,
					source: dataAdapter_GridDetails,
					pageable: true,
					pagesize: 20,
					columns: [
					   { text: 'Cd Id', dataField: 'cd_id', width: 250 },
					   { text: 'Track name', dataField: 'track_name', width: 250 },
					   { text: 'Date', dataField: 'datetime', width: 250 }
					]
				});
			}
		});
		$('#jqxwindow_GridDetails').jqxWindow('open');
	} else {
		$.noty({ text: 'No selection.', layout: 'top', theme : 'noty_theme_twitter', type: 'error', speed : 500, timeout: '1500', modal: true});
	}	
});

Basically, I have a grid that loads the initial information and I am interested in selecting a row in that grid and when I press the button to get the window to show up and in that window to load a new grid with more details. Using the above code I get a new window, I can see the grid but no info is being loaded, is like the adapter doesn’t get executed.

Thanks,
Chris.

[internaut19Participant]

For some reason, I cannot edit the above code and I noticed that there is an error in the code:

$('#button').jqxButton({ theme: 'energyblue' });

$('#jqxwindow_GridDetails').jqxWindow({
	resizable: false,  isModal: true, autoOpen: false, modalOpacity: 0.5
});

$('#button').on('click', function () {
	var selectedrowindexes = $('#Grid').jqxGrid('getselectedrowindexes');
	if (selectedrowindexes.length > 0){
		// returns the selected row's data.
		var rowindex = $('#Grid').jqxGrid('getselectedrowindex');
		var dataRecord = $('#Grid').jqxGrid('getrowdata', rowindex);								

		var source_GridDetails =
		{
			datatype: 'json',
			datafields: [
					{ name: 'cd_id', type: 'int'},
					{ name: 'track_name', type: 'string'},
					{ name: 'datetime', type: 'date', format: 'yyyy-MM-dd HH:mm:ss'}
			],
			id: 'cd_id',
			url: 'util_post.php?id=' + dataRecord.info_id,
			root: 'Rows',
			cache: false,					
			filter: function()
			{
				// update the grid and send a request to the server.
				$('#GridDetails').jqxGrid('updatebounddata', 'filter');
			},
			beforeprocessing: function(data)
			{		
				source_GridDetails.totalrecords = data[0].TotalRows;
			}
		};

		var dataAdapter_GridDetails = new $.jqx.dataAdapter(source_GridDetails, {
			loadError: function (xhr, status, error) {
				alert('Error loading \"' + source_GridDetails.url + '\" : ' + error); 
			} 
		});

		//Initializing the demo
		$('#jqxwindow_GridDetails').jqxWindow({
			width: 'auto',
			height: 'auto',
			minWidth: 750,
			minHeight: 560,
			initContent: function () {
				$('#GridDetails').jqxGrid(
				{
					width: 750,
					height: 560,
					source: dataAdapter_GridDetails,
					pageable: true,
					pagesize: 20,
					columns: [
					   { text: 'Cd Id', dataField: 'cd_id', width: 250 },
					   { text: 'Track name', dataField: 'track_name', width: 250 },
					   { text: 'Date', dataField: 'datetime', width: 250 }
					]
				});
			}
		});
		$('#jqxwindow_GridDetails').jqxWindow('open');
	} else {
		$.noty({ text: 'No selection.', layout: 'top', theme : 'noty_theme_twitter', type: 'error', speed : 500, timeout: '1500', modal: true});
	}	
});

[ivailoParticipant]

Hi internaut19,

Your presented code looks correct.
The behavior also can be produced when your server script is not returned correct data.
Please check the console about the returned result and errors.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts