CODEWITHSUNDEEP
javascriptjquerydatagriddojogrid
Ali
Ali

Reputation: 2233

Dojo DataGrid Virtual Scrolling How-To?

I've been digging around for this one quite a bit. I'm using dojox.grid.datagrid and I have an ajax call that brings back 200-300 rows.

The grid renders and scrolls just fine in Chrome but scrolling is excruciatingly slow in IE 7 and 8. I'd like to use virtual scrolling to try and remedy the issue but can't find any sample code.

Here's what my code looks like at present.

function setupAvailableScenes(location) {
var avaiableScenesGridPane = dijit.byId("AvaiableScenesGridPane");
var availableScenesGrid = dijit.byId("AvailableScenesGrid");
if (_isFirstLoad) {

    availableScenesGrid = new dojox.grid.DataGrid({
        id: 'AvailableScenesGrid',
        store: availableScenesStore,
        query: { Id: "*" },
        sortInfo: "1",
        rowsPerPage: 20,
        autoHeight:20,
        style: "width:315px",
        structure: [
                { name: "Available Scenes", field: "Name", width: "85%" },
                {   name: " ",
                    field: "_item",
                    rowsPerPage: "25",
                    type: dojox.grid.cells._Widget,
                    editable: false,
                    width: "15%",
                    formatter: function (scene) {
                        return new dijit.form.Button(
                        {
                            label: "+",
                            onClick: function () {
                                AddSceneToSelectedScenes(scene);
                            }
                        })
                    }
                }
            ]
    });

    avaiableScenesGridPane.set('content', availableScenesGrid);
}

var availableScenesStore = new dojo.data.ItemFileWriteStore({
    url: _applicationPath + "/Location/" + location.Id + "/Scene.json",
    preventUrlCache: true
});

availableScenesGrid.setStore(availableScenesStore);

}

Upvotes: 0

Views: 3077

Answers (2)

Rylee Corradini
Rylee Corradini

Reputation: 743

Often one of the biggest things you can do to improve DataGrid performance is to throw away the ItemFileReadStore/WriteStore and use an optimized data store (personally I like QueryReadStore). It would mean needing a server-side servlet of some kind (PHP/JSP/etc) to handle the virtual scrolling/pagination, but I've seen major perf boosts over just using a store backed by a JSON file.

Some other things to consider, which may or may not help:

  • give your anonymous formatter function a name and try scrolling the table with the Chrome or Firebug profiles turned on to see if it's hogging a lot of cycles (or, like Vijay Agrawal said, you could try replacing the dijit.form.Button with a vanilla html <button> tag)
  • you shouldn't actually need to specify the dojox.grid.cells._Widget type for that cell; having a custom formatter returning a valid Dijit should be sufficient to make the Grid do the right thing.

Upvotes: 2

Vijay Agrawal
Vijay Agrawal

Reputation: 3821

Since you specified rowsPerPage=25, it is already doing virtual scrolling (it pulls the new set of rows only when user scrolls down)

Since you mention scrolling is very slow, the performance issue seems to be around rendering the new rows - you may try a couple things to improve performance: 1) remove autoHeight attribute. Instead, specify a fixed height in the style attribute 2) in the formatter function, instead of returning a dijit, try returning a simple html button/anchor styled as button so remove the type:dojox.grid.cells._Widget attribute and in the format function return the html you want to use

Upvotes: 1

Related Questions