CODEWITHSUNDEEP
javascriptjquerydynamicjqgridformat
Masaniello
Masaniello

Reputation: 15

JQGrid with dynamic column: cellattr does not work

I have built my JQGrid table with dynamic column in this way (ajax call) :

$.ajax(
{
    type: "POST",
    url: "Scripts/GetSummaryInformation.php",
    data: { domain: "<?php echo $domain; ?>", etc. },
    dataType: "json",
    success: function(result)
    {
        var colD = result.gridModel;
        var colN = result.colNames;
        var colM = result.colModel;
        var colSpan = result.colSpan;

        jQuery("#FinalRatingList<?php echo $domain; ?><?php echo $companyID; ?>").jqGrid({
             jsonReader : { repeatitems: false, root:"dataset", cell: "cell", id: "0" },
             url: 'Scripts/GetSummaryInformation.php',
             datatype: 'json',
             mtype: 'POST',
             postData : { domain: "<?php echo $domain; ?>", etc.},
        datastr : colD,
        colNames:colN,
        colModel :colM,
        height: 'auto',
        pager: jQuery('#FinalRatingListPager'),
        caption:"Final Rating",
        loadComplete: function(data){
            console.info("FinalRatingList Success");
            notyMsg ("loadComplete", "info");
    },
...

and it works fine :)

When I create a column in the PHP file like using the cellattr

$response->colModel[$colMod++] = array ('name'=>'DIR'.$projectName, 'index'=>'DIR'.$projectName, 'width'=>'40', "cellattr"=>"rowSetting" );

there is absolutely no effect at all. Even when I put code directly in the cellattr like this

"cellattr"=>"function( rowId, value, rowObject, colModel, arrData) { return ' style=\"background:orange\"'}" );

Does anyone have faced or know the solution to this problem?

Thanks in advance for your collaboration

UPDATE

Thanks Oleg. It worked greatly for cellattr and for template (which is a really good advice).

For those who are interested here is the code:

var rowSetting = function (rowId, val, rawObject, cm) {
    return 'style="background-color: orange;';
};
var cellattrMapping = {
    "rowTemplate": rowTemplate
};

var rowTemplate = {
    width:120,
    cellattr: rowSetting
};

AJAX CALL

success: function(result)
{
     ...
     for (i=0; i<colM.length; i++) {
         cm = colM[i];
         if (cm.hasOwnProperty("template") && cellattrMapping.hasOwnProperty(cm.template))
         {
             cm.template = cellattrMapping[cm.template];
         }

Upvotes: 1

Views: 4555

Answers (1)

Oleg
Oleg

Reputation: 221997

It seems that what you do looks like you set cellattr to string value cellattr: "rowSetting" instead of initialysing it to the pointer of function. The problem is there are some restrictions in the data which you can send as JSON. It supports strings, numbers, boolean, arrays and objects, but you can's send functions as part of JSON data.

One can suggest many workarounds for the problem. For example you can create JavaScript code with some cellattr functions which you use. You can place all the cellattr functions which you need in one object: your custom cellattr "string to functions mapping". Inside of success callback you can examine result.colModel items for cellattr property. If you found cellattr property you should just replace the string value to the corresponding function reference.

In the old answer I described more detailed very close solution. You can use the same approach for cellattr.

More better way in my opinion would be to use template attribute of colModel more active (see the old answer). You will have the same problem as before, but you could provide common templates which you use in different grids and post first string values as the value of template attribute of colModel. Then you could replace the value to JavaScript object which hold all required implementation details. The main advantage of usage column templates is sharing common code over multiple grids. The information in colModel become smaller and more readable. The templates could be easy modified.

Upvotes: 1

Related Questions