free-jqgrid: setCell to add css class to a cell

Question

Need a help on this please... I just now upgraded to free-jqgrid 4.13.6. Earlier I was using jqgrid 4.3

In jqgrid 4.3 I was using and it was adding CSS class red-highlight to a particular cell

grid.jqGrid('setCell', row_id, 'status', '', 'red-highlight');

But after migrating to free-jqgrid 4.13.6, this is not working anyomre.

function validateOnSubmit() {
    var grid = $("#mySearchResultGridTable");
    var obj = $('#mySearchResultGridTable').jqGrid ('getRowData');
    $.each(obj, function(key, value) {
        var row_id = key+1;

        if ($("tr#jqg" + thisRow).attr("editable") === "1") {
            selectedStatus = $("#jqg"+ row_id +"_status").val();
        }
        if(selectedStatus == '' || selectedStatus == 'Select') {
        grid.jqGrid('setCell', row_id, 'status', '', 'red-highlight');
    });
}


$grid.jqGrid({
    datatype: 'json',
    url: 'myUrl.do?custId=' + custId,
    mtype: 'GET',
    ajaxSubgridOptions: { async: false },
    colNames:[ 'Customer Id', Status',  'Comments'],
    colModel:[                    
        {name:'customerId', width:75, fixed: true, sortable: true, search: false, frozen: true, resizable: false, classes: 'customer_id_grid_class'},
        {name:'customerNm', width:215, fixed: true, sortable: true, search: false, frozen: true, resizable: false, classes: 'customer_name_grid_class'},
        {name:'status', index:'status', sortable: false, search: false, width: 80, fixed: true, align:'center', resizable: false, editable: true, stype:'select', 
         edittype:'select', editoptions:{
             value:'Select:Select;Y:Yes;N:No',
             defaultValue:'Intime',
             multiple: false
         },
         searchoptions: {
             sopt: ['eq','ne'],
             value: 'Y:Yes;N:No',
             attr: {multiple: 'multiple', size: 3},
             dataInit: dataInitMultiselect
         }
        },
        {name:'comments', width:150, fixed: true, sortable: false, search: false, editable: true, resizable: false, editoptions: { maxlength: 3000 }}
    ],
    headertitles:true,
    rowNum:999,
    rowList:[],
    pager: '',
    records: 1000,
    pgbuttons : false,
    viewrecords : false,
    pgtext : null,
    pginput : false,
    gridview:true,
    ignoreCase:true,
    rownumbers:true,
    sortname: 'invdate',
    viewrecords: true,
    sortorder: 'desc',
    multiselect: true, 
    caption: "Customer Search",
    height: '100%',
    editurl: 'clientArray',
    autoencode: true,
    loadonce: true,
    multiselectWidth: 30,
    width: 1024,
    viewsortcols : [true,'vertical',true],
});

JSON data:

[{
    "customerId": "123",
    "customerNm": "Dany Web",
    "status": "Y",
    "comments": "testing"
}, {
    "customerId": "345",
    "customerNm": "Charlie Studdard",
    "status": "N",
    "comments": "testing"
}]

Edit on double click:

ondblClickRow: function(id){
    $(this).jqGrid('editRow', id, true);
}

Any help please...

The problem is not the line, which you posted, but **where** you use the line. Moreover, in the most cases one should never modify the cell in the way. It's better to set the class *during the grid is filling*. One uses `cellattr` for the goal. Thus you should post more code and to explain what you do and what you need to implement. — Oleg, Feb 14 '17 at 14:20
Thanks Oleg for looking into this. I have a Submit button in my page, when I click on Submit, I have to validate all editable fields in each row. If validation fails, I need to highlight those cells. I have edited with more info — SK., Feb 14 '17 at 14:35
You should post the demo. Which `datatype` has the grid? How you fill the grid with data? Which `id` you use for the rows as input data? You current code use `var row_id = key+1;`. What is `key`? Why you suppose that rowid is integer `key+1`?. It is typically if you filled the grid without specifying required id information. Why you get **all rows** by `getRowData`? If you need to know, which row is editing now then you can use `var savedRow = grid.jqGrid("getGridParam", "savedRow");`. `savedRow` is typically array with one element, which `id` property is the rowid of editing row. — Oleg, Feb 14 '17 at 14:42
Well, I was trying to validate like this. go through each row, see if any column is in editable in that row. then find the value of that cell. if that is empty, then add CSS class. If that is not right, could you please guide me how to achieve this. probably an example demo would be great. — SK., Feb 14 '17 at 15:10
Could you just add the code, which shows how you fill the grid? Currently I have no information, which editing mode you use: inline editing or cell editing. Moreover I repeat that the code, which you post uses `row_id = key+1`, where `key` is undefined. The code suppose that rowids are numbers. I guess that you filled jqGrid with the wrong data, without specifying `id` property. Very old jqGrid 4.3 had generated 1,2,3... as the rowids in the case. Later versions of old jqGrid (about 4.4) have changed the behavior and use `jqg1`, `jqg2`, `jqg3` as auto-generated rowids. — Oleg, Feb 14 '17 at 15:20
I apologize. I wish I could post the code, but the code is complex and many hard coded data with conditions, which I could not really post. But I can say we are using inline edit $(this).jqGrid('editRow', id, true);. Now I have two questions : 1) when you are saying "without specifying id" what does that means. how to specify id.? 2) in the above code when I am saying $.each(obj, function(key, value) { does not that mean key is the row id (like first row, second row ...) ? Thanks for your help so far. — SK., Feb 14 '17 at 16:00
How you fill the grid with data? Which `datatype` you use (`"local"`, `"json"`, `"xml"`)? You don't need to post full code, but `datatype` is required `colModel` (at least 2-3 field) are required and an example of input data for the grid (JSON data with two rows, XML data or an object , which you use to fill the grid). Currently you question could be about TreeGrid, filled with XML data from the server or Pivot table or Grid with subgrids or grid with data grouping and so on... You have to send more details to allow other people to understand you — Oleg, Feb 14 '17 at 16:03
Sorry, now I got your question. I updated the question with some more details. — SK., Feb 14 '17 at 16:11
The line `colNames:[ 'Customer Id', Status', 'Comments'],` contains syntax error. You mean probably `colNames:[ 'Customer Id', 'Status', 'Comments'],`. The rest of your code is displayed in the wrong color because of the error. Moreover, could you include test JSON data (2-3 rows) returned from `url: 'myUrl.do?custId=' + custId`? Which filed of the data is unique? If you load the data from the database then it has typically native id column. Is is a part of JSON data? For example, `customerId`? The code still don't show which editing mode you use. — Oleg, Feb 14 '17 at 16:14
Another question: how many rows could be loaded in the grid (10, 100, 1000, 10000, 1000000)? You use `rowNum:999` and `loadonce: true`. The option `rowNum:999` is strange because I don't know a monitor, which allows to display 999 rows at once. One use typically **local paging**. One need just use `rowNum:20`. It increase the performance for the user in multiple times. Try [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/performane-15-60000-25-free-jqgrid.htm) with 60000 rows and **local** paging, sorting and filtering and to see the performance. — Oleg, Feb 14 '17 at 16:21
updated the question with json data and how I edit on double click — SK., Feb 14 '17 at 16:30
Another strange thing. You use `edittype:'select', editoptions:{value:'Select:Select;Y:Yes;N:No',defaultValue:'Intime',multiple: false}`. Which data could be in the column `status`? Only `"Y"` and `"N"` or `"Select"` or `"Intime"`? Why you don't use `formatter: "select"` additionally if you want to display `"Y"` and `"N"` as ``"Yes"` and `"No"``? One can alternatively use just checkbox as formatter. — Oleg, Feb 14 '17 at 16:34
In any way you can add `key: true` property in `customerId` column to make the value be used as rowids. Could you explain what should do `validateOnSubmit` function? Just test, whether the current editing row don't contain `"Select"` string and to mark it in red color? The usage of checkbox formatter seems good. Try to edit rows of [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/formEditOnDoubleClick-jqueryui-fa3.htm) — Oleg, Feb 14 '17 at 16:39
validateOnSubmit function should see if a status has been selected (i.e. either Yes or No). If not, I want to highlight that cell in red. — SK., Feb 14 '17 at 17:08
yes, I am using inline editing. (that mean not like one in the demo which you just provided in previous comment) — SK., Feb 14 '17 at 17:10

Oleg · Accepted Answer · 2017-02-14T17:24:42.150

0

I recommend you to add key: true to the column customerId if the values of the column contains unique data.

You can fix your current code of validateOnSubmit in the following way

function validateOnSubmit() {
    var grid = $("#mySearchResultGridTable");
    var editingRows = grid.jqGrid("getGridParam", "savedRow");
    // the array editingRows will contains the information about the values
    // of all editable columns from all currently editing rows
    // one allows typically ONE editing row at once. Thus one can use
    if (editingRows.length > 0) {
        var selectedStatus = $("#jqg"+ editingRows[0].id +"_status").val();
        if (selectedStatus === '' || selectedStatus === 'Select') {
            grid.jqGrid('setCell', editingRows[0].id, 'status', '', 'red-highlight');
        }
    }
}

I'd recommend you to consider to replace the definition of state column to

{ name: "state", template: "booleanCheckbox", editable: true }

you can just try the results and to see whether it would be the better choice in your case or not.

edited Feb 14 '17 at 17:24

answered Feb 14 '17 at 17:18

Oleg

220,925
34
403
798

Your correct, I didn't understand the syntax of below code. grid.jqGrid('setCell', row_id, 'status', '', 'red-highlight'); As in latest jqgrid the ids are jdg1, jdg2 ..., I just changed my code to grid.jqGrid('setCell', 'jqg'+row_id, 'status', '', 'red-highlight'); and now it works fine – SK. Feb 14 '17 at 18:17
@SKumar: I recommend you to remove the options `gridview:true, rowList:[], ignoreCase:true, height: '100%', editurl: 'clientArray', rowNum:999, records: 1000,` which are defaults in free jqGrid and to add `forceClientSorting: true` instead. The option `forceClientSorting: true` expand the functionality of `loadonce: true`. The data returned from the server will be sorted (corresponds to `sortname: 'invdate', sortorder: 'desc'`, which you use currently) and optionally filtered **on the client side** before displaying. You don' need to sort the data by `invdate` on the server. – Oleg Feb 14 '17 at 18:28
Sure, I will work on that to clean up the code. Could you please help in another query I asked: http://stackoverflow.com/questions/42216449/free-jqgrid-formatter-select-solving-undefined-issue-but-not-showing-expe – SK. Feb 14 '17 at 18:29

free-jqgrid: setCell to add css class to a cell

1 Answers1