Search code examples
jqgrid

How to wrap jqGrid content?


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.


Solution

  • 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);
        }
    }