Changing a jqgrid row layout with html tags possible?

Question

I am using jqgrid responsive bootstrap version in my web application and have no problems.

is it possible to format a row in jqgrid as an html table having 2 rows.

for example lets say I have the fallowing data:

columnn-1 : 20 characters long. columnn-2 : 20 characters long. columnn-3 : 200 characters long max (textarea with vertical scroll bar)

is it possible to display such data as we did in html table with colspan like bellow by using custom formatters in a jqgrid row ?

<table border="1">
    <tr>
        <td align='center'>Column-1</td>
        <td align='center'>Column-2</td>
    </tr>
    <tr>
        <td colspan="2" align='center'>Column-3</td>
    </tr>
</table>

table

Thank you.

Answer 1

The code below make what you want. Please note the use of afterInserRow event and gridview parameter set to false:

    var mynewdata = [
        {id: "id1", Col1 : "data11", Col2: "data12", Col3: "data13"},
        {id: "id2", Col1 : "data21", Col2: "data22", Col3: "data23"},
        {id: "id3", Col1 : "data31", Col2: "data32", Col3: "data33"},
        {id: "id4", Col1 : "data41", Col2: "data42", Col3: "data43"}
    ];

    $(document).ready(function () {
       $("#jqGrid").jqGrid({
            datatype: "local",
            data: mynewdata,
            height: 250,
            width: 780,
            colModel: [
                { name: 'id', hidden: true, key: true},
                { name: 'Col1', width: 75 },
                { name: 'Col2', width: 90 },
                { name: 'Col3', width: 100, hidden: true }
            ],          
            gridview : false,
            afterInsertRow: function(id, rowdata, curr) {
                var newid = id+"1";
                var data = '<tr role="row" id="'+newid+'" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content">';
                data += '<td colspan="2" role="gridcell" style="text-align:center" title="data11" aria-describedby="jqGrid_Col1">'+rowdata.Col3+'</td>';
                data += '</tr>';
                $("#"+id).parent().append(data);
            }
        });
});