Functions of cellsrenderer

[zeroParticipant]

cellsrenderer: function(row, column, value, defaulthtml, columnproperties, rowdata){
	return $(defaulthtml).html(value)[0].outerHTML;
}

I would like to know the role of this code or the functionality of the cellsrenderer.

[TodorParticipant]

Hello zero,

cellsrenderer – sets a custom rendering function. The cellsrenderer function is called when a cell in the column is rendered. You can use it to override the built-in cells rendering. The cellsRenderer function has 6 parameters passed by jqxGrid – row index, data field, cell value, defaultHtml string that is rendered by the grid, column’s settings and the entire row’s data as JSON object.

Example:

{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
      cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '' + value + '';
                }
                else {
                    return '' + value + '';
                }
            }   
}

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[AkhilParticipant]

Hi,

I have one cells rendering function as shown below
text: ‘Sync’, width: 250, height:150, align: ‘center’, editable: false, sortable: false, datafield:’Sync’,
cellsrenderer: function (row, column, value) {

var rowData = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, row);
var selectid = ‘sync’ + row
if (rowData.Sync == true) {

return ‘<div style=”text-align: center;”><input style=”text-align:center” type=”checkbox” checked id=’ + selectid + ‘></div>’;
}
else {
return ‘<div style=”text-align: center;”><input style=”text-align:center” type=”checkbox” id=’ + selectid + ‘></div>’;
}
}

})
I have 3 rows and for first row,rowdata variable is correct and from second row row data is incorrect and in cells rendering function value is shown as empty instead of true.can you please suggest what is responsible for that behaviour

[HristoParticipant]

Hello Akhil,

The rowData should return the record that is in that row.
Another option that you could use is the sixth parameter of the cellsrenderer callback.
Please, take a look at this example:

cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, data) {
	var selectid = "sync" + row;	
	if (data.Sync === true) {
		return "" + value + "";
	}
	else {
		return "" + value + "";
	}
}

Could you clarify it, if this does not help?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts