Custom Cell Formatting?

[stollarParticipant]

Is it possible to write custom cell formatters?
For example my JSON data contains {"FIRST_NAME":"Richard","LAST_NAME":"Stollar"} but I wans to show in a grid cell “Richard Stollar”. Another framework I have used allows the creation of custom formatters like this:

 {datafield:'NAME', width:200,text:'Name',
     formatter: function(value,row,index){return "<b>" + row.LAST_NAME + "</b>, " + row.FIRST_NAME;}
 }

where row is the single row from the JSON data/

[stollarParticipant]

I found a solution and will share with everybody. If there’s a better way then please let me know. Inside beforeprocessing I save the data in source with source.data=data; then I added a cellsrendered.

var source = {
    datatype: "json",
    datafields: [
    { name: 'ED', type: 'string'}, 
    { name: 'CUST_NUM', type: 'string' },
    { name: 'NAME', type: 'string' }, 
    { name: 'COMPANY', type: 'string' }, 
    { name: 'BILL_ADDR1', type: 'string' }, 
    { name: 'CITY', type: 'string' }, 
    { name: 'STATE', type: 'string' }, 
    { name: 'POST_CODE', type: 'string' }
    ],
    cache: false,
    url: 'customer_json.jsp',
    filter: function () {
        $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
    },
    sort: function () {
        $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
    },
    beforeprocessing: function (data) {
        if (data != null && data.length > 0) {
            source.data=data;
            source.totalrecords = data[0].totalRecords;
        }
    }
};

var nameRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
    return "<b>" + source.data[row].LAST_NAME + "</b>, " + source.data[row].FIRST_NAME;
}

$("#customers").jqxGrid(
{
    width: 1070,
    source: source,
    columnsresize: true,
    pageable: true,
    pagesize: 25, 
    pagesizeoptions: ['10', '25', '50'],
    virtualmode: true,
    rendergridrows: function (obj) {
        return obj.data;
    },
    columns: [
        { text: 'Edit', datafield: 'ED', width: 60 },
        { text: 'ID', datafield: 'CUST_NUM', width: 80, cellsalign: 'left' },
        { text: 'Name', datafield: 'NAME', width: 190, cellsalign: 'left', cellsrenderer: nameRenderer },
        { text: 'Company', datafield: 'COMPANY', width: 100, cellsalign: 'left' },
        { text: 'Address', datafield: 'BILL_ADDR1', width: 100, cellsalign: 'left' },
        { text: 'City', datafield: 'CITY', width: 100, cellsalign: 'left' },
        { text: 'State', datafield: 'STATE', width: 100, cellsalign: 'left' },
        { text: 'Postal Code', datafield: 'POST_CODE', width: 100, cellsalign: 'left' }
    ]
});

[stollarParticipant]

That didn’t quite work out as I had expected. When I advance to the next page then I need to know the recordstartindex of the grid because the row number is the row number from the data-set rather than the displayed row number.

How can I get the recordstartindex?

[HristoParticipant]

Hello stollar,

Thank you for using our product. We have theme about this:
http://www.jqwidgets.com/community/topic/recordstartindex-and-recordendindex/#post-10749
And one workaround for current issue in this theme:
http://www.jqwidgets.com/community/topic/grid-recordstartindex/#post-80342

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts