Menu
I'm using latest free-jqgrid 4.9.2
My toolbar(toppager) buttons goes to next line though loads of space there in grid width. Please find attached screen shot. Any reason ?
I tried the below CSS code as well, but no luck;
/*Toolbar customization*/
.ui-jqgrid .ui-jqgrid-toppager {
width: auto !important;/*1200 px*/
}
Full jqGrid script -
$(document).ready(
function() {
/**
* User code tab
*/
var userGrid = $("#userGrid"),
oldFrom = $.jgrid.from,
lastSelected;
var oldFrom = $.jgrid.from;
var lastSelected;
$.jgrid.from = function(source, initalQuery) {
var result = oldFrom.call(this, source, initalQuery),
old_select = result.select;
result.select = function(f) {
lastSelected = old_select.call(this, f);
return lastSelected;
};
return result;
};
$("#userGrid").jqGrid({
//sortable: true,//Columns reordering need to be disabled for frozen column working
//scroll: 1,//true scrolling rows - paging is not working when we enable scrolling. give fixed height then this will go good.. :)
url: 'list_user_detail',
datatype: 'json',
colNames: [jQuery.i18n.prop('userdetail.table.column.id'),
jQuery.i18n.prop('userdetail.table.column.username'),
jQuery.i18n.prop('userdetail.table.column.password'),
jQuery.i18n.prop('userdetail.table.column.active'),
jQuery.i18n.prop('userdetail.table.column.firstname'),
jQuery.i18n.prop('userdetail.table.column.lastname'),
jQuery.i18n.prop('userdetail.table.column.department'),
jQuery.i18n.prop('userdetail.table.column.email'),
jQuery.i18n.prop('userdetail.table.column.dob'),
jQuery.i18n.prop('userdetail.table.column.country'),
jQuery.i18n.prop('userdetail.table.column.role'),
""
],
colModel: [{
name: 'id',
index: 'id',
width: 80,
editable: true,
sortable: true,
align: 'center',
sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'] //for filter functionality - specify the search options
},
editoptions: {
readonly: true,
size: 5
},
formoptions: {
rowpos: 1,
colpos: 1
}
}, {
name: "username",
index: "username",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
frozen: true,
editoptions: {
size: 30
},
editrules: {
required: true,
custom: true,
custom_func: usernameCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.username')
}
}, {
name: "password",
index: "password",
width: 100,
align: 'center',
sortable: false,
editable: true,
hidden: true,
hidedlg: true, //to remove this column from column chooser as well
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
frozen: true,
editoptions: {
size: 30
},
//editrules are set as part of form edit validation so we can mark required for all mandatory fields
editrules: {
required: true,
custom: true,
edithidden: true,
custom_func: passwordCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.password')
}
}, {
name: "active",
index: "active",
width: 80,
sortable: true,
align: 'center',
stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
editable: true,
edittype: "select",
formatter: "select",
editoptions: {
value: ":;1:Yes;0:No" //Default 0
},
cellattr: function(rowId, val, rawObject) {
if (val == 1) {
return " class='ui-state-useractive'";
} else if (val == 0) {
return " class='ui-state-userinactive'";
}
},
formoptions: {
//rowpos: 3,
//colpos: 1
}
}, {
name: "firstname",
index: "firstname",
width: 120,
align: 'center',
sortable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editable: true,
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "lastname",
index: "lastname",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "department",
index: "department",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "email",
index: "email",
align: 'center',
width: 220,
sortable: false,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: true,
custom: true,
custom_func: emailCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.email')
}
}, {
name: "birthday",
index: "birthday",
width: 120,
sortable: true,
align: 'center',
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en'],
dataInit: function(e) {
$(e).datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
}
}, //for Search/Filter functionality - specify the search options
editable: true,
editoptions: {
size: 10,
dataInit: function(e) {
$(e).datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
}
},
formoptions: {
//rowpos: 3,
//colpos: 2
}
}, {
name: "country",
index: "country",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
edittype: 'text',
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "role",
index: "role",
width: 100,
sortable: true,
align: 'center',
stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
//searchoptions: {sopt:['cn','eq','ne','bw','bn','nc','ew','en']},//for Search/Filter functionality - specify the search options
editable: true,
edittype: "select",
formatter: "select",
editoptions: {
value: ":;ADMIN:Admin;USER:User" //Default User
},
formoptions: {
//rowpos: 3,
//colpos: 1
}
}, {
name: "oldPassword",
index: "oldPassword",
width: 10,
sortable: false,
editable: true,
hidden: true,
hidedlg: true //to remove this column from column chooser as well
}],
pager: "#userPager",
iconSet: "fontAwesome",
rowNum: 8,
rownumbers: false, //Row numbers
rowList: [8, 12, 20],
height: 'auto',
width: 'auto', //Autowidth
loadonce: true,
sortable: true,
sortname: 'No',
sortorder: 'desc',
viewrecords: true,
shrinkToFit: false,
ignoreCase: true, //Case insensitive search
gridview: true, //renders data more faster??
//viewsortcols: true,//easily show what columns are sortable - With this sorting not working.
caption: jQuery.i18n.prop('userdetail.table.caption'),
editurl: "edit_user_detail",
multiselect: false,
toppager: true, //Toolbar option
cloneToTop: true, //Toolbar option
loadComplete: function() {
this.p.lastSelected = lastSelected; // set this.p.lastSelected - to find out selected data from filter..
}
});
// Navigator tab inside pager grid
jQuery("#userGrid").jqGrid('navGrid', '#userPager', {
//General options
edit: false,
add: false,
del: false,
search: false,
view: false,
refresh: false,
cloneToTop: true //Must for top tool bar - this will close all the pager items in top tool bar.
}, {
// edit options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true, //Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40], //Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeAfterEdit: true,
afterSubmit: refreshData // Need to refresh the data in the table to reflect the hashed password back to this table.
}, {
//Add options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
reloadAfterSubmit: false,
closeAfterAdd: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeOnEscape: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
afterSubmit: refreshData // Need to refresh the data in the table to reflect the primary key added to this table.
}, {
// del options
reloadAfterSubmit: false,
closeOnEscape: true
}, {
//Search options
multipleSearch: true,
multipleGroup: true
}, {
//View options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
viewCaption: jQuery.i18n.prop('userdetail.table.button.viewuser'),
closeOnEscape: true
});
/*Search/Filter toolbar*/
jQuery("#userGrid").jqGrid('filterToolbar', {
searchOperators: true,
searchOnEnter: false,
jqModal: false,
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
closeOnEscape: true,
overlay: 0,
stringResult: true
});
//Top Toolbar options & Buttons
//before adding any buttons remove all the items copied/cloned from the bottom pager
$(".ui-paging-info", userGrid_toppager).remove();
$("#add_userGrid_top", userGrid_toppager).remove(); //remove add icon from top pager
$("#edit_userGrid_top", userGrid_toppager).remove(); //remove edit icon from top pager
$("#del_userGrid_top", userGrid_toppager).remove(); //remove delete icon from top pager
$("#view_userGrid_top", userGrid_toppager).remove(); //remove view icon from top pager
$("#search_userGrid_top", userGrid_toppager).remove(); //remove search icon from top pager
$("#refresh_userGrid_top", userGrid_toppager).remove(); //remove refresh icon from top pager
$("#userGrid_toppager_center", userGrid_toppager).remove(); //remove center pager details from top pager
//Toolbar button to add a config
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.adduser'),
title: jQuery.i18n.prop('userdetail.table.title.add'),
buttonicon: 'fa-user-plus',
onClickButton: function() {
jQuery("#userGrid").jqGrid('editGridRow', "new", {
//Add options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
afterSubmit: refreshData, // Need to refresh the data in the table to reflect the primary key added to this table.
closeAfterAdd: true,
/*beforeShowForm: function() { //NOT WORKING
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}*/
});
}
});
//Toolbar button to edit a config
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.edituser'),
title: jQuery.i18n.prop('userdetail.table.title.edit'),
buttonicon: 'fa-users',
onClickButton: function() {
var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
if (gr != null)
jQuery("#userGrid").jqGrid('editGridRow', gr, {
//Edit options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeAfterEdit: true,
afterSubmit: refreshData, // Need to refresh the data in the table to reflect the hashed password
/*beforeShowForm: function() { //NOT WORKING !!
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}*/
});
else {
$.jgrid.info_dialog.call(
this,
jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
jQuery.i18n.prop('application.common.button.close') // text in the button
);
}
}
});
//Toolbar button to delete a user
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.deleteuser'),
title: jQuery.i18n.prop('userdetail.table.title.delete'),
buttonicon: 'fa-user-times',
onClickButton: function() {
var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
if (gr != null)
jQuery("#userGrid").jqGrid('delGridRow', gr, {
reloadAfterSubmit: false,
closeOnEscape: true
});
else {
$.jgrid.info_dialog.call(
this,
jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
jQuery.i18n.prop('application.common.button.close') // text in the button
);
}
}
});
//Column chooser button in top toolbar
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('application.common.button.columns'),
title: jQuery.i18n.prop('userdetail.table.title.choosecolumn'),
buttonicon: 'fa-columns',
onClickButton: function() {
jQuery("#userGrid").jqGrid('columnChooser');
}
});
//Button to toggle toolbar search/filter option
jQuery("#userGrid").jqGrid('navButtonAdd', "#userGrid_toppager", {
caption: jQuery.i18n.prop('application.common.button.search'),
title: jQuery.i18n.prop('userdetail.table.title.search'),
buttonicon: 'fa-toggle-on',
onClickButton: function() {
userGrid[0].toggleToolbar();
}
});
//Refresh Button as auto refresh not exists for user detail
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('application.common.button.refresh'),
title: jQuery.i18n.prop('userdetail.table.title.refreshuserdetail'),
buttonicon: 'fa fa-cog fa-spin',
onClickButton: function() {
refreshData();
}
});
//Frozen columns - NOT needed as of now as no. of columns are limited.
//jQuery("#userGrid").jqGrid('setFrozenColumns');
//Grid resize
jQuery("#userGrid").jqGrid('gridResize', {
minWidth: 550,
maxWidth: 1300,
minHeight: 80,
maxHeight: 350
});
/**
* Function to refresh the data after a new row inserted in DB. If
* not then when we update the same row again, because of no primary
* key reflected in client side, a fresh row will be inserted. Also
* if we are refreshing the grid, then immediate delete of this row
* will fail because again primary key(i.e. id) not reflected in the
* client side
*
* NOT SURE IS THERE ANY OTHER BETTER WAY TO DO THIS !!!!
*/
function refreshData() {
jQuery("#userGrid").jqGrid("setGridParam", {
datatype: 'json',
url: 'list_user_detail',
page: 1
}).trigger("reloadGrid");
return [true, '']; //TO make sure that control goes back to jqGrid inbuild configs like closeafterAdd etc.
}
//Username Validation checks !!
function usernameCheck(value) {
if (checkLength(value, 6, 50) && checkRegexp(value, /^[a-z]([0-9a-z_.])+$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.username'), ""];
}
}
//Password Validation checks !!
function passwordCheck(value) {
if (checkLength(value, 6, 60)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.password'), ""];
}
}
//Firstname & Lastname Validation checks !!
function onlyAblhabetCheck(value) {
if (checkLength(value, 1, 50) && checkRegexp(value, /^[a-z]([a-z ])+$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.firstname'), ""];
}
}
//Email Validation checks !!
function emailCheck(value) {
if (checkLength(value, 6, 100) && checkRegexp(value, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.email'), ""];
}
}
//Birthday Validation checks !!
function birthdayCheck(value) {
var now = new Date();
if (value < now) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.dob'), ""];
}
}
/*Check length of particular field*/
function checkLength(o, min, max) {
if (o.length > max || o.length < min) {
//o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
/*Check regex/format of particular field*/
function checkRegexp(o, regexp) {
if (!(regexp.test(o))) {
//o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
});Image attached - with round & question mark..!
243
asked Jan 31 '26 02:01
You can solve your main problem by adding one line of code:
$("#userGrid_toppager_right").hide();
It hides the right part of the top pager and make the whole top page be used for the toolbar.
Additionally I would recommend you to review your existing code. It could be reduce in more as twice time and could be simplified if you would use more possibilities of free jqGrid. I'll mention below only some suggestions.
$.jgrid.from and later in loadComplete set lastSelected parameter of jqGrid. It's not needed in free jqGrid. You cen remove the code and just use built-in lastSelectedData option instead of lastSelected. The option lastSelectedData exist since free jqGrid 4.8 (see the demo from README48)index properties from all colModel items.colModel contains a lot of duplicates. I would recommend you to use column templates. You can either define some local objects and use there are a templates or to define the templates under $.jgrid.cmTemplate The properties of $.jgrid.cmTemplate can be used as string values of template property in colModel. Some common properties (like align: 'center' or editable: true) you can include in cmTemplate option of jqGrid. The option changes the default value of colModel properties and you can remove the duplicates from every colModel items. I would recommend you to read the old answer and the pull request.jQuery("#userGrid") and jQuery.i18n.prop. You should understand that it's expression which will be evaluated every time in your code. It would be practical to introduce variables like var $grid = jQuery("#userGrid"), localeProp = jQuery.i18n.prop; and use the variables in your code. The function refreshData and all onClickButton can use jQuery(this) instead of jQuery("#userGrid").pager: "#userPager" to pager: true and remove <div id="userPager"></div> from HTML markup. Free jqGrid will create the div for the page in the same way like it creates the div for top pager.navGrid to the following:jQuery("#userGrid").jqGrid('navGrid', '#userGrid_toppager', {
//General options
edit: false,
add: false,
del: false,
search: false,
view: false,
refresh: false
});
which creates navigator bar only for the top pager.
$("#...", userGrid_toppager).remove(); can be replaced with one line of code$("#userGrid_toppager_center,#userGrid_toppager_right").hide();
which hides the right and the middle parts of the top pager.
navGrid. You can define navOptions, formEditing, formDeleting, searching as jqGrid parameters which would specify default values from navGrid, editGridRow and so on. If can reduce and simplify the code, make it more readable and easy to maintain.
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
