Forum
12:15
23/07/2009
Hi,
I've just started using jqGrid (which is excellent by the way). I've ticked all the boxes on the download page and then clicked download. After unzipping the download I added the files to my project (ASP.NET MVC application). I've managed to get the grid up and running quite nicely but I can't seem to get any of the formatting to work.
I've added the following links to my page:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.7.2.custom.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/grid.locale-en.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
and the following script block:
<script type="text/javascript">
$(function() {
jQuery("#list").jqGrid({
url: '/Admin/Gallery/GetListData/',
datatype: 'json',
mtype: 'GET',
colNames: ['ID', 'Stock Number', 'PO Number', 'Description', 'Cost Price', 'Ticket Price', 'Sold', 'Artist', 'Medium', 'Source', 'Owner'],
colModel: [
{ name: 'ID', hidden: true, index: 'ID', width: 40, align: 'left' },
{ name: 'StockNumber', index: 'StockNumber', width: 40, align: 'left' },
{ name: 'PONumber', index: 'PONumber', width: 40, align: 'left' },
{ name: 'Description', index: 'Description', width: 200, align: 'left' },
{ name: 'CostPrice', formatter: 'currency', index: 'CostPrice', width: 50, align: 'right'},
{ name: 'TicketPrice', formatter: 'currency', index: 'TicketPrice', width: 50, align: 'right' },
{ name: 'IsSold', formatter: 'checkbox', index: 'IsSold', width: 55, align: 'center' },
{ name: 'ArtistName', index: 'ArtistName', width: 100, align: 'left'},
{ name: 'Medium', index: 'Medium', width: 80, align: 'left'},
{ name: 'Source', index: 'Source', width: 80, align: 'left'},
{ name: 'StockOwner', index: 'StockOwner', width: 80, align: 'left' }
],
autowidth: true,
pager: jQuery('#pager'),
rowNum: 20,
rowList: [5, 10, 20, 50],
sortname: 'ArtistName',
sortorder: "asc",
viewrecords: true,
imgpath: '/scripts/themes/ui-darkness/images',
caption: 'Gallery'
}).navGrid('#pager',{edit:true,add:false,del:true});
});
</script>
<!-- JqGrid & pager place holders -->
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" ></div>
As I said, the grid appears and works correctly, but I can't get any formatting working (checkboxes, currncey etc).
Also I can't modify the pager.
Can you help please.
Regards,
Simon
02:54
23/07/2009
Veerabahu,
Sorry, the CSS files are being included I just didn't list them in my post thay are include as follows just below my script block:
<link href="../../Scripts/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/AdminSite.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/Themes/ui-darkness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
Can you think of any other reason the formatting is not working.
Regards,
Simon
03:37
Moderators
30/10/2007
Hello,
What does not work in the formatter?
Open the language file grid.locale-en.js and see what are the settings for the currency and what you expect to be.
If you expect $ to appear it will be not. You should configure this manually. Refer to docs how to do this.
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.
02:19
Hi Simon and Tony,
I have exactly same problem with Simon. I checked the doc but still don't have a clue about how to make the formatter work. (I need to get checkbox to work, but the column is just showing my data - Yes/No - as plain text...)
Simon, can you share your finding? Thanks in advance!
Tony, do you have any other recommendation other than the doc for me? (by the way, jqGrid is really great!)
04:18
23/07/2009
Hi Yial,
Its quite a long time since I had this problem so I can't remember how I managed to get it working. But if you could post your code for your grid and show which .js files and .css files you are including (Like I did in my posts) then maybe we can help. I'm sure Tony would ask you to do the same - its difficult to advise without seeing your code.
Regards,
Simon
11:02
Hi Simon,
Thanks for prompt reply! My code is pretty much similar to the one you posted, please see below....
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/jqueryUI/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'/Dinners/GridData/',
datatype: 'json',
mtype: 'GET',
colNames:['Id', 'Title', 'Date', 'Join'],
colModel :[
{ name: 'Id', index: 'DinnerID', width: 40, align: 'left' },
{ name: 'Title', index: 'Title', width: 200, align: 'left' },
{ name: 'Date', index: 'EventDate', width: 200, align: 'left' },
{ name: 'Join', index: 'Join', width: 200, align: 'center', formatter: 'checkbox' }],
pager: '#pager',
rowNum:5,
rowList:[5,10,20,50],
sortname: 'DinnerID',
sortorder: "desc",
viewrecords: true,
imgpath: '../../Scripts/jqueryUI/css/ui-lightness/images',
caption: 'My first grid'
});
});
</script>
<h2>My Grid Data</h2>
<div id="jqgrid">
<table id="list" cellpadding="0" cellspacing="0"></table>
<div id="pager"></div>
</div>
I have been stucked with this problem for 3 days, so your help is greatly appreciated!!
12:23
Moderators
30/10/2007
Hello,
Could you please post the response from server?
Also another check - Open jquery.jqGrid.js with text editor and see the line
Modules: ....
Check if you have jquery.fmatter.js here.
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:
52 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