records value of dataAdapter with binding CSV file

[nyorozoParticipant]

Hello,

I tried to make nested grid with refference of your sample.
But there is no data in nested grid.
I noticed that records value of dataAdapter is NULL.
How to get proper records in below case.

———–
var detailError = new $.jqx.dataAdapter(errordetail_Source, {autoBind: true});
details = detailError.records; <==== NULL
———–

=== Source ===============

$(function() {

	var errorlist_url = 'data/ERR_Error_List10.csv';
	var errorlist_source =
	{
		datatype : "csv",

		datafields : [
			{ name: 'Repaired', type: 'bool'},
			{ name: 'Error_Leve', type: 'string'},
			{ name: 'Date', type: 'string'},
			{ name: 'Error_Code', type: 'string'},
			{ name: 'Message', type: 'string'}
		],
		id: 'Error_Code',
		url : errorlist_url
	};

	var dataAdapter = new $.jqx.dataAdapter(errorlist_source);
	
	var errordetail_url = 'data/ERR_Error_List.csv';
	var errordetail_Source =
	{
		datatype : "csv",

		datafields : [
			{ name: 'Repaired', type: 'bool'},
			{ name: 'Error_Leve', type: 'string'},
			{ name: 'Date', type: 'string'},
			{ name: 'Error_Code', type: 'string'},
			{ name: 'Message', type: 'string'}
		],
		url : errordetail_url
	};

	var detailError = new $.jqx.dataAdapter(errordetail_Source, {autoBind: true});
	
	details = detailError.records;

	var nestedGrids = new Array();
	
	var initrowdetails = function(index, parentElement, gridElement, record) {
		
		var id = record.uid.toString();
		var grid = $($(parentElement).children()[0]);
		nestedGrids[index] = grid;
		var filtergroup = new $.jqx.filter();
		var filter_or_operator = 1;
		var filtervalue = id;
		var filtercondition = 'equal';
		var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
				
		var detailsbyid = [];
		
		for (var m = 0; m < details.length; m++) {
			alert(details[m]["Error_Code"]);
			var result = filter.evaluate(details[m]["Error_Code"]);
			if (result)  detailsbyid.push(details[m]);
		}
		
		
	var errordetail_source =
	{
		datafields : [
			{ name: 'Repaired', type: 'bool'},
			{ name: 'Error_Leve', type: 'string'},
			{ name: 'Date', type: 'string'},
			{ name: 'Error_Code', type: 'string'},
			{ name: 'Message', type: 'string'}
		],
		localdata : detailsbyid
	}
		
		
	var nestedGridAdapter = new $.jqx.dataAdapter(errordetail_source);	

	if (grid != null) {
		grid.jqxGrid({
		 	theme : "olympus",
			source: nestedGridAdapter, width:1050, height:200,
 	 		columns : [
 	 			{ text : '', datafield : 'Repaired', columntype: 'checkbox', align : 'center', pinned: true, width : 48 },
 	 			{ text : 'Level', editable: false, datafield : 'Error_Leve', align : 'center', width : 80 },
 	 			{ text : 'Occured Date', editable: false, datafield : 'Date', align : 'center', width : 200 },
 	 			{ text : 'Error Code', editable: false, datafield : 'Error_Code', align : 'center', width : 100 },
 	 			{ text : 'Message', editable: false, datafield : 'Message', align : 'center', width : 600 }
 			]
 		});
 	}
 	}	
	

	$("#ERR_Error_List").jqxGrid( {
 	 	theme : "olympus",
 	 	source : dataAdapter,
 	 	width : "99%",
 	 	height : 450,
	 	editable : true, 
 	 	columnsresize : true,
	 	sortable: true,
 	 	altrows: true,
	 	columnsreorder: true,
	 	showsortcolumnbackground: false,
	 	showpinnedcolumnbackground: false,
	 	pagesize : 9999,
	 	pagesizeoptions : ['20', '50', '100', '200', '500', 'All'],
	 	enabletooltips: true,
	 	pageable: true,
	 	rowdetails: true,
	 	initrowdetails: initrowdetails,
 	 	filterable: true,
 	 	filtermode: 'excell',
 	 	rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight:220, rowdetailshidden: true }, 
 	 	columns : [
 	 		{ text : '', datafield : 'Repaired', columntype: 'checkbox', align : 'center', pinned: true, width : 48 },
 	 		{ text : 'Level', editable: false, datafield : 'Error_Leve', align : 'center', width : 80 },
 	 		{ text : 'Error Code', editable: false, datafield : 'Error_Code', align : 'center', width : 100 },
 	 		{ text : 'Message', editable: false, datafield : 'Message', align : 'center', width : 600 },
 	 		{ text : '', editable: false, align : 'center', width : 240 }
 	 	]

	});
	
	$("#COM_Error_List").on("pagesizechanged", function(event)
	{
		var args = event.args;
		var pagesize = args.pagesize;
		
		if (pagesize == 10) $("#COM_Error_List").jqxGrid( {pagesize: 500} );
	});
		

});

$(function () {
 	$(".OKCancel").jqxButton({ 
		theme : "olympus",
		height : "25px",
		width : "80px"
 	});
});

[Peter StoevKeymaster]

Hi nyorozo,

When you try to use the records property, your data binding is not yet completed because you bind to your data source through AJAX. To ensure that the records property is filled out with data, use the loadComplete callback of the dataAdapter or set async: false of your dataAdapter’s source object.

Best Regards,
Peter Stoev

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

[nyorozoParticipant]

Hello Peter-san,

Thank you very much for your answer.
By adding async:false, I can get records correctly.

I have addtional 2 questiorns related nested grid.
1) How to access to child grid column from parent column render function
2) How to get value from parent cell from child render function

What I want to do is that by checking (non-checking) checkbox in parent column, get all child checkbox checked (non-checked).

Naoto

[Peter StoevKeymaster]

Hi nyorozo,

The Nested Grid is a separate Grid instance created in the initrowdetails callback function. This means that if you want to accecss information about that Nested Grid, you will have to save its ID in some external variable or Array created by you and then you can access it as a normal Grid instance $(“#myGrid”).jqxGrid({propertyA: valueA});

Best Regards,
Peter Stoev

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

[nyorozoParticipant]

Hello Peter-san,

Thank you very much. I will try the way you adviced.

Thanks,
Naoto

[Author]

Posts