Thank You!

My original jquery.jqGrid.js did NOT inclue jquery.fmatter.js in “Modules….”. I didn't include the formatter when I first downloaded the jqGrid. Now it is working NICELY after I downloaded the package which included formatter. Thank You Thank You!!

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

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!!

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

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!)

Regards,

Simon

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

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

-Veerabahu

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