jQuery Grid Plugin - jqGridForum

search the table can not work

27/01/2011
23:33

lazeman

China

New Member

Members

Forum Posts: 1

Member Since:
28/01/2011

Offline

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]