Jqgrid: viewGridRow property not working

Question

Hi, I am working in Crete Concrete5 and I am using jQuery jqGrid 4.5.4. I have a problem when using the jqgrid view form.

(I am). label and data are compressed first

(Ii) description is show long line I want to split into several lines based on width (I want this demo like http://www.ok-soft-gmbh.com/jqGrid/WrappingInViewForm_.htm )

(iii). How to set viewGridRow width

some properties do not work in jqGrid, they are closeOnEscape, checkOnSubmit, checkOnUpdate

this is my screenshot

My code is:

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: 'dmY' }, datefmt: 'dm-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: 'dmY' }, datefmt: 'dm-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: please review my code if it was bad or wrong. suggest me how to do better than that. Thanks, who helps with this.

Answer 1

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

It seems to me that to solve your main problem you just need to set the width and labelswidth in the View. You need to add another navGrid parameter (after selecting the search 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 closeOnEscape: true parameter only works if the focus is set inside the View dialog box. To make the code compatible with the current version of jQuery (for the current implementation of jQuery.focus() ), you need to set the tabindex attribute to the Close button from the name of the View dialog box. The View option can be used as shown 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 } 

Demo demonstrates the above code.

UPDATED 3: By the way, I sent a bug report to trirand and Tony has already fixed the jqGrid code from github (see here ). Thus, the next version of jqGrid will not have a problem with closeOnEscape: true .