I am trying to catch the moment when the grid is reloaded ( grid.trigger('reloadGrid') ) so that I can scroll it to the position needed. What happens at the moment is when I scroll it down it fires the event on every ajax call (like load more rows).
I tried using different events, which one is the right?
The code is simple initialization, nothing special here
jQuery("#filtergrid").jqGrid({
scroll:true,
scrollrows:true,
datatype: 'json',
url: '/bo/filter/index.php?func=get-list',
mtype: 'POST',
colNames:[
'ID',
'Title',
'Domain',
'Random',
'Men',
'Women',
'Snails',
'Min Age',
'Max Age',
'Read Days',
'Click Days',
'Join Days',
'Master',
'<img src="/assets/duplicate.gif">'
],
colModel :[
{name:'flt_id', index:'flt_id', width:50, key:true, search: false, key: true, fixed: true},
{name:'flt_title', index:'flt_title', width:215, fixed: true, formatter: formatName},
{name:'dmn_name', index:'dmn_name', width:220, fixed: true},
{name:'is_random', index:'is_random', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_man', index:'is_man', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_woman', index:'is_woman', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_snals', index:'is_snals', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'min_age', index:'min_age', search: false, width:53, fixed: true, align: 'center', sortable: false},
{name:'max_age', index:'max_age', search: false, width:58, fixed: true, align: 'center', sortable: false},
{name:'read_days', index:'read_days', width:60, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'click_days', index:'click_days', width: 60, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'join_days', index:'join_days', width:58, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'flt_master', index:'flt_master', width:50, fixed: true, search: false, formatter: stsMasterFormatter, align: 'center', sortable: false},
{name:'editlink', index:'editlink', width:20, fixed: true, formatter: formatEditImg, search: false}
],
lastSel: null,
pager: '#pager',
rowNum: 150,
rowList: [150],
sortname: 'dmn_name',
height: 320,
autowidth:false,
gridview: true,
sortorder: 'asc',
viewrecords: true,
caption: 'Filters',
footerrow : false,
userDataOnFooter : false,
altRows : true,
//postData : '',
multipleSearch:true,
jsonReader : { repeatitems: false },
pager: '#pager',
width: 1130, //shrinkToFit: true
gridComplete: function(){
jQuery("#filtergrid").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition)
}
});
Thanks!
Instead of gridComplete use loadComplete. Look at this thread for difference between the two events
Grid Complete vs Load Complete
Related
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 ?
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'
})
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,'']
}
},
I've using JQgrid, and using inline edit all working fine but i need to disable the enter key press. Means if user entering values and click enter it not need to do any action. Now its trying to store the data as per edit url. But i don't need this functionality.
Just Disable enter key press on JQGrid.
Can any one help?
Hi Oleg As u asked i'm pasting my code its bit lengthy so i'm posting part which needed.
$("#RevenueReporttbl").jqGrid({
contentType: "application/json; charset=utf-8",
mtype: 'GET',
// url: '/AMForecast/Index/',
height: 'auto',
// width: 'auto',
width: '1150',
gridview: true,
datatype: "local",
loadonce: true,
data: search_result,
colNames: ['ForecastId', 'CustomerId', 'Customer Name', 'UserId', 'Person', 'ProjectId', 'Project Name', 'Edit', 'Ytd'],
colModel: [
{ name: 'ForecastId', index: 'ForecastId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'CustomerId', index: 'CustomerId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'CustomerName', index: 'CustomerName', width: 130, editable: false, sortable: false, fixed: true },
{ name: 'UserId', index: 'UserId', width: 130, editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'Manager', index: 'Manager', align: 'left', width: 130, editable: false, sortable: false, fixed: true },
{ name: 'ProjectId', index: 'ProjectId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'ProjectName', index: 'ProjectName', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'Edit', index: 'Edit', editable: false, width: 40, align: 'center', hidden: false, sortable: false, fixed: true },
{ name: 'Ytd', index: 'Ytd', editable: false, width: 40, align: 'right', sortable: false, summaryType: 'sum', fixed: true }],
rowNum: 99,
pager: '#pager',
footerrow: true,
userDataOnFooter: true,
altRows: false,
rowList: [100, 200, 300, 400, 500],
multipleSearch: true,
//multiselect: true,
multipleGroup: true,
shrinkToFit: true,
viewrecords: true,
sortorder: "desc",
subGrid: true,
grouping: true, //changed
groupingView: {
groupField: ['CustomerType'],
groupSummary: [true],
groupColumnShow: [false],
groupText: ['<b>{0}</b>'],
groupCollapse: false,
groupOrder: ['asc'],
groupDataSorted: true
},
jsonReader: {
root: "gridModel",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id",
subgrid: {
root: "gridModel",
repeatitems: true,
cell: "cell",
id: "id"
}
}
So i'm using subgrid also with read only option.
Please tell how to make enter key false? I dont want to do anything when i clicked enter in edit mode.
Did you see the part of the docs about the keys setting:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
It says:
If keys is true, then the remaining settings – successfunc, url,
extraparam, aftersavefunc, errorfunc and afterrestorefunc - are passed
as parameters to the saveRow method when the [Enter] key is pressed
(saveRow does not need to be defined as jqGrid calls it
automatically). For more information see saveRow method below.
I have the below code in my jqgrid
<script type="text/javascript">
jQuery(document).ready(function() {
var grid = jQuery("#list");
$("#editBtn").click(function() {
alert("hi"); });
jQuery("#list").jqGrid({
url: '<%= Url.Action("DynamicGridData") %>',
datatype: 'json',
mtype: 'POST',
colNames: ['checkbox', 'Id','col1','col2' ],
colModel: [
{ name: 'checkbox', index: 'checkbox', sortable: false, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
{ name: 'Id', index: 'Id', search: false, stype: 'text', sortable: true, sorttype: 'int', hidden: true },
{ name: 'col1', index: 'col1', search: false, stype: 'text', sortable: true, sorttype: 'int', search: false, hidden: true },
{ name: 'col2', index: 'col2', sortable: true, search: false, width: 30, stype: 'int' } ],
pager: jQuery('#pager'),
rowNum: 40,
rowList: [20, 40, 60, 100],
sortname: 'Id',
sortorder: 'asc',
gridview: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
toppager: true,
height: "100%",
width: "100%",
caption: 'Grid Data'
});
});
I can fire the test alert in the editBtn function, how can a user access the id column of the records that have their checkboxes selected by the user?
use the following code to get the Id column data of which checkboxes are ticked...
var grid = jQuery("#list");
$("#editBtn").click(function() {
var str = '';
var data = grid.getRowData();
for(i=0;i<data.length;i++){
if(data[i].checkbox==='Yes')
str += data[i].Id+',';
}
alert(str);
});
str variable consists of the values of Id column for which checkbox is selected by user.