jqGrid displays columns, retrieves data but does not show the data

Question

i have a new problem with jqGrid. I had the same problem with slickgrid. Now to my error.

I have 2 test grids. In one of them the grid will display the data, but in second it does not show the data.

I think its the same procedure in both of them.

Here is my Code for test grid 1:

var jqGrid = {
    columns: {
        model: [
            { name: 'displayName', id: "displayName" },
            { name: 'documentTitle', id: "documentTitle" },
            { name: 'isConfirmed', id: "isConfirmed" },
            { name: 'requestDate', id: "requestDate" },
            { name: 'version', id: "version" }
        ],
        names: [
            'Dokument-Titel',
            'Benutzername',
            'Status',
            'Datum der Erinnerung',
            'Version'
        ]
    },
    dataSource: 'Service.asmx/GetGridData'
}
var myData = [
    {   displayName: "Test, Test", documentTitle: "Test", isConfirmed: "Ausstehend", requestDate: "2014-11-26", version: "1.0" },
    { displayName: "Test2, Test2", documentTitle: "Test",  isConfirmed: "Ausstehend", requestDate: "2014-11-26", version: "1.0" }
];
window.data = myData;
jQuery("#grid-table").jqGrid({
    autowidth: true,
    data: myData,
    colNames: jqGrid.columns.names,
    colModel: jqGrid.columns.model,
    dataType: 'json',
    pager: '#pager',
    height: 600,
    grouping: true,
    groupingView: {`enter code here`
        groupingField: ['DocumentTitle'],
        groupColumnShow: [false]
    },



    viewrecords: true

});

and this is the code from testgrid 2:

function test() {
    var mydata = [
        { id: "1", name: "test", note: "note", total: "2111.00" , tax: "10.00"},
        { id: "2", name: "test2", note: "note2", tax: "20.00", total: "320.00" },
        { id: "3", name: "test3", note: "note3", tax: "30.00", total: "430.00" },
        { id: "4", name: "test", note: "note", tax: "10.00", total: "210.00" },
        { id: "5", name: "test2", note: "note2", tax: "20.00", total: "320.00" },
        { id: "6", name: "test3", note: "note3", tax: "30.00", total: "430.00" },
        { id: "7", name: "test", note: "note", tax: "10.00", total: "210.00" },
        { id: "8", name: "test2", note: "note2", amount: "300.00", tax: "21.00", total: "320.00" },
        { id: "9", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
        { id: "11", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
        { id: "12", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "13", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
        { id: "14", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
        { id: "15", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "16", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
        { id: "17", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
        { id: "18", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "19", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
        { id: "21", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
        { id: "22", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "23", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
        { id: "24", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
        { id: "25", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "26", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },


          { id: "27", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "28", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "29", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
        ];
        window.myData = mydata;
        jQuery("#grid-table").jqGrid({
            data: mydata,
            datatype: "local",
            height: 'auto',
            rowNum: 30,
            rowList: [10, 20],
            colNames: ['Inv No',  'Name', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                { name: 'id'},
                { name: 'name' },
                { name: 'amount'},
                { name: 'tax' },
                { name: 'total' },
                { name: 'note' }
            ],
           pager: "#pager",
            viewrecords: true,
            sortname: 'name',
            grouping: true,
            groupingView: {
                groupField: ['id'],
                groupColumnShow: [false]
            },
            caption: "Hide Grouping Column"

        });
    }

Sure a few options are different to the top, but why i dont get the table data?

Answer 1

The first grid uses dataType: 'json' instead of datatype: 'json' and it don't specify any url option. You should add something like url: jqGrid.dataSource. I suppose that you have both grids not on the same page, because you use in both the same pager: pager: "#pager". Grids can't share the same pager.