jQuery Grid Plugin - jqGrid

Hi,

I see in all your samples if you mouse over a row it highlights the row. but when I build a grid it does not do that. I am attaching my html file. any help would be greately appreciated.

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

html xmlns="http://www.w3.org/1999/xhtml"

>

<

head

>

<title>Untitled Page</title

>

</

head

>

<

link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />

<

link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />

<

script src="jquery.js" type="text/javascript"></script>

<

script src="jquery.jqGrid.js" type="text/javascript"></script>

<

script src="js/jqModal.js" type="text/javascript"></script>

<

script src="js/jqDnR.js" type="text/javascript"></script

>

<

body

>

<

table id="list4" cellpadding="0" cellspacing="0"></table

>

<

button id="_delButton" value="Delete" name="Delete">Delete</button

>

<

button id="_addbutton" value="add" name="Add">Add</button

>

<

script type

="text/javascript">

$(document).ready(

function

() {

$(

"#_addbutton").click(function

() {

jQuery(

"#list4").addRowData(101, { id: "9", invdate: "2007-09-01", name: "mohammad", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, "last"

);

});

$(

"#_delButton").click(function

() {

var selr = jQuery("#list4").getGridParam('selrow'

);

jQuery(

"#list4"

).delRowData(selr);

});

jQuery(

"#list4"

).jqGrid({

datatype:

"local"

,

height: 250,

colNames: [

'Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'

],

colModel: [

{ name:

'id', index: 'id', width: 60, sorttype: "int"

},

{ name:

'invdate', index: 'invdate', width: 90, sorttype: "date"

},

{ name:

'name', index: 'name'

, width: 100 },

{ name:

'amount', index: 'amount', width: 80, align: "right", sorttype: "float"

},

{ name:

'tax', index: 'tax', width: 80, align: "right", sorttype: "float"

},

{ name:

'total', index: 'total', width: 80, align: "right", sorttype: "float"

},

{ name:

'note', index: 'note', width: 150, sortable: false

}

], imgpath:

'themes/basic/images'

,

multiselect:

true

,

caption:

"Manipulating Array Data"

,

onSelectRow:

function

(id) {

var ret = jQuery("#list4"

).getRowData(id);

alert(ret.amount +

" "

+ ret.name);

}

});

var

mydata = [

{ id:

"1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00"

},

{ id:

"2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00"

},

{ id:

"3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00"

},

{ id:

"4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00"

},

{ id:

"5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00"

},

{ id:

"6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00"

},

{ id:

"7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00"

},

{ id:

"8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00"

},

{ id:

"9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00"

}

];

for (var

i = 0; i <= mydata.length; i++)

jQuery(

"#list4"

).addRowData(i + 1, mydata[i]);

});

</

script

>

</

body

>

</

html

>