Trouble with Dojo Dgrid

Question

I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:

HTML:

<script type="text/javascript"><!--
require({
    baseUrl: "/res/js/",
    packages: [
        { name: "dojo", location: "dojo/dojo" },
        { name: "dijit", location: "dojo/dijit" },
        { name: "dojox", location: "dojo/dojox" },
        { name: "put-selector", location: "put-selector" },
        { name: "xstyle", location: "xstyle" },
        { name: "dgrid", location: "dgrid" },
        { name: "allwins", location: "allwins" }
    ]
},[
    "allwins/Admin",
    "dojo/parser",
    "dojo/domReady!"
],function(admin, Parser){
    admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="region: 'center',
                      title: 'Faktury 2'">
    <div id=invoicesGridTab2"></div>
</div>

JavaScript:

request(invoicesDataUrl, { 
    handleAs: "json" 
}).then(function (response) {
    var store = new Memory({ data: response });
    var grid = new OnDemandGrid({
        region: "center",
        store: store,
        columns: {
            invoice_id: { label: "FID" },
            user_id: { label: "UID" },
            invoice_no: { label: "Číslo" },
            user_fullname: { label: "Plátce" },
            created_formatted: { label: "Vystavena" },
            payment_date_formatted: { label: "Splatnost" },
            payment_total: { label: "Částka" }
        }
    }, "invoicesGridTab2");
    grid.startup();
});

I can add few more things:

• List item
• I have no errors at the JavaScript console
• data source is already tested with using older dojox.grid.DataGrid
• it seems that main problem is with the rendering

Thanks for any help or advice!

Answer 1

You need to specify the field attribute in your columns that match with the response data object, for example:

request(invoicesDataUrl, { 
    handleAs: "json" 
}).then(function (response) {
    var store = new Memory({ data: response });
    var grid = new OnDemandGrid({
        region: "center",
        store: store,
        columns: {
            invoice_id: { label: "FID", field: "invoice_id" },
            user_id: { label: "UID", field: "user_id" },
            invoice_no: { label: "Číslo", field: "invoice_no" },
            user_fullname: { label: "Plátce", field: "user_fullname" },
            created_formatted: { label: "Vystavena", field: "created_formatted" },
            payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
            payment_total: { label: "Částka", field: "payment_total" }
        }
    }, "invoicesGridTab2");
    grid.startup();
});

I do not know if those field names are correct, but I assume you would. :)