jQuery UI Widgets Forums Grid Functions of cellsrenderer

This topic contains 3 replies, has 4 voices, and was last updated by  Hristo 4 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Functions of cellsrenderer #105778

    zero
    Participant
    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.

    Functions of cellsrenderer #105788

    Todor
    Participant

    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

    Functions of cellsrenderer #108012

    Akhil
    Participant

    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

    Functions of cellsrenderer #108033

    Hristo
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.