Forum
Log In
Home
Topic RSS
16:10
Hello Sir,
I am implementing jqgrid in my project.I have fetched the record via JSON and data is showing in the grid.
But Searching and Sorting is not working.
Please give me suggestions about the prerequisites required for searching.
Also point out the mistakes in the code.
Please reply asap.
This is my code.
HTML code:
<!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></title>
<style type="text/css">
#abc
{
background:red;
border:width:100px;
}
</style>
<link href="jquery.jqGrid-3.6.1/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="jquery.jqGrid-3.6.1/src/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="jquery.jqGrid-3.6.1/src/css/ui.multiselect.css" media="screen" rel="stylesheet" type="text/css" />
<link href="jquery.jqGrid-3.6.1/src/css/jquery.searchFilter.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Scripts/jquery-ui-1.7.1.custom.css" rel="stylesheet" media="screen" type="text/css" />
<script src="jquery.jqGrid-3.6.1/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="jquery.jqGrid-3.6.1/src/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid-3.6.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<!--<script src="jquery.jqGrid-3.6.1/src/grid.loader.js" type="text/javascript"></script>-->
<script src="jquery.jqGrid-3.6.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jquery.jqGrid-3.6.1/src/jquery.searchFilter.js" type="text/javascript"></script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
<div id="filter" style="margin-left:30%;display:none">Search Invoices</div>
<script src="jqgridjs.js" type="text/javascript"> </script>
<input type="button" id="bsdata" value="Search"/>
</body>
</html>
jqgridjs.js code:
jQuery(document).ready(function () {
var mygrid = jQuery("#list").jqGrid({
url: 'JsonDS.aspx',
ContentType: 'application/json',
datatype: 'json',
width: 990,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 65},
{ name: 'invdate', index: 'invdate', width: 90, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'yy-mm-dd' }); } }},
{ name: 'name', index: 'name', width: 100},
{ name: 'amount', index: 'amount', width: 80, align: "right"},
{ name: 'tax', index: 'tax', width: 80, align: "right", stype: 'select', editoptions: { value: ":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00" }},
{ name: 'total', index: 'total', width: 80, align: "right"},
{ name: 'note', index: 'note', width: 150}
],
rowNum: 10,
mtype: "POST",
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
toolbar: [true, "top"],
gridview: true,
caption: "Toolbar Search Example"
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false, refresh: false });
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Toggle", title: "Toggle Search Toolbar", buttonicon: 'ui-icon-pin-s',
onClickButton: function () {
mygrid[0].toggleToolbar();
}
});
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Clear", title: "Clear Search", buttonicon: 'ui-icon-refresh',
onClickButton: function () {
mygrid[0].clearToolbar();
}
});
// Filtertoolbar
jQuery("#list").jqGrid('filterToolbar');
mygrid[0].triggerToolbar();
//SearchGrid
$("#bsdata").click(function () {
jQuery("#list").jqGrid('searchGrid',
{ sopt: ['cn', 'bw', 'eq', 'ne', 'lt', 'gt', 'ew'] }
);
});
});
JsonDS.aspx.cs code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
public partial class JsonDS : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var js = "{"+
"total: '2'," +
"page: '1'," +
"records: '1'," +
"rows:[" +
"{ id:'10', cell:[ '1', '2007-10-06', 'client1', '9000.00','140.00','840', 'Comments']}," +
"{ id:'9', cell:[ '2', '2009-12-09', 'client2', '85000.00','150.00','980', 'Comments']}," +
"{ id:'8', cell:[ '3', '2008-12-12', 'client3', '4500.00','160.00','350', 'Comments']}," +
"{ id:'7', cell:[ '4', '2001-06-05', 'client4', '9000.00','170.00','880', 'Comments']}," +
"{ id:'6', cell:[ '5', '2007-10-10', 'client5', '7000.00','180.00','860', 'Comments']}," +
"{ id:'5', cell:[ '6', '2007-11-23', 'client6', '6000.00','190.00','540', 'Comments']}," +
"{ id:'4', cell:[ '7', '2002-19-24', 'client7', '5000.00','200.00','940', 'Comments']}," +
"{ id:'3', cell:[ '8', '2005-14-06', 'client8', '8050.00','290.00','849', 'Comments']}," +
"{ id:'2', cell:[ '9', '2004-15-01', 'client9', '8008.00','980.00','845', 'Comments']}," +
"{ id:'1', cell:[ '10', '2007-12-06', 'client10', '9000.00','145.00','940', 'Comments']}" +
"]"+
"}";
Response.ContentType = "application/json";
Response.Write(js);
}
}
13:05
Moderators
30/10/2007
Offline
Hello,
jqGrid does not have nothing to do with the server side code.
Instead that I do not understand ASP, I do not see a code where you accept the parameters posted from grid and then perform the search based on these parametrs and return the appropriate result.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
08:03
Hi Tony,
Thanks alot for the reply can you please help me out i am stuck in it for last 1 week
this is my code in which sorting works fine, but i need to implement integrated toolbar searching (jqgrid 3.5) can you please suggest, currently i am using Jsonstring as my datatype
Thanks in advance:
jQuery(document).ready(function () {
// debugger
var mystr =
"{" +
"total: '1'," +
"page: '1'," +
"records: '5'," +
"rows : [" +
"{id:'1', cell:['cell11','cell12','cell13']}," +
"{id:'2', cell:['cell21','cell22','cell23']}," +
"{id:'3', cell:['cell31','cell32','cell33']}," +
"{id:'4', cell:['cell41','cell42','cell43']}," +
"{id:'5', cell:['cell51','cell52','cell53']}" +
"]" +
"}";
var mygrid = jQuery("#list").jqGrid({
url: 'JsonDS.aspx',
ContentType: 'application/json',
datatype: 'jsonstring',
datastr: mystr,
jsonReader : { root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "[id]",
subgrid: { root:"rows", repeatitems: true, cell:"cell" }
},
width: 990,
colNames: ['Col 1', 'Col 2', 'Col 3'],
colModel: [{ name: 'uno', jsonmap:'id'},
{ name: 'dos' },
{ name: 'tres'}],
rowNum: 10,
mtype: "POST",
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
gridview: true,
caption: "Toolbar Search Example"
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: true, refresh: false });
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Toggle", title: "Toggle Search Toolbar", buttonicon: 'ui-icon-pin-s',
onClickButton: function () {
mygrid[0].toggleToolbar();
}
});
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Clear", title: "Clear Search", buttonicon: 'ui-icon-refresh',
onClickButton: function () {
mygrid[0].clearToolbar();
}
});
// Filtertoolbar
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Search", title: "Search", buttonicon: 'ui-icon-search',
onClickButton: function () {
mygrid[0].triggerToolbar();
}
});
//mygrid.filterToolbar();
jQuery("#list").jqGrid('filterToolbar');
//jqGrid.triggerToolbar();
// FilterGrid
$("#search").filterGrid("#list", {
gridModel: false,
filterModel: [{
label: 'Search',
name: 'search',
stype: 'text'
} ]
});
//SearchGrid
$("#bsdata").click(function () {
jQuery("#list").jqGrid('searchGrid',
{ sopt: ['cn', 'bw', 'eq', 'ne', 'lt', 'gt', 'ew'] }
);
});
$("#did").click(function () {
});
});
08:35
Moderators
30/10/2007
Offline
Hello,
When you use jsonstring, then the datatype is automatically converted to local after reading the string.
As you know we do not support local searching in this release.
This feature is planed for next releases
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
94 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
