can't get foreign key columns to work

[omesloParticipant]

I must be overlooking something obvious but I cannot get the following example to work. I am experimenting with a simple issue tracker where ‘issuesAdapter’ is rendered in a grid and it’s column ‘status’ should come from ‘statusAdapter’.
My goal is to display the ‘name’ field from ‘statusAdapter’ in that column. For some reason it shows only the id, of which I’m not even sure whether it comes from issuesAdapter or statusAdapter.
So, in the grid I am expecting for column ‘status’:
new
closed
assigned

And I am seeing:

2
6
3

Here’s the code. I used the foreign key example in the provided demo’s as a starting point.

$(document).ready(function () {
	var theme = getDemoTheme();
	var statusSource =
		{
			datatype: "json",
			datafields: [
				{ name: 'id', type: 'string'},
				{ name: 'sortorder', type: 'string'},
				{ name: 'name', type: 'string'}
			],
			url: 'data_lookup_status.php',
			cache: false
	};
	
	var statusAdapter = new $.jqx.dataAdapter(statusSource, {
		autoBind: true
	});
         
	var issuesSource =
		{
			datatype: "json",
			datafields: [
				{ name: 'id', type: 'string'},
				{ name: 'summary', type: 'string'},
				{ name: 'status', value: 'status', values: { source: statusAdapter.records, value: 'id', name: 'name'}, type: 'string' },
				{ name: 'priority', type: 'string'},
				{ name: 'severity', type: 'string'},
				{ name: 'assignedTo', type: 'string'},				
				{ name: 'issuedBy', type: 'string'},
				{ name: 'datetimeFound', type: 'string'}
			],
			url: 'grid_data_issues.php',
			cache: false
		};
	
	var issuesAdapter = new $.jqx.dataAdapter(issuesSource);
			
	$("#jqxgrid").jqxGrid(
		{
		source: issuesAdapter,
		width: 1250,
		theme: theme,
		columns: [
			{ text: 'Id', datafield: 'id', width: 45},
			{ text: 'Summary', datafield: 'summary', width: 500 },
			{ text: 'Status', datafield: 'status' },
			{ text: 'Priority', datafield: 'priority' },
			{ text: 'Severity', datafield: 'severity' },
			{ text: 'assignedTo', datafield: 'assignedTo', displayfield: 'assignedTo' },
			{ text: 'issuedBy', datafield: 'issuedBy' },
			{ text: 'datetimeFound', datafield: 'datetimeFound' }
		]
		});
		
		$("#jqxgrid_status").jqxGrid(
		{
		source: statusAdapter,
		width: 1250,
		theme: theme,
		autoheight: true,
		columns: [
			{ text: 'Id', datafield: 'id', width: 45},
			{ text: 'Sortorder', datafield: 'sortorder' },
			{ text: 'Name', datafield: 'name' }
		]
		});
	});

Any help would be greatly appreciated

[Peter StoevKeymaster]

Hi,

The problem is that the source of the values member expects an Array of records. However, your binding is asynchronous so that Array will be empty when you initialize the source. As a solution, you should have: statusSource.async = false;

Best Regards,
Peter Stoev

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

[omesloParticipant]

That fixed the problem. Thank you very much!

[Author]

Posts