I have looked around other answers on here and had no luck. I have a jqgrid and i want to persist the column width. I save the width on the resize Stop event to a db and then every time the grid is loaded i set the width in the colModel to the width stored in the db but it is never the correct width. For example i have 420 stored as the width in the db for the column name but when i load the grid and check the col model it has a width of 150. Ive checked and made sure the correct value is being passed back so i cant understand why jqgrid wont use it.
Im not sure why but its as though jqgrid is ignoring the width i pass in the colmodel. I have included the cut down version of my jqgrid below. Thank you for any help.
$('#ProjectTable').jqGrid({
datatype: 'json',
url: '<%= Url.Action("projectGridData", "SampleSelection") %>',
mType: 'POST',
colNames: [
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.ProjectId", "ID") %>"),
"",
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Name", "Name") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Code", "Code") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Manager", "Manager") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.StartDate", "Start Date") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.CompletionDate", "CompletionDate") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Remark", "Remark") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Status", "Status") %>"),
""
],
colModel:[
{name: 'FieldProjectId', width: 10, align: 'center', key: true, search: false, hidden: true},
{name: 'Edit', width: 30, search: false, sortable: false, align: 'center'},
{name: 'Name', width: ColumnManager.GetColumnWidth('ProjectTable', 'Name'), index: 'Name', editable: true},
{name: 'Code', width: 50, index: 'Code', editable: true},
{name: 'Manager', width: 100, index: 'Manager', editable: true},
{name: 'StartDate', width: 65, index: 'StartDate', search: true, formatter : 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'd/m/Y'}, editable: true,editoptions : { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
}}, searchoptions: { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
} }},
{name: 'CompletedDate', width: 65, index: 'CompletedDate', formatter : 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'd/m/Y'}, editable: true, editoptions : { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
}}, sorttype:'date' , searchoptions: { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
}}},
{name: 'Remark', width: 200, index: 'Remark', search: false, editable: true},
{name: 'Status', width: 95, index: 'Status', editable: true },
{name: 'Delete', width: 20, search: false, sortable: false, align: 'center'},
],
caption: htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Caption", "Project") %>"),
width: $('#tabs-projects').width() - 20,
//shrinkToFit: false,
sortname: 'FieldProjectId',
loadui: 'block',
rowNum: 20,
rowList: [10,25,50,100,200],
sortorder : 'desc',
headertitles:true,
resizeStop: function(width, index) {
var colModel = $("#ProjectTable").jqGrid('getGridParam','colModel');
ColumnManager.SetColumnWidth("ProjectTable",colModel[index].name,width);
alert(JSON.stringify(colModel));
},
height: 'auto',
viewrecords: true,
toolbar: [true, "top"],
pager: $('#ProjectPager')
}
});
}, 1000);
});
}
}
).filterToolbar();
$('#ProjectTable').navGrid('#ProjectPager', {
search: false,
add: false,
edit: false,
del: false,
refresh: true
});
And the functions to set and get the column width:
var ColumnManager = {
SetColumnWidth : function(grid, column, value)
{
$.ajax({
url: '<%= Url.Action("SaveGridColumWidthPreference", "SampleSelection") %>',
dataType: 'json',
type: 'POST',
data: {
gridID: grid,
width: value,
colName: column
},
success:function(data) {
}
});
},
GetColumnWidth : function(grid, column)
{
$.ajax({
url: '<%= Url.Action("GetGridColumWidthPreference", "SampleSelection") %>',
dataType: 'json',
type: 'POST',
data: {
gridID: grid,
colName: column
},
success:function(data) {
if(data > 0)
{
alert(data);
return data;
}
else
{
alert(projectDefaults["name"]);
return projectDefaults["name"]; //should return default here
}
}
});
},
ReturnColumnWidth : function(){
}
};
