How to wrap jqGrid content?

Question

I want to wrap the content inside jqGrid which will be in the below format

Input string
2013/05/28 10:54 - Default - Subject A Task added

Output String 
2013/05/28 10:54 - Default 
Subject A Task added

Below is the code where I give the content to be displayed on screen

jQuery("#message").jqGrid({
    datatype : "local",
    data : resultSet,
    height :250,
    width : 960,
    sortable : false,
    ignoreCase : true,
    sortorder : "desc",
    colNames : [''], 
    colModel : [ {
        name : 'content',
        index : 'content',
        width : '10%',
        align : 'center',   
        sortable : false,
        search : false
    }],
    rowList:[10,20,30],
    pager : '#pager',
    rowNum : 10,
    altRows : true,
    altclass:"myclass",
    viewrecords : true,

});

I tried nltobr like this

loadComplete : function() {
    for (var i = 0; i < resultSet.length; i++) {
        resultSet[i].messageContent = nl2br(resultSet[i].messageContent);
    }
}

That is not working.

Is there any way to wrap based on second hipen? I also want to bold the first line.

score 3 · Accepted Answer · edited May 23 '17 at 10:30

3

First of all nltobr can be used in the server code and not inside of JavaScript callback method loadComplete will will be executed after filling the grid. Seconds the callback loadComplete will be called after the grid content will be placed in the grid. If you want make some modification of resultSet data you should do this before the grid with the data are created.

You wrote about wrapping of content, but the usage of nltobr and the text example which you posted shows that you have just new line character \n inside of the text. It it is

The demo uses the text which you posted and contains \n inside of the text. The results looks like you want

enter image description here

If you really need wrapping of the text then I recommend you to read the following answers: this one, this one and this one.

UPDATED: If you need make bold the first line of multiline content of some column you can insert <strong> in the text. If you don't use autoencode: true option of jqGrid then you can modify input data before creating jqGrid. For example the demo modifies content of note column:

var i, str, a;

for (i = 0; i < mydata.length; i++) {
    str = mydata[i].note;
    if (typeof str === "string") {
        a = str.split("\n");
        if (a.length > 1) {
            a[0] = "<strong>" + a[0] + "</strong>";
            mydata[i].note = a.join("\n");
        }
    }
}

Another demo demonstrate how to use custom formatter to do the same. You should use the approach if you use autoencode: true option of jqGrid. Th formatter of note column are defined in the demo as

formatter: function (value) {
    var a;
    if (value == null || value === "") {
        return "&#160;";
    } else if (typeof value === "string") {
        a = value.split("\n");
        if (a.length > 1) {
            a[0] = "<strong>" + a[0] + "</strong>";
            return a.join("\n");
        } else {
            return $.jgrid.htmlEncode(value);
        }
    } else {
        return $.jgrid.htmlEncode(value);
    }
}

edited May 23 '17 at 10:30

Community

1
1

answered May 28 '13 at 08:51

Oleg

220,925
34
403
798

Wonderful guidance ...Thanks a lot. I just want to make bold the first line of a column. Any idea about it ? – sahana May 28 '13 at 09:44
@sahana: You are welcome! You don't use `autoencode: true` option, so jqGrid interpret all the data as HTML fragments which are inserted in the cells. So you can just modify input data `resultSet` like you want. You can for example use `split("\n")` to divide string in subtrings , then modify the first element of the array as `a[0] = "" + a[0] + "";` and then convert results back to string with `a.join("\n")`. You can use [custom formatter](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter) for the `content` column to do the same sransformations optionally. – Oleg May 28 '13 at 10:01
I tried like this, alert(resultSet.length);for (var j=0; j – sahana May 29 '13 at 04:46
@sahana: You should use correct code. `resultSet` is *array*, the item `resultSet[j]` should be *object* with `content` property. So you should use `var a = resultSet[j].content.split("\n"); a[0] = "" + a[0] + ""; resultSet[j].content = a.join("\n");` – Oleg May 29 '13 at 04:54
oops!! okay i got it. I will try it out. Thank you – sahana May 29 '13 at 05:23
resultSet = data; for (var splitData = 0; splitData < resultSet.length; splitData++){ var splitString = resultSet[splitData].content.split("\n"); splitString[splitData] = "" + splitString[splitData] + ""; resultSet[splitData].content = splitString.join("\n"); } After this, for content display to grid, data : resultSet is given. Whether this is correct? I don't see bold content at all. Am I making mistake – sahana May 29 '13 at 06:44
@sahana: Everything is very easy. I created two demos which demonstrate how to can make bold the first line of multiline content. See **UPDATED** part of my answer. – Oleg May 29 '13 at 07:33

How to wrap jqGrid content?

1 Answers1

Linked