CODEWITHSUNDEEP
jqueryasp.netjqgrid
slandau
slandau

Reputation: 24052

jquery jqgrid not loading up

So all the javascript loads fine except for the jqGrid. It's giving me this error:

jQuery("#resultsGrid").jqGrid is not a function

Which I'm assuming means it can't find the .js source. However, it is in my main Js folder along with all the other goodies, and everything else seems to work fine. Plus, none of the other javascript needs to reference the grid stuff as a source, so if I reference it in the script tag, it will break everything else right?

<script>
    $(document).ready(function () {

        $("#prepaymentTable").bubble({ width: 400, title: 'Prepayment' });
        $("#exposureTable").bubble({ width: 400, title: 'Exposure' });

        $('#calculateButton').live('click', function () {
            alert('Calculating Prepayment Analysis...');
        });

        $('#exposureButton').live('click', function () {
            alert('Calculating Exposure Analysis...');
        });

        jQuery("#resultsGrid").jqGrid({
            datatype: "local",
            height: 250,
            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 }
            ], multiselect: true,
            caption: "Manipulating Array Data"
        });
        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("#resultsGrid").jqGrid('addRowData', i + 1, mydata[i]); 

        }); 
    </script>

Upvotes: 0

Views: 694

Answers (1)

Oleg
Oleg

Reputation: 221997

You should verify that you loaded the jqGrid files in the correct order (see documentation). Typical error is including "i18n/grid.locale-en.js" after the "jquery.jqGrid.min.js". If it not help you you should append your question with the information about loading of JavaScript files and CSS files which you use.

Upvotes: 1

Related Questions