CODEWITHSUNDEEP
jqueryjqgridjqgrid-asp.netwcf-web-api
Tim Hoolihan
Tim Hoolihan

Reputation: 12396

Using jqGrid with WCF WebAPI

I'm using the wcf webapi to get data from my asp.net application, and trying to display it with jqGrid. The data comes back looking like:

[{"DriverIdentifier":"I61","ScoreImpact":22},{"DriverIdentifier":"E57","ScoreImpact":21},{"DriverIdentifier":"K63","ScoreImpact":14}]

In the header I have:

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="Scripts/i18n/grid.locale-en.js"></script>    
<script type="text/javascript" src="Scripts/json2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#driverScoreCard").jqGrid({
            url: 'api/ClientCenter',
            datatype: 'json',
            jsonReader: {
                repeatitems: false,
                id: 'DriverIdentifier',
                root: function (obj) { return obj; },
                rows: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; }
            },
            mtype: 'GET',
            colNames: ['Driver Identifier', 'Score Impact'],
            colModel: [
                { name: 'DriverIdentifier', index: 'DriverIdentifier', width: 100 },
                { name: 'ScoreImpact', index: 'ScoreImpact', width: 100 }
            ],
            pager: $('#pager'),
            caption: 'Some Grid'
        }); 
    }); 
</script>

And down in the page, I have the following elements:

<table id="driverScoreCard"><tr><td></td></tr></table><div id="pager"></div>

When running the example, I get "Object doesn't support property or method 'format'" in the jqGrid source. I'm using version 4.1.2 of jqGrid. Let me know if I can provide any more info.

Upvotes: 0

Views: 1106

Answers (1)

Oleg
Oleg

Reputation: 221997

you should change the order of the i18n/grid.locale-en.js file and jquery.jqGrid.min.js and all will be OK: see here

Upvotes: 2

Related Questions