JQGrid search functionality works if two same name column interchanges - jqgrid

am using JQGrid and enabled Search to true . everything is working fine.
scenario: there are two budget column one is for footer total and another is for column
$("#BudgetGrid").jqGrid({
datatype: 'local',
data: JSON.parse($('#JsonData').val()),
colModel: [
{
name: 'BudgetId',
hidden: true,
classes: 'budgetid'
},
{
name: 'Month',
hidden: true
},
{
name: 'MonthInWords',
resizable: true,
//align: 'center',
label: 'Month',
ignoreCase: true
},
{
name: 'Budget',
resizable: true,
align: 'center',
label: 'Budget',
ignoreCase: true,
formatter: function (cellvalue, options, rowObject, rowid) {
return '<input type="textbox" class="form-control number" id="budget" value=\"' + rowObject.Budget + '\"></input>';
}
},
{
name: 'Budget',
resizable: true,
label: 'Budget',
ignoreCase: true,
hidden: true,
sorttype: 'number',
summaryType: 'sum',
formatter: 'integer',
formatoptions: {
decimalSeparator: '.', decimalPlaces: 2, suffix: '', thousandsSeparator: ',', prefix: ''
}
}
],
loadonce: true,
pager: "#BudgetGridPager",
viewrecords: true,
ignoreCase: true,
rowNum: 12,
footerrow: true,
userDataOnFooter:true,
gridComplete: function () {
var objRows = $("#BudgetGrid tbody tr");
var objHeader = $("#BudgetGrid tbody tr td");
if (objRows.length > 1) {
var objFirstRowColumns = $(objRows[1]).children("td");
for (i = 0; i < objFirstRowColumns.length; i++) {
$(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width"));
}
}
}
, loadComplete: function (data) {
var $grid = $('#BudgetGrid');
//debugger;
$grid.jqGrid('footerData', 'set', { MonthInWords: "Total" });
$grid.jqGrid('footerData', 'set', { 'Budget': ($grid.jqGrid('getCol', 'Budget', false, 'sum')).toFixed(3) }, false);
}
});
$("#BudgetGrid").jqGrid('filterToolbar', {
autosearch: true,
stringResult: false,
searchOnEnter: false,
defaultSearch: "cn"
});
when i write hidden budget up search column search wont work
but when i write budget without hidden and next budget hidden , search works fine.
can anyone please say the reason behind it

Related

jqgrid v5.2.1 with subgrid and local data CRUD operations

Here is my scenario. My jqgrid v5.2.1 doesn't display any data when a page loads up. It is by design. Users will either have to enter all the data for the grid and subgrid manually or click a button to load a default data from the server in the json format via
$("#jqGrid").jqGrid('setGridParam', { datatype: 'local', data: dataResponse.groups }).trigger("reloadGrid");
Users perform CRUD operations locally until the data is right in which case a button is clicked and the grids data goes to the server via $("#jqGrid").jqGrid('getGridParam', 'data').
Edit/Delete operations work fine with the default data loaded but I have a problem with adding new records.
Id's of new rows are always _empty(which is fine because the server side will generated it), but the new rows from the subgrids are not transferred to the server. The question is how to establish the relationship between the newly created rows in the main grid and associated rows in the subgrid and then transfer everything to the server for processing?
Here is the code:
var mainGridPrefix = "s_";
$("#jqGrid").jqGrid({
styleUI: 'Bootstrap',
datatype: 'local',
editurl: 'clientArray',
postData: {},
colNames: ['Id', 'Group', 'Group Description', 'Markets', 'Group sort order'],
colModel: [
{ name: 'id', key: true, hidden: true },
{ name: 'name', width: 300, sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 } },
{ name: 'description', width: 700, sortable: false, editable: true, editoptions: { maxlength: 256 } },
{ name: 'market', width: 200, sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 } },
{ name: 'sortOrder', width: 130, sortable: false, editable: true, formatter: 'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: ',', decimalPlaces: 2 } }
],
sortname: 'Id',
sortorder: 'asc',
idPrefix: mainGridPrefix,
subGrid: true,
//localReader: { repeatitems: true },
jsonReader: { repeatitems: false},
autowidth: true,
shrinkToFit: true,
loadonce: true,
viewrecords: true,
rowNum: 5000,
pgbuttons: false,
pginput: false,
pager: "#jqGridPager",
caption: "Group Template",
altRows: true,
altclass: 'myAltRowClass',
beforeProcessing: function (data) {
var rows = data.rows, l = rows.length, i, item, subgrids = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.groupItems) {
subgrids[item.id] = item.groupItems;
}
}
data.userdata = subgrids;
},
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
subgrids = $(this).jqGrid("getGridParam", "userData"),
subgridPagerId = subgridDivId + "_p";
$("#" + $.jgrid.jqID(subgridDivId)).append($subgrid).append('<div id=' + subgridPagerId + '></div>');
$subgrid.jqGrid({
datatype: "local",
styleUI: 'Bootstrap',
data: subgrids[pureRowId],
editurl: 'clientArray',
colNames: ['Item', 'Item Description', 'Health Standard', 'Sort order', 'Statuses', 'Risks', 'Solutions', 'Budgets'],
colModel: [
{ name: 'itemName', width: '200', sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 } },
{ name: 'itemDescription', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'healthStandard', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'itemSortOrder', width: '200', sortable: false, editable: true, formatter: 'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: ',', decimalPlaces: 2 } },
{ name: 'statuses', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'risks', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'solutions', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'budgets', width: '400', sortable: false, editable: true, editoptions: { maxlength: 100 } }
],
//rownumbers: true,
rowNum: 5000,
autoencode: true,
autowidth: true,
pgbuttons: false,
viewrecords: true,
pginput: false,
jsonReader: { repeatitems: false, id: "groupId" },
gridview: true,
altRows: true,
altclass: 'myAltRowClass',
idPrefix: rowId + "_",
pager: "#" + subgridPagerId
});
$subgrid.jqGrid('navGrid', "#" + subgridPagerId, { edit: true, add: false, del: true, search: true, refresh: false, view: false }, // options
{ closeAfterEdit: true }, // edit options //recreateForm: true
{ closeAfterAdd: true }, // add options
{}, //del options
{} // search options
);
}
});
$('#jqGrid').navGrid('#jqGridPager', { edit: true, add: false, del: true, search: true, refresh: false, view: false }, // options
// options for Edit Dialog
{
editCaption: "Edit Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
bottominfo: "<br/>",
recreateForm: true,
closeOnEscape: true,
closeAfterEdit: true
},
// options for Add Dialog
{
//url:'clientArray',
addCaption: "Add Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
bottominfo: "<br/>",
recreateForm: true,
closeOnEscape: true,
closeAfterAdd: true
},
// options for Delete Dailog
{
caption: "Delete Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
msg: "Are you sure you want to delete?",
recreateForm: true,
closeOnEscape: true,
closeAfterDelete: true
},
// options for Search Dailog
{
caption: "Search Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
recreateForm: true,
closeOnEscape: true,
closeAfterDelete: true
}
);
There was a small bug in the form editing which is fixed now. Thank you for help us to find them.
Now to the problem.
When you add data in main grid it is natural to add a unique id of every row. Since of the bug instead of inserting a row with the Guriddo id Generator there was a wrong insertion with id = s_empty. This causes every inserted row in main grid to have same id, which is not correct.
The fix is published in GitHub and you can try it.
We have updated your demo in order to insert correct the data in the subgrid. The only small addition is in afterSubmit event in add mode, where the needed item is created.
Hope this will solve the problem
Here is the demo with the fixed version
Edited
At server you can analyze the id column if contain string 'jqg', which will point you that this is a new row. The corresponding id for the subgrid is in userData module which will connect the main grid id with the subgrid data
EDIT 2
One possible solution to what you want to achieve is to get the main data and the to get the subgrid data using userData property. After this make a loop to main data and update it like this
var maindata = $("#jqGrid").jqGrid('getGridParam', 'data');
var subgrids = $("#jqGrid").jqGrid('getGridParam', 'userData');
for(var i= 0;i < maindata.length;i++) {
var key = maindata[i].id;
if(subgrids.hasOwnProperty(key) ) {
if(!maindata[i].hasOwnProperty(groupItems) ) {
maindata[i].groupItems = [];
}
maindata[i].groupItems = subgrids[key];
}
}
The code is not tested, but I think you got the idea.
The other way is to update the groupitems on every CRUD of subgrid, which I think is not so difficult to achieve.

JqGrid paging with lots of grids

I have a single page ASP.Net web forms application. And lots of grids. In my application, there is some links to hide or show grids. The problem is, when i start the application, the pagination of the displayed grid is working properly. (I tried this for each grid). But when I Click the link for hide a grid and show another grid, paging does not working. The grid initialization is;
$('#tblApplicationSettings').jqGrid({
url: cms.util.getAjaxPage(),
cellLayout: cms.theme.list.cellLayout,
hoverrows: false,
forceFit: true,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "",
id: "0"
},
width: 900,
height: 400,
datatype: 'local',
colNames: ['SettingId',
'Description',
'Name',
'Value',
'ServerId',
'IsReadOnly',
''
],
colModel: [
{
name: 'SettingId',
index: 'SettingId',
hidden: true
},
{
name: 'Description',
index: 'Description',
search: false,
editable: true,
sortable: false,
width: 150,
inlineEditable: true
},
{
name: 'Name',
index: 'Name',
search: false,
editable: false,
sortable: false,
width: 150,
inlineEditable: false
},
{
name: 'Value',
index: 'Value',
search: false,
editable: true,
sortable: false,
width: 250,
inlineEditable: true,
},
{
name: 'ServerId',
index: 'ServerId',
search: false,
editable: true,
sortable: false,
width: 150,
formatter: 'select',
edittype: 'select',
editoptions: {
value: options,
},
inlineEditable: true
},
{
name: 'IsReadOnly',
index: 'IsReadOnly',
hidden: true
},
{
name: 'JsUsage',
index: 'JsUsage',
search: false,
editable: true,
sortable: false,
width: 150,
inlineEditable: true
},
],
onSelectRow: function (id) {
if (id && id !== lastSelection) {
jQuery('#grid').jqGrid('restoreRow', lastSelection);
lastSelection = id;
}
var columnModel = $('#grid').getGridParam('colModel');
var colNames = new Array();
$.each(columnModel, function (index, column) {
colNames.push(column.name);
if (isReadOnly || !column.inlineEditable) {
column.editable = false;
}
else {
column.editable = true;
}
if (column.edittype == "select") {
column.editoptions.dataEvents = [{
type: 'change',
fn: function (e) {
var newServerId = $(this).val();
that.isServerIdChanged = true;
if (newServerId == "null") {
}
}
}]
}
});
var row = $('#grid').getRowData(id);
var isReadOnly = row.IsReadOnly == "true" ? true : false;
if (isReadOnly) {
alert("row is not editable");
return null;
}
jQuery("#grid").jqGrid('editRow', id, {
keys: true,
extraparam: {
dataType: 'updateSetting',
colNames: JSON.stringify(colNames),
settingName: row.Name,
settingId: row.SettingId
},
successfunc: function (result) {
$("#grid").trigger('reloadGrid');
}
});
},
editurl: '/Ajax.ashx',
rowNum: 25,
direction: "ltr",
scroll: 1,
gridview: true,
pager: '#divPager',
viewrecords: true,
});
$('#grid').setGridParam({ datatype: "json", postData: { dataType: 'getSettings' } });
$('#grid').jqGrid('navGrid', '#divPager', { edit: false, add: false, del: false, search: false, refresh: false });
$('#grid').trigger('reloadGrid');
like this for all grids. I need tips or helps. Thanks.

Jqgrid cannot achieve paging when use loadonce: true

When i use "loadonce" set to be "true",my problem is searching or filtering works ,but pagination doesn't work.If i change loadonce to be false,searchong can't work,but pagination works.
How do I make sure I set the data type to be json during the pagination alone.
$grid = $("#list"),
numberTemplate = {
formatter: 'number',
align: 'right',
sorttype: 'number',
editrules: {
number: true,
required: true
},
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']
}
};
var myDelOptions = {
onclickSubmit: function (rp_ge, rowid) {
// we can use onclickSubmit function as "onclick" on "Delete" button
// alert("The row with rowid="+rowid+" will be deleted");
// delete row
grid.delRowData(rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
grid.trigger("reloadGrid", [{
page: grid[0].p.page
}]);
}
return true;
},
processing: true
};
$.extend($.jgrid.inlineEdit, {
keys: true
});
$grid.jqGrid({
url: $('#contextPath').val() +"/globalcodes/getList?masterCodeSysid="+$('#Sysid').val(),
datatype: 'json',
colNames: ['Sequence', 'Detail Code', 'Code Description', 'Status', 'Cross Referrences', '', ''],
colModel: [ {
name: 'seqNumber',
width: 50,
editable: false,
search:true
}, {
name: 'dtlCode',
width: 50,
editable: true,
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'codeDesc',
width: 200 ,
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'statusFlag',
width: 150,
edittype:"select",
formatter : 'select',
editoptions:{value:"Y:Active;N:Inactive"},
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'crossReferrenced',
width: 100,
editable: false,
searchoptions:{sopt:['cn','eq','ne']}
},{
name: 'act',
index: 'act',
width: 55,
align: 'center',
search: false,
sortable: false,
formatter: 'actions',
searchoptions:{sopt:['cn','eq','ne']} ,
editable: false,
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit: function (rowid) {
$('#add_detail_code').attr('disabled','disabled').addClass("btnDisabled").removeClass("btnNormalInactive");
},
onSuccess: function (jqXHR) {
$grid.setGridParam({ rowNum: 10 }).trigger('reloadGrid');
},
afterSave: function (rowid) {
$('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
},
afterRestore: function (rowid) {
$('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
},
delOptions: myDelOptions
}
},{
name: 'dtlCodeSysid',
hidden: true
}],
cmTemplate: {
editable: true
},
jsonReader: {id:'dtlCodeSysid',
},
rowList: [5, 10, 20],
pager: '#detailCodePager',
gridview: true,
ignoreCase: true,
rowNum:10,
rownumbers: false,
sortname: 'col1',
loadonce:true,
viewrecords: true,
sortorder: 'asc',
height: '100%',
deepempty: true,
editurl: $('#contextPath').val() +"/globalcodes/saveMasterCodeDetails?masterCodeSysId="+$('#masterCodeSysid').val(),
//caption: 'Usage of inlineNav for inline editing',
});
$grid.jqGrid('filterToolbar', {
searchOperators: true
});
$grid.jqGrid('navGrid', '#detailCodePager', {
add: false,
edit: false,
del: false,
search:false,
refresh:true
});
You don't posted any code which you use, so I try to guess. Probably you implemented pagination on the server side and returns only one page of data in case of usage loadonce: true option. Correct usage of loadonce: true on the server side would be returning all data, the data need be just correctly sorted based on sorting parameters sent by jqGrid. By the way the format of returned data from the server could be just array of items instead of wrapping results in { "total": "xxx", "page": "yyy", "records": "zzz", "rows" : [...]}. In case of usage loadonce: true option the data from total, page and records will be ignored and calculated based on the size of array returned data.

change searchoptions in jqgrid toolbar filter with setColProp

I'm using jqGrid 4.4.5 and the toolbar filter.The grid can reloads base on condition(for example inbox or outbox letters).I use select options of a column.I need to change the select options of a 'type' column.For example if the grid show 'inbox letter' Then 'select options' show 'A,B' Otherwise show 'C,D'.
I use this code for create grid:
function creatGrid() {
var inboxSearchOptions = 'A:A;B:B;All:';//inbox Options
var inboxEditOptions = 'A:A;B:B';
var outboxSearchOptions = 'C:C;D:D;ALL:';
var outboxEditOptions = 'C:C;D:D';
grid.jqGrid({
url: 'jqGridHandler.ashx',
datatype: 'json',
width: 100,
height: 200,
colNames: ['Email', 'Subject', 'Type', 'ID'],
colModel: [
{ name: 'Email', width: 100, sortable: false, },
{ name: 'Subject', width: 100, sortable: false, },
{
name: 'Type',
width: 100,
search: true,
formatter: 'select',
edittype: 'select',
editoptions: { value: (($.cookie("calledFrom") == "inbox") ? inboxEditOptions : outboxEditOptions), defaultValue: 'ALL' },
stype: 'select',
searchoptions: { sopt: ['eq', 'ne'], value: (($.cookie("calledFrom") == "inbox") ? inboxSearchOptions : outboxSearchOptions) },
},
{ name: 'ID', width: 100, sortable: false, hidden: true, key: true },
],
rowNum: 20,
loadonce: true,
rowList: [5, 10, 20],
recordpos: "left",
ignoreCase: true,
toppager: true,
viewrecords: true,
multiselect: true,
sortorder: "desc",
scrollOffset: 1,
editurl: 'clientArray',
multiboxonly: true,
jsonReader:
{
repeatitems: false,
},
gridview: true,
}
}
Then i use this code for reload grid:
function doReloadMainGrid() {
switch (($.cookie("calledFrom")) ) {
case "inbox":
{
window.grid.setColProp("Type", {
searchoptions: {
value: inboxSearchOptions,
},
editoptions: {
value: inboxEditOptions
},
});
}
break;
case "outbox":
window.grid.setColProp("Type", {
searchoptions: {
value: outboxSearchOptions,
},
editoptions: {
value: outboxEditOptions
},
});
break;
}
var url = createUrl();
window.grid.setGridParam({ datatype: 'json' });
window.grid.setGridParam({ url: url });
window.grid.trigger("reloadGrid", { current: true });
}
But the 'setColProp' has no effect.I read this answer but it was not a good solution for me.What i got wrong?
Thanks in advance
setColProp don't change existing filter toolbar. If you just get the values from cookie or localStorage than it would be better to do this before the filter toolbar will be created by filterToolbar method.
You can use destroyFilterToolbar to recreate the filter toolbar using new values in colModel. If you have to use old version of jqGrid you can just follow the answer which describe how to add the code destroyFilterToolbar to old version of jqGrid.

how to set the jqgrid column width, and re-sizable, in a scrollable jqgrid?

i am using jqgrid and facing a problem with column width
here is my js code
jQuery(document).ready(function () {
var grid = jQuery("#grid");
grid.jqGrid({
url: '/Admin/GetUserForJQGrid',
datatype: 'json',
mtype: 'Post',
cellsubmit: 'remote',
cellurl: '/Admin/GridSave',
//formatCell: emptyText,
colNames: ['Id', 'Privileges', 'First Name', 'Last Name', 'User Name', 'Password', 'Password Expiry', 'Type', 'Last Modified', 'Last Modified By', 'Created By', ''],
colModel: [
{ name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true } },
{ name: 'Privileges', index: 'Privileges', width: "350", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
{ name: 'FirstName', index: 'FirstName', width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'LastName', index: 'LastName',width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'UserName', index: 'UserName', width:300,align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'Password', index: 'Password',width:400, align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
{
name: 'Password_Expiry',width:250, index: 'Password_Expiry', align: "left", resizable: true, editable: true, editoptions: {
size: 20, dataInit: function (el) {
jQuery(el).datepicker({
dateFormat: 'yy-mm-dd', onSelect: function (dateText, inst) {
jQuery('input.hasDatepicker').removeClass("hasDatepicker")
return true;
}
});
}
}
},
{
name: 'Type', width: "250", index: 'Type', sorttype: 'text', align: "left", resizable: true, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
value: {
'Normal': 'Normal',
'Sales': 'Sales',
'Admin': 'Admin',
'SuperAdmin': 'SuperAdmin'
},
dataEvents: [
{
type: 'change',
fn: function (e) {
var row = jQuery(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
jQuery("#grid").saveRow(rowId, false, 'clientArray');
}
}
]
}
},
{ name: 'Modified',width:250, index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'ModifiedBy', width:250, index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'CreatedBy', width:250,index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'Delete',width:50, index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }
],
rowNum: 10,
rowList: [10, 20, 50, 100],
sortable: true,
delete: true,
pager: '#pager',
height: '100%',
width: "650",
afterSubmitCell: function (serverStatus, rowid, cellname, value, iRow, iCol) {
var response = serverStatus.responseText;
var rst = 'false';
debugger;
if (response == rst) {
debugger;
setTimeout(function () {
$("#info_dialog").css({
left: "644px", // new left position of ERROR dialog
top: "380px" // new top position of ERROR dialog
});
}, 50);
return [false, "User Name Already Exist"];
}
else {
return [true, ""];
}
},
//rowNum: 10,
//rowList: [10, 20, 50, 100],
sortable: true,
loadonce: false,
ignoreCase: true,
caption: 'Administration',
search: false,
del: true,
cellEdit: true,
hidegrid: false,
pgbuttons : false,
pginput : false,
//viewrecords: true,
gridComplete: function () {
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var isDeleted = grid.jqGrid('getCell', ids[i], 'Delete');
if (isDeleted != 'true') {
grid.jqGrid('setCell', ids[i], 'Delete', '<img src="/Images/delete.png" alt="Delete Row" />');
}
else {
grid.jqGrid('setCell', ids[i], 'Delete', ' ');
}
}
}
}
);
grid.jqGrid('navGrid', '#pager',
{ resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
).jqGrid('navButtonAdd', '#pager',
{ title: "Add New users", buttonicon: "ui-icon ui-icon-plus", onClickButton: showNewUsersModal, position: "First", caption: "" });
});
i need a scrollable grid , when use come to this page i have to show the first 7 columns only just seven in full page. i have 11 columns in my grid rest of the columns can be seen by using scroll, but first 7 should be shown when grid loads. and every column should be re-sizable. can any body help me, i will 100% mark your suggestion if it works for me ...thank you ;) . if something is not explained i am here to explain please help me
and can i save the width of column permanently when user re-size the column, so when next time grid get loads the column should have the same width which is set by the user by re-sizing.. is it possible ?
I am not sure what you want,but you can auto adjust the width with JqGrid autowidth and shrinkToFit options.
Please refer this Post jqGrid and the autowidth option. How does it work?
this will do the trick.

Resources