Jqgrid - edit dialog field not clickable - jqgrid

Using simple built in functionality in Jqgrid where if you set the column property editable to true, it should pop up a form with that field text to be editable. Everything is fine except that the form coming up is not clickable.
Please point me what is wrong with this code before I resort to manual custom form.
$('#tblRecipes').jqGrid({
datatype: 'json',
mtype: 'POST',
url: 'ResultsEditorAjax/GetSampleRecipeValues',
editurl: 'ResultsEditorAjax/SaveSampleRecipeValue',
jsonReader: als.common.jqgrid.jsonReader('Analyte'),
colModel: [
{ name: 'Folderno', index: 'Folderno', sortable: false, hidden: true },
{ name: 'Ordno', index: 'Ordno', sortable: false, hidden: true },
{ name: 'Pcupno', index: 'Pcupno', sortable: false, hidden: true },
{ name: 'Taskcd', index: 'Taskcd', sortable: false, hidden: true },
{ name: 'Analyte', index: 'Analyte', label: 'Analyte', width: 10, sortable: false },
{ name: 'OldFinal', index: 'OldFinal', label: 'Old Value', width: 10, sortable: false },
{
name: 'NewFinal', index: 'NewFinal', label: 'New Value', width: 10,
sortable: false, editable: true, edittype: 'text',
editrules: { custom: true, custom_func: als.webview.analyteresults.validateRecipeValue }
},
{ name: 'Units', index: 'Units', label: 'Units', width: 5 },
{ name: 'Min', index: 'Min', sortable: false, hidden: true },
{ name: 'Max', index: 'Max', sortable: false, hidden: true },
{ name: 'Rounding', index: 'Rounding', sortable: false, hidden: true }
],
caption: '',
height: 200,
width: 400,
hidegrid: false,
shrinkToFit: true,
scroll: true,
rowNum: 10000,
viewrecords: true,
emptyrecords: '',
altRows: true,
pager: '#pagerRecipes',
onSelectRow:
function (rowId) {
},
gridComplete: function () {
},
loadComplete: function (data) {
}
}).jqGrid('navGrid', '#pagerRecipes', {
add: false,
edit: true,
del: false,
refresh: false,
search: false
},
{ // edit
editCaption: 'Edit Value',
mtype: 'POST',
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
resize: false,
modal: true,
// width: 680,
viewPagerButtons: false,
recreateForm: true,
closeAfterEdit: true,
closeOnEscape: true,
beforeInitData: function () {
// $('#grdQcGroups').jqGrid('setColProp', 'Id', { editable: false });
},
serializeEditData: function (postdata) {
// postdata.Id = postdata.id;
return postdata;
}
);

Related

Set column to show 0 in JqGrid

I have a jqGrid.
my function is --
$("#grid").jqGrid({
url: "/Log/GetLogs",
datatype: 'json',
mtype: 'Get',
colNames: ['LogID', 'Agency Billing Code', 'License Number', 'Equipement Number', 'Year', 'Make', 'Model', 'Color', 'Begin Miles', 'End Miles'],
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
});
When the grid loads, database is returning the value of "Miles" but I don't want to show that. I just want to show 0, and when I edit the miles values it should map to Miles in my object.
Please let me know how can I achieve that?
Thanks..
To accomplish what you need you need to have a formatter and unformatter for the miles column. You have not specified on how you will be editing the grid row(Inline, form Edit, custom...etc) but I created inline edit as an example for you.
Here is a the complete solution in jsfiddle if you want to play with it. for editing just click the row and the miles will show its original value when on edit but show 0 on non edit mode. For more details on how formatting works see Here
var mileformatter= function (cellval, options, rowObject) {
return "<span data-val='"+cellval+"'>0</span>";
}
var mileUnFormat= function (cellvalue, options, cell) {
return $('span', cell).attr('data-val');
}
"use strict";
var mydata = [
{ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222},
{ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000},
];
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: 'Get',
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, formatter:mileformatter,unformat:mileUnFormat, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
onSelectRow: function (id) {
jQuery('#list').editRow(id, true);
}
});
Here is an edited answer for what you are looking for and a new jsfiddle link to play with Note that I removed the unformatter and also added beforeSaveRow function.
var onEdit=false;
var mileformatter= function (cellval, options, rowObject) {
if(onEdit==true)
{
return cellval;
onEdit=false;
}
return 0;
}
"use strict";
var mydata = [
{ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222},
{ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000},
];
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: 'Get',
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, formatter:mileformatter, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
onSelectRow: function (id) {
jQuery('#list').editRow(id,
{
"keys": true,
oneditfunc: function () {
},
"successfunc": function () {
alert('successfunc');
},
"url": null,
"extraparam": {},
"aftersavefunc": function () {
alert('aftersavefunc');
},
"errorfunc": null,
"afterrestorefunc": null,
"restoreAfterError": true,
"beforeSaveRow": function (options, rowid) {
onEdit=true;
jQuery("#list").saveRow(id, false);
return false;
}
});
}
});
You can customize the SaveRow as follows and put the post url of your own.
saveparameters = {
"successfunc" : null,
"url" : "yoururl",
"extraparam" : {},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
}
jQuery("#grid_id").jqGrid('saveRow',rowid, saveparameters);

Uncaught TypeError: Cannot read property 'rowactions' of undefined in jqGrid for formatter:'action'

I am using jqGrid V 4.6.0. and trying to implement grid with inline edit/delete functionality.I used formatter:'actions' for acheive this and also getting edit/delete icons in each row.But when i click on those icons i am getting following error in console :Uncaught TypeError: Cannot read property 'rowactions' of undefined and nothing happens in grid.same code and same example i've implemented before with jqGrid V4.4.4 and it worked well ,but in V4.6.0 i got this error.Please somebody help me.Thanks in advance :)
Code for reference:
jQuery("#theGrid").jqGrid({
url: '/Student/Grid',
datatype: "json",
colNames: ['Id', 'Firstname', 'Middlename', 'Lastname', 'Birthdate', 'Birthplace', 'State', 'Nationality', 'Religion', 'Ishandicaped ?', 'Actions'],
colModel: [
{ key: true, name: 'Id', sortable: true, resize: true, align: "center" },
{ key: false, name: 'FirstName', index: 'FirstName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'MiddleName', index: 'MiddleName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'LastName', index: 'LastName', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'Birthdate', index: 'Birthdate', editable: true, align: "center", editrules: { required: true }, formatter: 'date', editoptions: {
dataInit: function (el) {
setTimeout(function () {
$(el).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 200);
}
}
},
{ key: false, name: 'Birthplace', index: 'Birthplace', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'State', index: 'State', editable: true, align: "center", edittype: "select", editoptions: { value: "GJ:Gujarat;MH:Maharashtra;DL:Delhi;BNG:Banglore;RJ:Rajasthan" }, editrules: { required: true } },
{ key: false, name: 'Nationality', index: 'Nationality', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'Religion', index: 'Religion', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'IsHandicaped', index: 'IsHandicaped', editable: true, align: "center", edittype: "checkbox", editoptions: { value: "True:False" }, formatter: Demo1
},
{
key: false,
name: 'Actions',
index: 'tax',
width: 80,
align: "center",
formatter: 'actions',
formatoptions: {
delOptions: { url: '/Student/Delete' }
}
}
],
rowNum: 10,
rownumbers: true,
autowidth: true,
rowList: [5, 10, 20],
pager: '#gridPager',
viewrecords: true,
sortorder: "desc",
reloadAfterSubmit: true,
altclass: 'table table-bordered table-striped',
jsonReader: {
repeatitems: false
},
caption:'Studentdata JqGrid V4.4.4',
editurl: '/Student/Edit',
mtype: "post",
height: '100%',
hiddengrid: false,
serializeRowData: function (postData) {
debugger;
// new row id is "new_row"
postData.Id == "jqg1" ? postData.oper = "add" : postData.oper = "add";
return postData;
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [true, ''];
} else {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [false, response.responseText];
}
}
}
});

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.

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 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