jQuery Grid Plugin - jqGrid

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 });

}

});

I commented out the following lines:

// $('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal');

// $(".ui-jqgrid-sortable").css('white-space', 'normal');

// $(".ui-jqgrid-sortable").css('height', 'auto');

//$("#load_serviceCallGridView").show();

//$("#load_serviceCallGridView").css("z-index", 1000);

This sorting icon is still not displaying.

I am now investigating that possibility that the reason the sorting icons are not displaying is because I don't have the icons. For the 3.6 version of jqGrid what css are used to identify the icons and what icons are used?