Jqgrid: viewGridRow property is not working

Question

I am working in the Concrete5 CMS and I use the jquery jqGrid 4.5.4 version. I have problem while using the jqgrid in view form.

1. First the label and data are collapsed
2. Description is show long line, and I want to split in multiple lines based on the width (I want like this demo)
3. How to set the width of the viewGridRow?

Some properties are not working in the jqGrid, like closeOnEscape, checkOnSubmit and checkOnUpdate

My code:

var grid = $("#projectGrid");
    var pages = <?php echo json_encode($pl) ?>;
    var emptyMsgDiv = $('<div>No Records.</div>');
    grid.jqGrid({
        caption:'Project List',
        datatype:'local',
        data:pages,
        mtype:'POST',
        colNames:['ID','Project Name','Assignment Name','Client','Start Dt.','Submission Dt.','Description'], 
        colModel:[ 
            {name:'proj_id', key:true, hidden:true}, 
            {name:'proj_name', width:200, sorttype:'text'}, 
            {name:'emp_name', width:200, edittype:'custom', editoptions:{custom_element:function(value, options) { return combobox_element(value, options,'emp_name') }, custom_value:combobox_value }},
            //{name:'c_company_name',width: 100},
            {name:'c_company_name', width: 100, align: "center", formatter: "select", editable: true,
                        edittype: "select", editoptions: {value: dataCli}},
            {name:'proj_start_dt', width:150, sorttype: 'date', formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, 
                datefmt: 'd-m-Y', editoptions: { dataInit: initDateStart }, oneditfunc: function() {alert ("edited");},  
                searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDateSearch } },
            {name:'proj_end_dt',width:150, sorttype: 'date', formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, 
                datefmt: 'd-m-Y', editoptions: { dataInit: initDateEnd }, 
                searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDateSearch } }, 
            {name:'proj_description', hidden:true, editrules:{edithidden:true}, edittype:'textarea', search: false  }],
        cmTemplate:{editable:true, editrules: {required:true}}, 
        emptyrecords: 'No records.',
        beforeRequest: function () {if (pages.length === 0) {grid[0].p.page = 0;}},  // fix the page number from 1 to 0 in case of no data  
        loadComplete: function () { var count = grid.getGridParam(); var ts = grid[0]; if (ts.p.reccount === 0) { grid.hide();  emptyMsgDiv.show(); } else { grid.show(); emptyMsgDiv.hide(); } },  
        width:777,      
        height:'auto',
        pager:'#projectPager',
        sortname: 'proj_id',
        sortorder:'asc',
        rowNum:10,
        rowList:[10,20,30],
        rownumbers:true,
        viewrecords:true,
        gridview:true,
        autoencode:true,
        loadonce:true,
        editurl:'<?php echo $this->action('deleteProject'); ?>',
        reloadAfterSubmit: true
        
    });
    
    grid.jqGrid('navGrid','#projectPager', {
            add:false, edit:true, view: true, del:true, search:true, refresh:true,
            editfunc: function(id){ window.location = 'editProject?pID=' + id;$("#div").html(id);}},    
            {jqModal: true, reloadAfterSubmit:false, closeOnEscape:true, closeAfterEdit: true},
            {jqModal: true, closeOnEscape: true, labelswidth: '100%', width: '600' },
            {jqModal: true, reloadAfterSubmit:false, closeOnEscape: true},
            {jqModal: true, closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, overlay: true, recreateFilter: true }
        );
    emptyMsgDiv.insertAfter(grid.parent());
    //$("#projectGrid")[0].refreshIndex();
    $("#projectGrid").trigger("reloadGrid");

And one more request is Please review my code if any bad or wrong. suggest me how to do better than this. thank you for who help this.

Answer 1

The options of the View are described in the documentation. It has no checkOnSubmit, checkOnUpdate options. The options exist in Add and Edit form, but not in View form. The default value of closeOnEscape is false. You should specify closeOnEscape: true if required.

It seems to me that to solve your main problem you need just set width and labelswidth options of View. You need add one more parameter of navGrid (after the options of Searching dialog).

UPDATED:

grid.jqGrid('navGrid', '#projectPager', {
    add:false, edit:true, view: true, del:true, search:true, refresh:true,
    editfunc: function(id){ window.location = 'editProject?pID=' + id;$("#div").html(id);}}, 
    // below are Edit options (prmEdit in the documentation)
    {jqModal: true, reloadAfterSubmit:false, closeOnEscape:true, closeAfterEdit: true},
    // below are Add options (prmAdd in the documentation)
    {jqModal: true, closeOnEscape: true},
    // below are Delete options (prmDel in the documentation)
    {jqModal: true, reloadAfterSubmit:false, closeOnEscape: true},
    // below are Search options (prmSearch in the documentation)
    {jqModal: true, closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, overlay: true, recreateFilter: true},
    // below are View options (prmView in the documentation)
    {jqModal: true, closeOnEscape: true, labelswidth: '35%', width: 600}
);

UPDATED 2: The option closeOnEscape: true works only if the focus is set inside of View dialog. To make the code compatible with the current version of jQuery (to the current implementation of jQuery.focus()) one need set tabindex attribute on the "Close" button from the title of the View dialog. The View option could be used like below

{
    beforeShowForm: function ($form) {
        $form.find("td.DataTD").each(function () {
            var html = $(this).html().trim();  // &nbsp;<span>&nbsp;</span>
            if (html.substr(0, 6) === "&nbsp;" && html.trim().length > 6) {
                $(this).html(html.substr(6));
            }
        });
        $form.closest(".ui-jqdialog").find(".ui-jqdialog-titlebar-close").attr("tabindex", "-1");
    },
    recreateForm: true,
    closeOnEscape: true,
    labelswidth: '35%',
    width: 600
}

The demo demonstrates the above code.

UPDATED 3: By the way I posted the bug report to trirand and Tony already fixed the code of jqGrid from github (see here). So the next version of jqGrid will don't have the problem with closeOnEscape: true.