In order to work this you should include the appropriate jQuery UI theme css file.

Refer here for installation:

http://www.trirand.com/jqgridw.....to_install

Regards

Tony

// $('.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.

You modify the sortable CSS property, so I'm not sure you will show it. Try with the original CSS definition.

Regards

Tony

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

}

});

The sort icon is not displayed whan the text in the header is bigger than the width. If you resize the sorted column you will see the icon

Regards

Tony