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?

score 0 · Accepted Answer · answered Nov 26 '14 at 16:29

0

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.

answered Nov 26 '14 at 16:29

Oleg

220,925
34
403
798

There is one grid with two functions to test if the data will show, they share the grid but not I use them not at the same time. The URL option is temporarily not there because it has to work first without the URL option. I'll try it with datatype instead of dataype. Thank you – Strikeheart Nov 26 '14 at 17:18
@Strikeheart: I don't understand what you mean one grid with two functions. With respect of call `jQuery("#grid-table").jqGrid({...});` you convert *empty* `
` to complex structure of divs, tables and so on. So you need to have an empty `` with id attribute on the place where you need to create the grid. You can't create grid from existing grid. If you want "to share" the place you need to call `GridUnload` (see [here](http://stackoverflow.com/a/4920612/315935)) to destroy previous grid and to create new empty `
` with the same `id` attribute.
– Oleg Nov 26 '14 at 19:30

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

1 Answers1