how to set custom title for jqgrid cell when grid data binding is dynamic

Question

I have a jqgrid with dynamic data binding, and required to set a custom title for each cell. I applied the method described in the solution for JQGrid with dynamic column: cellattr does not work

but it does not work. My code is as follows.

The action method that sets the colModel:

var result = new { 
    Json = new { 
        colNames = new[] { "T1", "T2" }, 
        colModels = new[] { 
            new { index = "T1", label = "T1", name = "T1", 
                width = 100, cellattr = "customTitle", 
                editable = true, strtooltip = "A0" }, 
            new { index = "T2", label = "T2", name = "T2", 
                width = 100, cellattr = "customTitle", 
                editable = true, strtooltip = "A1" 
            } 
        }, 
        data = ......................

$.ajax({
    url: '/Client/PatientListing/GetTestData',
    type: 'POST',
    data: {},
    success: function (result) {
        var colModels = result.Json.colModels;
        var colNames = result.Json.colNames;
        var data = result.Json.data.options;
        jQuery.each(colModels, function (index, value) {
            debugger;
            cm = value;
            if (cm.hasOwnProperty("cellattr") &&
                functionsMapping.hasOwnProperty(cm.cellattr)) {
                cm.cellattr = functionsMapping[cm.cellattr];
            }
        });

        var functionsMapping = {
            "customTitle": function (rowId, val, rawObject) {
                return 'title="' + rawObject.T1 + ' (' + rawObject.T2 + ')"';
            }

        };

score 1 · Accepted Answer · answered Jan 12 '16 at 09:20

It seems to me that you want to returns JSON data from the server, which contains cellattr. It's possible if you use more recent version of jqGrid. You can defined custom string name, which you can use as values of cellattr callbacks in the following way.

$.jgrid = $.jgrid || {};
$.jgrid.cellattr = $.jgrid.cellattr || {};
$.extend(true, $.jgrid.cellattr, {
    customTitle: function (rowId, val, rawObject) {
        return 'title="' + rawObject.T1 + ' (' + rawObject.T2 + ')"';
    },
    customTitle2: function (rowId, val, rawObject) {
        return 'title="' + rawObject.T1 + ' [' + rawObject.T2 + ']"';
    }
});

Now you can use cellattr: "customTitle" and cellattr: "customTitle2" in the column definition.

By the way, free jqGrid support more parameters of cellattr. It has additional parameters cm and rdata. The parameter cm is the item of colModel which will be processed currently and the rdata is close to rawObject, but it's has always the same format with named properties. The problem is that rawObject used in cellattr, rowattr and custom formatters have exactly the same format like the input data. If you process XML input data, then the rawObject is an XML node. If you process JSON input with the data in the array form ["1", "2007-10-01", "test", "note", "200.00", "10.00", "true", "TN", "210.00"] instead of {id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" and you use loadonce: true additionally, than cellattr will have rawObject as array at the first processing of input data and as object with named properties at the later processing. It makes the logic of cellattr more complex.

Because of that free jqGrid introduced additional rdata parameter, which provides the data allays in object form. Free jqGrid is the fork of jqGrid, which I develop since Tony have changed the licence agreement of jqGrid and have renamed his product to Guriddo jqGrid JS (see here and here).

Below is the code fragment of the code

$.jgrid = $.jgrid || {};
$.jgrid.cellattr = $.jgrid.cellattr || {};
$.extend(true, $.jgrid.cellattr, {
    customTitle: function (rowId, cellValue, rawObject, cm, rdata) {
        if (cm.name === "name") {
            return 'title="' + rdata.amount + ' (' + rdata.note + ')"';
        } else {
            return 'title="' + rdata.amount + ' (' + rdata.name + "; " + rdata.note + ')"';
        }
    }
});

See the corresponding demo https://jsfiddle.net/OlegKi/mme1krLj/1/

how to set custom title for jqgrid cell when grid data binding is dynamic

1 Answers1