TechQA.

Dgrid and Django Rest Framework (JsonRest)

487 views Asked by At

6.30.15 - HOW CAN I MAKE THIS QUESTION BETTER AND MORE HELPFUL TO OTHERS? FEEDBACK WOULD BE HELPFUL. THANKS!

I am creating an ondemand grid using dojo's dgrid. I am having trouble connecting to the store. I can get the column headers to display but I can't get any data to display here is the code I'm using. Some data changed for confidentiality. Any assistance would be greatly appreciated. The Json is being pulled from a Django Rest Framework api.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dgrid Test</title>
    <link a ref
</head>
<body>

     <div id="grid"></div>
    <script src="/static/web/dojo/dojo.js"
        data-dojo-config="async: true"></script>


    <script>
        require([
            'dojo/_base/declare',
            'dojo/data/ObjectStore',
            'dojo/store/JsonRest',
            'dojo/store/Memory',
            'dgrid/OnDemandGrid',
            'dojo/domReady!'], function (declare, ObjectStore, Memory, JsonRest, OnDemandGrid) {


    var grid = new OnDemandGrid({
        collection: new dojo.store.JsonRest({target:"/api/storeName/"}),
        columns: {
            id: 'ID',
            column1: 'column1',
            column2: 'column2',
            column3: 'column3',
            column4: 'column4',
            column5:'column5',
            column6:'column6',
            column7:'column7',
            column8: 'column8'
        }
    }, 'grid');

    grid.startup();
});
    </script>

UPDATE - dstore/Rest applied - still can't pull data.Now column headers don't display either...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dgrid Test</title>

</head>
<body>

     <div id="grid"></div>
    <script src="/static/web_ui/dojo/dojo.js"
        data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Rest',
            'dgrid/OnDemandGrid',
            'dojo/domReady!' 
], function (declare, dom, on, Rest, OnDemandGrid) {
    // Create an instance of OnDemandGrid referencing the store
    var store = new Rest({ target:"/api/apiname/" });

    });
     var grid = new OnDemandGrid({
        collection: store,
        columns: {
            column1: 'column1',
            column2: 'column2',
            column3: 'column3',
            column4: 'column4',
            column5:'column5',
            column6:'column6',
            column7:'column7',
            column8: 'column8'
        }
    }, 'grid');

    grid.startup();

UPDATE 6.2.15

Here is the revised code that I've been working on this morning. Here is the error coming up in Firebug: TypeError: transform(...) is null return transform(value, key).toString(); instrum...tion.js (line 20)

This really doesn't make any sense. I don't know if that error is keeping it from the data from actually displaying or not. No matter what I do, it won't display. Tomorrow will be two weeks working on this one thing. The joys of programming. :)

And here is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dgrid Test</title>

</head>
<body>

<h1>Demo: Single-Query Mixin</h1>
    <form id="queryForm">
        <label for="lastField">Blank Blank contains:</label>
        <input id="lastField" name="blank_type">
        <button type="submit">Filter</button>
        <button type="reset">Reset</button>
    </form>

     <div id="grid"></div>
    <script src="/static/web_ui/dojo/dojo.js"
        data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Rest',
            'dstore/Request',
            //'dstore/RequestMemory',
            'dgrid/extensions/Pagination',
            'dgrid/OnDemandGrid',
            'dstore/Trackable',
            'dojo/domReady!'
], function (declare, dom, on, Rest, Request, Pagination, OnDemandGrid, Trackable) {
    // Create an instance of OnDemandGrid referencing the store
    var data = [];
    for (var i = 0; i < 100; i++) {
        data[i] = {
            id: i + 1,
            name: '' + (i + 1),
            value: i + 1
        };
    }

     var store = new (declare([Rest, Trackable]))({ 
        target:'http://localhost:8000/api/XXXXXXXXX/?format=json',
        range:items=0-25,
        idProperty: 'id',
        data: data
     });


     var grid = new (declare([OnDemandGrid, Pagination]))({
        collection: store,
        columns: [
            {label:"ID", field:"id"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"}
        ]
    }, 'grid');


 grid.startup(); 


});
    </script>

</body>
</html>

This is the code if you click the link in the error. The grid itself displays in the browser; buttons, column headers... everything... just no data. And in the terminal (server information): this displays: [02/Jun/2015 13:38:18] "GET /api/XXXXXXXXX/?format=json&limit(25) HTTP/1.1" 200 1631 [02/Jun/2015 13:38:18] "GET /api/XXXXXX/?format=json&limit(10) HTTP/1.1" 200 1631

//  |       }
    //  |   );

    thisObject = thisObject || kernel.global;
    transform = transform ?
        lang.hitch(thisObject, transform) : function(v){ return v; };

    return template.replace(/\$\{([^\s\:\}]+)(?:\:([^\s\:\}]+))?\}/g,
        function(match, key, format){
            var value = lang.getObject(key, false, map);
            if(format){
                value = lang.getObject(format, false, thisObject).call(thisObject, value, key);
            }
            return transform(value, key).toString();
        }); // String
};

string.trim = String.prototype.trim ?
    lang.trim : // aliasing to the native function
    function(str){
        str = str.replace(/^\s+/, '');
        for(var i = str.length - 1; i >= 0; i--){
            if(/\S/.test(str.charAt(i))){
                str = str.substring(0, i + 1);
                break;
            }
        }
        return str;
    };

UPDATE 6.3.15 Here is the new code trying to create a custom store to meet requirements

  <script>
        define([
            'dojo/_base/lang',
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Store',
            'dojo/Request',
            'dojo/store/Observable',
            'dgrid/extensions/Pagination',
            'dgrid/OnDemandGrid',
            'dstore/QueryResults',
            'dojo/domReady!'
], function (lang, declare, dom, on, Store, Request, Observable, Pagination, OnDemandGrid, QueryResults) {
    // Create an instance of OnDemandGrid referencing the store

     return declare(Observable(Store, { 
        apiUrl:'http://localhost:8000/api/table/?format=json',
        headers: {
            Accept: 'application/json.rest_framework.v3+json'
        },
        'Content-Range':items=0-25/765,
        _request:function (target, options) {
            options = lang.mixin({ handleAs:'json'}, options);
            options.headers = lang.mixin({}, this.headers, options.headers);
            return request(this.apirUrl + target, options);
        },

        get: function (id) {
            return this._request('api/table/'+ encodeURIComponent(id),{
                method: 'GET'
            });
        },
        fetch: function(){
            return new QueryResults(this._request('/api/table'));
        }
     }));


     var grid = new (declare([OnDemandGrid, Pagination]))({
        collection: store,
        columns: {
            {label:"ID", field:"id"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"}
        }
    }, 'grid');


 grid.startup(); 

});
    </script>
python django dojo dgrid jsonreststore
Original Q&A
2

There are 2 answers

9
Ken Franqueiro On BEST ANSWER

This question has begun to morph, so I've formatted my answer a bit to try to match so it's still somewhat cohesive.

Problem 1: dgrid version vs. store API in use

dgrid 0.4 interfaces with dstore stores, not dojo/store, which is why you're ending up with no data displayed.

dstore/Rest should be usable as a mostly drop-in replacement for dojo/store/JsonRest, though you may want to fiddle with some of the options it inherits from Request.

If you're coming from dgrid 0.3 previously, the migration guide has a section covering the store API change. The Using Grids and Stores tutorial was also updated for dgrid 0.4 and dstore.

Problem 2: Data format returned by server

dstore/Rest has specific expectations about services it connects to in order to work. Another question popped up regarding this, so I have an answer there regarding the details.

Problem 3: "transform(...) is null return transform(value, key).toString();"

This sounds largely tangential to the original issue, but the most common cause is a widget template that is referencing a property via ${...} that doesn't actually exist in the widget.

0
Johnson On

I have been going around and around with this Dojo / Django issue for almost a month now. The issue problem was a compatibility issue between Django Rest Framework API and the dojo / dgrid pagination. I received some awesome help from Ken Franqueiro and Dylan from Sitepen. After conversing back and forth with them (and aggravating them I'm sure... :) They helped me to determine several things.

Dgrid 0.3 works best with Dojo/store - Dgrid 0.4 works best with dstore. However in order to get it work properly with the Django Rest Framework - the Limit/Offset Pagination has to be set in the Django Rest Framework settings in settings.py. 

# Django REST Framework configuration overrides
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.IsAdminUser',),
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination'

}

Ken also suggested that I would have to create a custom store to get it to work completely. Using Dojo 1.8 and dgrid 0.3.0 (dojo/store/JsonRest and request) worked just fine after implementing the pagination settings.

After three long weeks (and one day) of working on this One issue, I am EXTREMELY grateful to say that data displays in the dgrid and I can move on to the next thing. Thank you so much to Ken and Dylan for their assistance (and patience)! :)

Related Questions in PYTHON

Related Questions in DJANGO

Related Questions in DOJO

Related Questions in DGRID

Related Questions in JSONRESTSTORE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions