Using Dojos EnhancedGrid with client-sided plugins

Question

I have got an EnhancedGrid with a JsonRestStore bound to a backend Rest API. Thats my code for it:

     <script>

        /**
        * Creates Dojo Store.
        */

        require(["dojo/store/JsonRest"], function (JsonRest) {
            myStore = new JsonRest({ handleAs: 'json', target: 
                'https://api.twitter.com/1/statuses/user_timeline.json'+
                '?trim_user=true&screen_name=twitter&count=100' });
        });

        var layout = [[
            { name: 'Created at', field: 'created_at', datatype: 'string', 
                width: '100px' },
            { name: 'Message', field: 'text', datatype: 'string', 
                width: 'auto', autoComplete: true },
            { name: 'Source', field: 'source', datatype: 'string', 
                width: '200px', filterable: false },
            { name: 'Retweets', field: 'retweet_count', datatype: 'number', 
                width: '100px', disabledConditions: ["startsWith", "notStartsWith"] }
        ]];

        /**
        * Creates Dojo EnhancedGrid.
        */

        require(["dojox/grid/DataGrid",
            "dojox/grid/EnhancedGrid",
            "dojo/data/ObjectStore",
            "dojox/grid/enhanced/plugins/Filter",
            "dojox/grid/enhanced/plugins/NestedSorting",
            "dojox/grid/enhanced/plugins/Pagination", 
            "dojo/domReady!"
        ], function (DataGrid, EnhancedGrid, ObjectStore) {

            var grid = new EnhancedGrid({
                id: 'grid',
                store: dataStore = new ObjectStore({ objectStore: myStore }),
                structure: layout,
                //clientSort: "true",
                rowsPerPage: 5,
                rowSelector: "20px",
                selectionMode: "single",
                plugins: {
                    filter: {
                        ruleCount: 5,
                        itemsName: "Tweets"
                    },
                    nestedSorting: true,
                    pagination: {}
                }
            });

            grid.placeAt('grid5');
            grid.startup();  
        });
    </script>
    <div id="grid5"></div>

As you can see I used several plugins for my grid. The filter plugin is working without problems. For that I just use client side filtering. But the plugins pagination and nested sorting do not work.

Sorting: Clicking on the arrow 'asc' or 'desc' doesnt change the order. Pagination: Navigating to the next 25 entries still holds the same 25 entries as the page before did.

For both plugins it seems like after clicking it just loads the new json from the backend and renders it again. The network traffic inidicates that as well. Is there a solution to make it work on client-side?

Answer 1

Your REST Service must support all the operations needed for the plugins ! If your Service supports those operations and it still isn't working, then something has to be wrong with how the plugins are accessing the data from your REST API.

Run your application with something like firebug and take a look at what happens (= what is requested from the server) if you click on the sort / pagination elements. If the server response isn't sorted or paginated, then you will have to configure the plugins, so that they will know how to create a valid url (= a url that's actually doing what you expect of it).

Another way would be to create something on your server that maps the dojo requests to valid REST API requests.