lazeman on search the table can not work

Thu, 27 Jan 2011 23:33:36 +0200

I used the jqgrid in asp.net with a simple application,the data come from an array,when click the search

button of the grid,the search toolbar can not click,and the table is gray,can not make further operate,i don't

know the reason.

The code is listed below:

-------------------------------------------------

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

Inherits="WebTest._Default" %>


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org

/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head id="Head1" runat="server">


	<title></title>


	
		<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"> </script>


	<link href="styles/jquery-ui-1.8.2.custom.css" rel="Stylesheet" type="text/css" />


	<link href="styles/ui.jqgrid.css" rel="Stylesheet" type="text/css" />


	<link href="styles/ui.multiselect.css" rel="stylesheet" type="text/css" />


	<script type="text/javascript" src="Scripts/jquery-ui-1.8.2.custom.min.js"></script>


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


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


	<script type="text/javascript" src="Scripts/grid.locale-cn.js"></script>


	<script type="text/javascript">


		//$.jgrid.no_legacy_api = true; //when added this, a exception of no method name of

                      "navGrid" appeared.


		//$.jgrid.useJSON = true;


	</script>


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


	<script type="text/javascript" src="Scripts/ui.multiselect.js"></script>


	
	<script type="text/javascript">


		$(document).ready(


			function () {

			jQuery("#list4").jqGrid({


					datatype: "local",


			//		height: 200,


					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 }

],


					rowNum: 10,


					rowList: [10, 20, 30],


					pager: '#pager5',


					multiselect: true,


					caption: "Manipulating Array Data"


	}).navGrid("#pager5", { edit: false, add: false, del: false, search: true }); ;


				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").jqGrid('addRowData', i + 1, mydata[i]);

);


	</script>


</head>


<body>


	<form id="Form1" runat="server">


	<br />


		<table id="list4">


		</table>


		<div id="pager5"></div>
</form>


</body>


</html>

--------------------------------------------------------------------------

when I click the search button,the search toolbar display on the top of the grid,and the toolbar and the grid

are gray and can not operator through mouse,but when use "TAB",it do work correctly. Why??

[Image Can Not Be Found]
[Image Can Not Be Found]
[Image Can Not Be Found]

jQuery Grid Plugin - jqGrid - Topic: search the table can not work