-1

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>
Johnson
  • 83
  • 12
  • What version of dgrid? (I'm guessing 0.4?) – Ken Franqueiro Jun 01 '15 at 16:48
  • yes - it's the latest version. – Johnson Jun 01 '15 at 16:53
  • This is kind of morphing into a different question now. The most common cause of the "transform(...) is null return transform(value, key).toString();" error is if you have a widget template that is referencing a property via `${...}` that doesn't actually exist in your widget. That's entirely unrelated to the initial issues around data format, however, and you still haven't included an example of what your service's data response looks like. – Ken Franqueiro Jun 02 '15 at 20:29

2 Answers2

0

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.

Community
  • 1
  • 1
Ken Franqueiro
  • 10,559
  • 2
  • 23
  • 40
  • Great! I'll try that right now and see if I can get it working. Thank you so much!!! I've been working on this for over a week now! – Johnson Jun 01 '15 at 17:00
  • Well, I've done more research on the dstore and Rest and RequestMemory and a few others, but I still can't get it to work. I've looked and looked through the tutorials. Is there anything else you would suggest? – Johnson Jun 01 '15 at 18:41
  • for all intensive purposes it looks like it should work, but it's still not working. Is there anything else I could try? I've researched a lot of the dstore documentation and tutorials. And from what I can tell my code SHOULD work.... – Johnson Jun 01 '15 at 18:47
  • You seem to be ending your `require` callback pretty early (before `var grid = ...` which is probably a mistake... – Ken Franqueiro Jun 01 '15 at 23:38
  • I saw that too and corrected it. :) Thanks. I've just about got it. The data is being pulled, you can see it with a debugger, but it still won't display. It's the weirdest thing...hoping to nail this thing today. – Johnson Jun 02 '15 at 12:16
  • Can you give an example of what the response looks like (changing values if you need to in order to post here)? – Ken Franqueiro Jun 02 '15 at 12:47
  • Yes, just a moment... I'm going round and round... I'll post an update in the box above. – Johnson Jun 02 '15 at 13:40
  • I read your other comment on the other question and have begun trying to do exactly as you said. Trying to create a custom store to suit all needs. Still not working but would love feedback to see if I'm even on the right track... – Johnson Jun 03 '15 at 15:30
  • I took out the dojo store observable and switched out for dstore trackable – Johnson Jun 03 '15 at 15:55
0

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)! :)

Johnson
  • 83
  • 12