jqGrid - formoptions rowpos and colpos is being used to create 3 column View form. How can you make 1 row's data field colspan the full width/

Question

If I have configured the formoptions to create a form with 6 columns (3 for labels and 3 for data) and I want 1 row in the form to have 2 columns (1 for label and 1 for data that is the full width of the form), how can I do this?

I've tried using colSpan and looking at this example but could not get it to work.

Here's the structure of my jqGrid:

colModel :[ {
      label: 'Row 1 Column 1',
      name: 'a',
      formoptions: {
        colpos: 1, // the position of the column
        rowpos: 1, // the position of the row
        }
    }, {
      label: 'Row 1 Column 2',
      name: 'b',
      formoptions: {
        colpos: 2, // the position of the column
        rowpos: 1, // the position of the row
        }
    }, {
      label: 'Row 1 Column 3',
      name: 'c',
      formoptions: {
        colpos: 3, // the position of the column
        rowpos: 1, // the position of the row
        }
    }, {
      label: 'Row 2 Full Width',
      name: 'd',
      formoptions: {
        colpos: 1, // the position of the column
        rowpos: 2, // the position of the row
        }],

and the configuration of the view form options

        {
            //edit options
        },
        {
            //add options   
        },
        {
            //del options   
        },
        {
            //search options
        },
        { 
            //view options
            width : 1000,
            labelswidth :50,
            viewPagerButtons : false,
            closeOnEscape : true,
            beforeShowForm: function(form) {
                var dlgDiv = $("#viewmod" + mygrid[0].id);
                var parentDiv = dlgDiv.parent();
                var dlgWidth = dlgDiv.width();
                var parentWidth = parentDiv.width();
                var dlgHeight = dlgDiv.height();
                var parentHeight = parentDiv.height();
                dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
                var $tr = $("#trd_d"), // 'name' is the column name
                $label = $tr.children("td.CaptionTD"),
                $data = $tr.children("td.DataTD");
                $data.attr("colspan", "5");                             
                $data.children("input").css("width", "95%");
                $label.hide();                                      
         }
};

Answer 1

You need to hide some unneeded columns in the second row of the View. The code of beforeShowForm could be like below

beforeShowForm: function ($form) {
    var $captionTds = $("#trv_d>td.CaptionTD"),
        $dataTds = $("#trv_d>td.DataTD");

    $captionTds.filter(":gt(0)").hide();
    $dataTds.filter(":gt(0)").hide();
    $dataTds.first().attr("colspan", 5);
}

I'd recommend you additionally to use formViewing option to specify View options. It makes the code more readable. See https://jsfiddle.net/OlegKi/4xyf0adw/