arame3333 arame3333 - 1 year ago 102
Javascript Question

JqGrid - I need to fill my tablecells with a background colour with no padding

In my JqGrid the background colours are not filling the cells;
enter image description here

How do I remove the white gaps?
From ie developer tools, the Appears Satisfactory cell is defined as follows

<td title="Appears Satisfactory" role="gridcell" aria-describedby="grid_Recommendation" >
<span class="ui-jqgrid-cell-wrapper">
<div class="pass">Appears Satisfactory</div>

where the "pass" class is defined as

.pass {
background-color: #C0FF97;
text-align: center;

and in javascript my JqGrid is defined as follows;

var populateGrid = function (data) {
var grid = $("#grid");
data: data,
colNames: ["No", "Company", "Trade", "Recommendation", ""],
colModel: [
{ name: "AssessmentNo", label: "AssessmentNo", width:80, align:"center" },
{ name: "Company", label: "Company", width:400, searchoptions: { sopt: ["cn"] } },
{ name: "Trade", label: "Trade", width: 220, searchoptions: { sopt: ["cn"] } },
{ name: "Recommendation", label: "Recommendation", width: 150 },
{ name: "Links", label: "Links", search: false, align: "center" }
cmTemplate: { width: 100, autoResizable: true },
loadonce: true,
forceClientSorting: true,
rowNum: 20,
pager: "#pager",
gridview: true,
ignoreCase: true,
shrinkToFit: false,
rownumbers: true,
sortname: "AssessmentNo",
viewrecords: true,
sortorder: "asc",
height: "100%"

grid.jqGrid("filterToolbar", {
beforeSearch: function () {
return false; // allow filtering

Answer Source

You code don't contain the most important part where you set the class "pass". I can guess that you set it in the wrong way.

What you seems to want is setting class attribute on the cell (<td> element) under some condition. The cellattr callback in the colModel is exact way to do this. If the choice of the class depend on the content of the cell then you can do the followin

    name: "Recommendation", label: "Recommendation", width: 150,
    cellattr: function (rowId, cellValue) {
        if (cellValue === "Appears Satisfactory") {
            return " class='pass'";
        } else if (cellValue === "Expired") {
            return " class='not-pass'";

If you need to test some other properties of input data then you can use

    name: "Recommendation", label: "Recommendation", width: 150,
    cellattr: function (rowId, cellValue, rawObject, cm, item) {
        // item.AssessmentNo, item.Company and other are filled here
        if (item.Recommendation === "Appears Satisfactory") {
            return " class='pass'";
        } else if (item.cellValue === "Expired") {
            return " class='not-pass'";

where item contains parsed (read) object with input data and rawObject contains raw object with input data. The rawObject can be array of strings or XML node instead of the item, which contains always named properties line the column names.

If you would use cellattr then you will get HTML fragment like

<td class="pass" title="Appears Satisfactory" role="gridcell" aria-describedby="grid_Recommendation">
    <span class="ui-jqgrid-cell-wrapper">Appears Satisfactory</span>

Finally I should remark that free jqGrid which you use allows you to simplify your current code. First of all the options loadonce: true and forceClientSorting: true have sense only if you use some remote datatype ("json", "jsonp" or "xml"). It will be ignored with datatype: "local" which you use. In the same way you can remove gridview: true, ignoreCase: true, sortorder: "asc", height: "100%" options which are default in free jqGrid. You can remove <div id="pager"></div> and just use pager: true instead of pager: "#pager". The smaller the code the more easy it will be to read and to maintain.