jqxgrid: How to apply some properties such as renderer… for dynamic columns

[BNKParticipant]

Hi All! I currently use jQWidgets v3.9.1 in my project
I have succesfully used it for dynamic columns as below:

...
dataAdapter = new $.jqx.dataAdapter(source, {
	formatData: function (data) {                    
		return JSON.stringify(postdata);
	},
	downloadComplete: function (data, status, xhr) {
		// dynamic columns
		var json = JSON.stringify(data);
		var obj = $.parseJSON(json);
		for (var i in obj[0]) {                        
			datafields.push({ name: i });
			columns.push({ text: i, datafield: i });
		}
		...                    
	},
	loadError: function (xhr, status, error) {
		alert(xhr.status + ' ' + status + ' ' + source.data);
	}
}); 

...
$("#jqxgrid").jqxGrid(
{
	...
	source: dataAdapter,
	...
	columns: columns                
});

However, I don’t know how to apply some properties such as pinned: true, filtertype: 'date', renderer: columnrenderer, cellsalign: 'center', cellsformat: 'dd/MM/yyyy' for some of the columns.

Could you please tell me how to do that? Thanks in advance.

[HristoParticipant]

Hello BNK,

You could use setcolumnproperty property from the Grid.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[BNKParticipant]

Hi Hristo!

Thank you, it works!
However, if I put $('#jqxgrid').jqxGrid('setcolumnproperty'... lines inside $("#jqxgrid").bind('bindingcomplete', function () {...}); then the grid takes longer time to display data. Any suggestion?

[BNKParticipant]

Hi Hristo!

One more thing, $('#jqxgrid').jqxGrid('setcolumnproperty', 'EndDate', 'cellsformat', 'dd/MM/yyyy'); is not working, it displays 2016-05-07T00:00:00

UPDATE: I can fix this issue by using datafields.push({ name: i, type: (i === 'EndDate')? 'date' : 'string' });

[BNKParticipant]

Hi All!

If using $('#jqxgrid').jqxGrid('setcolumnproperty'… lines inside $("#jqxgrid").bind('bindingcomplete', function () {...});, my app got poor performance at first run (ajax requests later is faster). So I have finally solved this performance issue by using the above

dataAdapter = new $.jqx.dataAdapter(source, {
	formatData: function (data) {                    
		return JSON.stringify(postdata);
	},
	downloadComplete: function (data, status, xhr) {                    
		// dynamic columns                    
		var json = JSON.stringify(data);
		var obj = $.parseJSON(json);
		for (var i in obj[0]) {                        			
			datafields.push({ name: i, type: (i === 'EndDate')? 'date' : 'string' });
			columns.push({
				text: i, datafield: i,
				filtertype: (i === 'EndDate') ? 'date' : 'string',
				pinned: ($.inArray(i, ['Code', 'Desc', 'Status', 'Date']) !== -1) ? true : false,
				cellsformat: (i === 'EndDate') ? 'dd/MM/yyyy' : '',
			});			                     
		}                                    
		if (!source.totalRecords) {
			source.totalRecords = data.length;                        
		}
	},
	loadError: function (xhr, status, error) {
		alert(xhr.status + ' ' + status + ' ' + source.data);
	}
});

Thankyou!

[Author]

Posts