Problem with cellsrenderer and renderer

[svedParticipant]

Hello, I’m trying to set cellsrenderer and renderer on one column in my grid, but whitout success. I’m using php code to generate dynamic data for the columns.

Here is simple example of the code:

php page

$(document).ready(function () {
loadGrid({"url": "'.$url.'", "colNames": '.json_encode($colNames).', "rowData": '.json_encode($rowData).'})
});

where $rowData is:
[{ "text": "id" , "datafield": "id", "width": "140" ,"cellsrenderer": "imagerenderer", "pinned": "1" },{ "text": "product_name" , "datafield": "product_name", "width": "140" , "pinned": "1" },{ "text": "category_1" , "datafield": "category_1", "width": "140" , "pinned": "1" },{ "text": "returns_rate" , "datafield": "returns_rate", "width": "140" , "pinned": "0" },{ "text": "returned_order_value" , "datafield": "returned_order_value", "width": "140" , "pinned": "0" }]

the grid.js code include

var loadGrid = function ( o) {
    
    var cellsrenderer = function (row, column, value) {
        return value;
    }
    
    var imagerenderer = function (row, datafield, value) {
        return value;
    }
    
    var url = o.url.replace(/&/g, '&');
    var colNames = jQuery.parseJSON(o.colNames);
    var rowData = jQuery.parseJSON(o.rowData);

	var theme = 'darkness';
	var source =
	{
		datatype: "json",
		datafields: colNames,
		url: url,
		filter: function()
		{
		    $("#jqxgrid").jqxGrid('updatebounddata');
		},
		sort: function()
		{
		    $("#jqxgrid").jqxGrid('updatebounddata');
		},
		root: 'Rows',
		beforeprocessing: function(data)
		{		
		    if (data != null)
			{
		        source.totalrecords = data[0].TotalRows;					
			}
		}
	};		
	var dataadapter = new $.jqx.dataAdapter(source, {
		loadError: function(xhr, status, error)
		{
			alert(error);
		}
	});
	$("#jqxgrid").jqxGrid({
		source: dataadapter,
		theme: theme,
		filterable: true,
		sortable: true,
		autoheight: true,
		pageable: true,
		width: 955
		columnsresize: true,
		columnsreorder: true,
		columns: rowData,
                pagenum: 0,
                pagesize: 20,
                virtualmode: true
    });

}

I tried couple of ways to set cellsrenderer, but everything ends with error in JS:
TypeError: f.cellsrenderer is not a function
or
TypeError: this.renderer is not a function

[Peter StoevKeymaster]

Hi Sved,

In the provided code, you set the cellsrenderer and renderer functions as strings, Example: “imagerenderer”. This will not work because the expected value is a function, not the function’s name.

Best Regards,
Peter Stoev

jQwidgets Team
http://www.jqwidgets.com

[svedParticipant]

Thanks, I’ll post working solution later

[svedParticipant]

okay, the following line:

var rowData = jQuery.parseJSON(o.rowData);

should be replaced by:

    var rowData = JSON.parse(o.rowData, function(key, value){
        if (key=="cellsrenderer") //if "thedate" property
            return imagerenderer
           else
            return value
           });

Now I can call function imagerender

[Author]

Posts