jqGrid cellattr title ignores text after white spaces

Question

I have colmodel in jqgrid which has 'name' and 'description' columns and i need to show the description as tooltip while hovering over the 'name' column.

Say i have this model for eg :

colModel: [
    {
        name: "name",..
        cellattr: function (rowId, val, rawObject, cm, rdata) {
            return 'title=' + rawObject[1];
        }
    },
    {name : "description",..},
],

the data is rendered as tooltip but if i have description as "Low Level Standard" , the tooltip is "Low".

Ideally it ignores all text after white space.

How do i fix this? I am new to jqGrid. Pls explain in detail if possible Thanks

score 3 · Accepted Answer · answered May 17 '13 at 17:59

You should start returned value with space. The exact format of rawObject can depend on many things: in which format you fill the grid data. So you should verify whether you should use index like rawObject[1] or the name like rawObject.description. So the solution could be like

cellattr: function (rowId, val, rawObject) {
    return ' title="' + rawObject[1] + '"';
}

or like

cellattr: function (rowId, val, rawObject) {
    return ' title="' + rawObject.description '"';
}

depend on the format of the data which you use (and so from the frormat of rawObject). I added " to the title.

By the way like you could see I removed cm, rdata from the callback because we don't use there.

score 0 · Answer 2 · answered Apr 04 '18 at 12:12

One addition to Oleg's correct answer: If you need to apply the tooltip multiple times, you might want to declare a function like so:

var addFullNameAsTooltip = function(rowId, val, rawObject, cm, rdata) {
    return ' title="' + rawObject.firstName + " " + rawObject.lastName + '"';
  };

and use it the following way:

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {

  var addFullNameAsTooltip = function(rowId, val, rawObject, cm, rdata) {
        return ' title="' + rawObject.firstName + " " + rawObject.lastName + '"';
      };

  $("#grid").jqGrid({
    autowidth: true, height: 45, 
    colNames: ['First name', 'Last name', 'Updated?'],
    colModel: [
      {name: "firstName", cellattr: addFullNameAsTooltip}, 
      {name: "lastName", cellattr: addFullNameAsTooltip}, 
      {name: "updated"}],
    data: [
      { id: 10, firstName: "Jane", lastName: "Doe", updated: "no"},
      { id: 20, firstName: "Justin", lastName: "Time", updated: "no" }
    ]
    
  });
});

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="grid"></table>

In the snippet above, the full name is added as a tool tip to the first name and to the last name columns.

jqGrid cellattr title ignores text after white spaces

2 Answers2

Linked