I already checked this and the column width are large enough to contain the icons, they are just not appearing. I am callind a WCF web service on the backend.
Here is my entire javascript:
jQuery().ready(function() {
//
// jQGrid Webservice Library v1.0
// http://skysanders.net/jQGridWS
//
jQuery('#theme-switcher').themeswitcher();
dataBindToGrid();
function successFunction(jsondata) {
$('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal');
$(“.ui-jqgrid-sortable”).css('white-space', 'normal');
$(“.ui-jqgrid-sortable”).css('height', 'auto');
var thegrid = jQuery(“#serviceCallGridView”)[0];
thegrid.addJSONData(jsondata.d);
//jQuery(“#serviceCallGridView”).sortGrid();
}
function getServiceCalls(pdata) {
var params = new Object();
params.page = pdata.page;
params.pageSize = pdata.rows;
params.sortIndex = pdata.sidx;
params.sortDirection = pdata.sord;
$.ajax({
url: “eAccessService.svc/GetServiceCalls?gridParams=” + JSON.stringify(params) + “&custnmbr=0206400&historyDays=50”,
//url: “eAccessService.svc/GetServiceCalls?gridParams=” + JSON.stringify(params) + “&custnmbr=” + $('custnmbr').value + “&historyDays=” + $('historyDays').value,
jsonReader: {
root: “rows”, //arry containing actual data
page: “page”, //current page
total: “total”, //total pages for the query
records: “records”, //total number of records
repeatitems: false,
id: “id” //index of the column with the PK in it
},
dataType: “json”,
type: “POST”,
contentType: “application/json; charset=utf-8”,
success: successFunction
});
}
function dataBindToGrid() {
jQuery.extend(jQuery.jgrid.defaults, {
datatype: 'json',
ajaxGridOptions: { contentType: “application/json” },
gridview: true,
rownumbers: false,
sortable: true,
headertitles: true,
viewrecords: true,
emptyrecords: “No records to view”,
loadtext: “Loading…”,
loadui: 'enable',
sortname: 'id'
});
$(“#load_serviceCallGridView”).show();
//$(“#load_serviceCallGridView”).css(“z-index”, 1000);
jQuery(“#serviceCallGridView”).jqGrid({
datatype: function(pdata) {
getServiceCalls(pdata);
},
caption: “Service Calls”,
colNames: ['Srvc Call ID', 'Equip', 'Ref Call ID', 'City', 'ST', 'Problem Type', 'Appt Stat', 'Call Stat', 'Location'],
colModel: [{ name: 'SV00300.Service_Call_ID', index: 'SV00300.Service_Call_ID', width: 180, align: 'left', jsonmap: 'Service_Call_ID' },
{ name: 'Equipment', index: 'Equipment', width: 170, align: 'left', jsonmap: 'Equipment' },
{ name: 'Ref_Call_ID', index: 'Ref_Call_ID', width: 255, align: 'left' },
{ name: 'City', index: 'City', width: 80, align: 'left' },
{ name: 'State', index: 'State', width: 25, align: 'left' },
{ name: 'Type_Of_Problem', index: 'Type_Of_Problem', width: 200, align: 'left' },
{ name: 'Appointment_Status', index: 'Appointment_Status', width: 70, align: 'left' },
{ name: 'Status_Of_Call', index: 'Status_Of_Call', width: 70, align: 'left' },
{ name: 'Location', index: 'Location', width: 200, align: 'left' }
],
rowNum: 10,
rowList: [5, 10, 20, 50, 100],
sortname: 'SV00300.Service_Call_ID',
pager: '#pageNavigation',
sortorder: “desc”,
autowidth: false,
viewrecords: true
});
jQuery(“#serviceCallGridView”).jqGrid('navGrid', 'pageNavigation', { edit: false, add: false, del: false });
}
});
.
