JQGrid Horizontal srollbar not working - jqgrid

Experts,
I need horizontal scrollbar in my JQgrid. The scrollbar is visible but it does not work as the columns are getting wrapped. I do not want wrapping and allow user to scroll horizontally. I tried everything found on google but in vain. Going forward the number of columns would increase. Please help.
$("#test1").jqGrid({
url: hostPath + '/test/test',
postData: {
modelDataRequest: window.ModelPart
},
datatype: 'json',
mtype: 'Post',
height: 'auto',
colNames: ['Col1', 'Col2','col3','col4','col5', 'col6', 'col7','col8', 'col9', 'col10', 'col11', 'col12'],
colModel: [
{name: 'col1', index: 'col1', width: '150px', search: true, align: 'left'},
{name: 'col2', index: 'col2', width: '150px', search: true, align: 'left'},
{name: 'col3', index: 'col3', width: '150px', search: true, align: 'left'},
{name: 'col4', index: 'col4', width: '150px', search: true, align: 'left'},
{name: 'col5', index: 'col5', width: '150px', search: true, align: 'left'},
{name: 'col6', index: 'col6', width: '150px', search: true, align: 'left'},
{name: 'col7', index: 'col7', width: '150px', search: true, align: 'left'},
{name: 'col8', index: 'col8', width: '150px', search: true, align: 'left'},
{name: 'col9', index: 'col9', width: '150px', search: true, align: 'left'},
{name: 'col10', index: 'col10', width: '150px', search: true, align: 'left'},
{name: 'col11', index: 'col11', width: '150px', search: true, align: 'left'},
{name: 'col12', index: 'col12', width: '150px', search: true, align: 'left'},
],
gridview: true,
loadOnce: true,
sortable: true,
shrinkToFit: false,
//search: true,
pager: '#Pager',
jsonReader: { cell: "" },
rowNum: 50,
rowList: [10, 20, 50, 100, 500, 1000],
viewrecords: true,
emptyrecords: 'No record(s) to display',
caption: "Search Results",
altRows: true,
altclass: 'jqGridAltRow',
loadComplete: function () {
if ($(this).getGridParam("records") == 0) {
$(this).parents('div.ui-jqgrid-div').css("max-height", "0px");
$(this).html("<div style='padding:6px;background:#D8D8D8'>No records found</div>");
}
else {
$(this).parents('div.ui-jqgrid-div').css("max-height", "450px");
}
$(this).parents('div.ui-jqgrid-div').css("max-width", "100%");
},
gridComplete: function () {
$('#recordsCount').text($('#test1').getGridParam('records'));
},
},
{
closeOnEscape: true, closeAfterSearch: true, ignoreCase: true, multipleSearch: true, multipleGroup: true, showQuery: true,
sopt: ['cn', 'eq'],
defaultSearch: 'cn'
})

Related

Cells not aligned with header - JQGrid

I'm using jqGrid (not Gurrido version / jqGrid 4.6 version) and i got an issue with the alignement of the cells and headers.
You can see the problem here :
And the code of the grid :
gridTr.jqGrid({
url: "http://localhost/projetMecenat/public/tranches/projet/{{ $ID_PROJET }}",
mtype: "POST",
datatype: 'json',
colNames: ["Type contact","Numéro","Libellé","Montant mini","Montant maxi","Montant réel"],
colModel: [
{name: "TYPE_CONTACT", sortable: false, width: 100, align:"center"},
{name: "CPT_TRANCHE", width: 30, align:"center"},
{name: "LIBCOD", width: 150, align: "center", sortable: false},
{name: "MT_SOUTIEN_MINI", sortable: false, width: 100, align:"center"},
{name: "MT_SOUTIEN_MAXI", width: 100, align:"center"},
{name: "MT_REEL", width: 200, align: "center", sortable: false}
],
loadtext: "Chargement...",
viewrecords: true,
emptyrecords: "Aucune délibération",
width: 680,
height: 300,
rowNum: 100,
sortable: true,
loadonce: true,
hidegrid: false,
multipleSearch: true,
shrinkToFit: false,
gridview: true,
autoencode: false,
gridComplete: function() {
console.log("grid tranche load successfully");
}
})
The JSON send from the server :
[{"ID_CONTREPARTIE":1,"FAMIL_CTRPRT_":1,"LIBEL_CTRPRT":"Contrepartie 1","DETAIL_CTRPRT":null,"PRECISION_TRCH":null,"CORRESP_MONETAIRE":null,"NUM_MINI":2000,"NUM_MAXI":2500,"DTNEW":"2020-02-17","DTMAJ":"2020-02-17","UTILNEW":"HMA","UTILMAJ":"SBR","ID_PROJET":201,"CDCOD":"FAMIL_CTRPRT","CLECOD":1,"LIBCOD":"Communication","VALCOD1":"","VALCOD2":null,"FAMIL_CTRP":"Communication"}]
Anyone have an idea ?

Jqgrid - only one search option appears in the header column

I am working in a Jqgrid and have encountered a problem. I have looked at many examples and read alot of documentation but can't seem to determine why only 1 search option appears in the column header as opposed to the others such as "ge" "le" "eq" etc?
This is my code:
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:58404/JQGridHandler.ashx',
datatype: "json",
colNames: ['Property ID', 'Property Ref', 'Short Address', 'Scheme Code', 'Scheme Name', 'Property Type', 'Tenure Type', 'Status'],
colModel: [
{ name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", searchoptions: {sopt: ["ge","le","eq"]}, sortable: true},
{ name: 'PropertyRef', index: 'PropertyRef', width: 75, align: "left", stype: 'text', sortable: true},
{ name: 'ShortAddress', index: 'ShortAddress', width: 200, align: "center", search:true, stype: 'text', searchoptions: {sopt: ["cn","ge","le","eq"]}, sortable: true},
{ name: 'SchemeCode', index: 'SchemeCode', width: 80, align: "center", sortable: true },
{ name: 'SchemeName', index: 'SchemeName', width: 80, align: "center", stype: 'text', sortable: true },
{name: 'PropertyType',width: 80, align: "center",},
{ name: 'TenureType', index: 'TenureType', width: 80, align: "center", sortable: true },
{ name: 'Status', index: 'Status', width: 75, align: "center", sortable: true },
],
beforeProcessing: function (data) {
//Create the filters
getDropDownValues(data, 'PropertyType')
getDropDownValues(data, 'TenureType')
getDropDownValues(data, 'Status')
$(this).jqGrid('destroyFilterToolbar')
.jqGrid('filterToolbar', {
stringResult: true,
searchOperators: true
});
},
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#jQGridDemo').jqGrid('restoreRow',lastsel2);
jQuery('#jQGridDemo').jqGrid('editRow',id,true);
lastsel2=id;
}
},
height: 'auto',
width: 'auto',
rowNum: 30,
editable: true,
mtype: 'GET',
loadonce: true,
rowList: [30, 40, 50],
pager: '#jQGridDemoPager',
sortname: 'PropertyId',
viewrecords: true,
sortorder: 'desc',
caption: "Property Details",
editurl: 'http://localhost:58404/JQGridHandler.ashx'
});

Is it possible to show spinner while inline editing JQGrid?

I am using JQGrid. While inline editing the JQGrid and saving data to DB, it takes some time, during that time my page becomes inresponsive. So, during that timespan can I show spinner to show user that your edited data is "Updating..."
I am using the below Code for jqgrid init:
LoadProjectDetailsGrid = function () {
var myGrid = $('#jqgProjectLists');
myGrid.jqGrid("GridUnload");
myGrid.jqGrid({
url: '#Url.Action("GetProjectLists", "Config")',
editurl: '#Url.Action("UpdateProjectListGrid", "Config")',
datatype: 'json',
mtype: 'POST',
contentType: 'application/json; charset-utf-8',
colNames: ['ID', 'PJT', 'Full Name', 'Model Type', 'Pjt Code', 'Model State', 'Project Type', 'Dev. Department',
'Client Model Name1', 'Client Model Name2', 'Client Model Name3', 'Model Status', 'Action'],
colModel: [
{ name: 'Model_ID', index: 'Model_ID', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'PJT_Nm', index: 'PJT_Nm', width: 150, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Nm', index: 'Model_Nm', width: 140, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Type', index: 'Model_Type', width: 80, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Code', index: 'PJT_Code', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'Model_State', index: 'Model_State', width: 110, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Type', index: 'PJT_Type', width: 100, sortable: true, align: 'center', editable: false, search: false },
{ name: 'Dev_Dept_Nm_En', index: 'Dev_Dept_Nm_En', width: 200, sortable: true, align: 'left', editable: false, search: false },
{ name: 'Client_Model_Nm1', index: 'Client_Model_Nm1', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm2', index: 'Client_Model_Nm2', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm3', index: 'Client_Model_Nm3', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Model_Status', index: 'Model_Status', width: 100, sortable: true, align: 'center', editable: true, search: false, edittype: 'checkbox', editoptions: { value: "Y:N" }},
{ name: 'Action', index: 'Action', width: 70, sortable: false, formatter: 'actions', viewable: false, search: false, formatoptions: { keys: true, editformbutton: false, editbutton: true, delbutton: false } }
],
pager: '#jqgProjectListPager',
rowNum: 10,
rowList: [10, 20, 30, 100],
sortname: 'PJT_Nm',
sortorder: "desc",
autowidth: true,
shrinkToFit: true,
viewrecords: true,
gridview: true,
loadonce: true,
rownumbers: true,
rownumWidth: 30,
height: 'auto',
width: 'auto',
caption: " " + "PROJECT LIST",
loadtext: "Loading ...",
emptyrecords: "No data to display!",
multiselect: false,
prmNames: { id: "Model_ID" },
cellsubmit: "remote",
});
// Navi(View, Add,...)search: false,
myGrid.jqGrid('navGrid', '#jqgProjectListPager', { add: false, edit: false, del: false, search: true, view: true, refresh: true },
//edit options
{
},
//add options
{},
//del options
{
},
//search options
{
searchOnEnter: true,
closeOnEscape: true,
reloadAfterSearch: true
},
// veiw options
{
width: 500, height: 'auto',
closeOnEscape: true,
beforeShowForm: function (form) {
},
afterShowForm: function (form) {
},
showHideColumn: function (form) {
}
}
);
$("#jqgProjectLists").jqGrid('inlineNav', '#jqgProjectListPager',
{
add: false,
edit: true,
editicon: "ui-icon-pencil",
save: true,
saveicon: "ui-icon-disk",
savetext : "Save",
cancel: true,
cancelicon: "ui-icon-cancel",
canceltext: "Cancel",
}
);
//handles the grid resize on window resize
ResizeJQGrid(myGrid, $(window));
}
In ConfigController
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateProjectListGrid(ProjectListsDetails oProjectListRow)
{
_configMgr.UpdateProjectListGrid(oProjectListRow, CurrentCaUser);
JqGridDataRequest jqgdRequest = new JqGridDataRequest();
JqGridDataResponse response = _configMgr.GetProjectLists(jqgdRequest, oProjectListRow, CurrentCaUser);
var jsonData = new
{
total = response.TotalPages,
page = jqgdRequest.page,
records = response.TotalRecords,
rows = response.Rows
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Well, you can show your spinner on beforeSubmit event and hide your spinner on afterSubmit event in edit options section of your jqgrid difinition, but you can use some different events from documentation.
//edit options
{
beforeSubmit : function(postdata, formid) {
$("#your-spinner").show();
return[true,''];
},
afterSubmit : function(response, postdata)
{
$("#your-spinner").hide();
return [true,'']
}
},

How to reload a jqGrid with new query string value

I load jqgrid with drop down values using onchange event.
But when i again choose some other value in drop down i need the jqgrid to show the corresponding values.
Here s how i load the jqgrid
function getGrid() {
var mOptometrist = $('#optOptometristList').val();// Drop down value
alert(mOptometrist);
//jQuery("#list").jqGrid().setGridParam({ url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '' }).trigger("reloadGrid");
jQuery("#jQGridDemo").jqGrid({
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '',
datatype: "json",
colNames: ['Id', 'Day', 'Start Time', 'End Time', 'Interval', 'Session', "Patient", 'Slots', 'Room Number'],
colModel: [
{ name: 'SlNo', index: '_id', width: 20, stype: 'text', editable: true, editoptions: { disabled: true} },
{ name: 'DayOfWeek', index: 'Day', width: 150, stype: 'text', sortable: true, editable: true, edittype: "select", formatter: 'select', editoptions: { value: getAllSelectOptions()} },
{ name: 'StartTime', index: 'StartTime', width: 150, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'EndTime', index: 'EndTime', width: 60, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'Interval', index: 'Interval', width: 80, align: "right", editable: true },
{ name: 'Session', index: 'Session', width: 40, align: "right", editable: true },
{ name: 'PatientsPerSlot', index: 'Patient', width: 80, align: "right", editable: true },
{ name: 'Slots', index: 'Slots', width: 150, sortable: false, editable: true },
{ name: 'RoomID', index: 'RoomNumber', width: 100, sortable: false, editable: true }
],
rowNum: 10,
mtype: 'GET',
loadonce: false,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
sortorder: 'desc',
caption: "List Employee Details",
editurl: 'Schedule.ashx?mOptometristId= ' + mOptometrist,
loadComplete: function () {
$("#jQGridDemo").setColProp('Day', { editoptions: { value: "1:Sunday;2:Monday;3:Tuesday"} });
}
});
You can use
url: "",
postData: {
mOptometristId: function () {
return $('#optOptometristList').val();
}
}
instead of
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + ''
Inside of onchange event you need just call $("#jQGridDemo").trigger("reloadGrid");. See the answer for more details.

JQGrid hide column and sorting in grouping

I have tried hidden: true, width: 0, display: false but still I see the column in the grid. Than I tried
myGrid.jqGrid('hideCol', ["Type"]);
issue 1:
which is working and column is hidden but once I show collapsed rows than this column is again visible.
issue 2:
I have groupCollapse: true . When I uncollapse and do the sorting than all the rows collapsed again.
Problem:
Collapse/UnCollapse the hidden column shouldn't visible.
When sorting rows collapse.
var myGrid = $('#list');
myGrid.jqGrid({
url: '/Admin/DynamicGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Date', 'First Name', 'Last Name', 'Email Address', 'Hidden'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, align: "center", editable: false, editoptions: { readonly: true }, key: true, sorttype: "int", searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']} },
{ name: 'DateEdited', index: 'DateEdited', width: 90, sorttype: "date", formatter: "date" },
{ name: 'FirstName', index: 'FirstName', width: 120, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']} },
{ name: 'LastName', index: 'LastName', width: 120, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']} },
{ name: 'Email', index: 'Email', width: 300, searchoptions: { sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge']} },
{ name: 'Type', index: 'Type', hidden: true, width: 0, display: false, search: false }
],
height: 'auto',
autowidth: true,
rownumbers: true,
rowNum: 30,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'Id',
viewrecords: true,
sortorder: "asc",
multiselect: true,
altRows: true,
altclass: 'myAltRowClass',
caption: "Master Grid",
jsonReader: { cell: "" },
grouping: true,
groupingView: { groupField: ['Type'],
groupColumnShow: [true],
groupText: ['<b>{0} - {1} Record(s)</b>'],
groupCollapse: false,
groupOrder: ['desc']
}
});
myGrid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true }, {}, {},
{ },
{ multipleSearch: true, overlay: false });
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
myGrid.jqGrid('navButtonAdd', '#pager', { caption: "Filter", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-pin-s', onClickButton: function () { myGrid[0].toggleToolbar(); } });
myGrid[0].toggleToolbar();
myGrid.jqGrid('hideCol', ["Type"]);
You can use either
myGrid.jqGrid('hideCol', "Type");
instead of myGrid.jqGrid('hideCol', ["Type"]); or use
groupColumnShow: [false]
instead of groupColumnShow: [true] because you want hide the column on which you do grouping.

Resources