renderCell function not being called?

Question

I'm working on learning the basics of dgrid and one of the features I'm most interested in is the ability to render dom elements within the cells of the grid. I am using a store, which is something none of the examples I have looked at use, and I haven't been able to get things working mimicking those examples. Here's what I'm working with:

function testRenderCell(object, value, node, options) {
    var div = document.createElement("div");
    div.className = "renderedCell";
    div.innerHTML = "test";
    return div;
};

var jsonObj= 
{
    columns : [{label: "Test", field: "test", width: "150px", renderCell: testRenderCell}],
    data : []
};

grid.set("columns", jsonObj.columns);

var dataStore = new Observable(Memory({idProperty: "id", data: jsonObj.data}));
grid.store = dataStore;

In a function called with the results of a REST call:

for (var i = 0; i < reply.length; i++) {
    dataStore.put({
        test: reply[i],
    },
    {id:i}
);

However, the dgrid just renders the contents as [object Object], which obviously means the raw data in the store is being rendered in the cell, and renderCell is not being called. Perhaps I am misunderstanding how/when the renderCell function is called, or maybe I just made a silly mistake. In any case, any help would be much appreciated!

Answer 1

I have just run through the dgrid tutorial explaining how to use stores with your grid and I tested you render cell function by replacing all the columns with just your example, but obviously chose a field name included in the json they use. It worked a treat. Take a look at the example I referred to, it may help, it does not include renderCell, but it is a good starting point.

To display some value from the data in the returned div I could just pick out the value argument to display in the returned html like so...

function testRenderCell(object, value, node, options){
    var div = document.createElement("div");
    div.className = "renderedCell";
    div.innerHTML = value;
    return div;
}

Here is the code snippet from my own index file, the data I used was just a local version of the data they used in the example that I copied onto my system.

require([
    "dojo/request",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid"
], function (request, Memory, OnDemandGrid) {

    function testRenderCell(object, value, node, options){
        var div = document.createElement("div");
        div.className = "renderedCell";
        div.innerHTML = value;
        return div;
    }

    request("/DGridTests/data.json", {
        handleAs: "json"
    }).then(function (response) {
        // Once the response is received, build an in-memory store with the data
        var store = new Memory({ data: response });

        // Create an instance of OnDemandGrid referencing the store
        var grid = new OnDemandGrid({
            store: store,
            columns: [
                { 
                    label: "Test",
                    field: "first",
                    width: "150px",
                    renderCell: testRenderCell
                }
            ]
        }, "grid");

        grid.startup();
    });
});

The docs for the Grid and details on the renderCell function can be found here.

There are a few possible reasons for your [Object] rendered content, the first could be to check if you are also using 'formatter' as that will override 'renderCell'.

The second would be to make sure that the value or field you are seeing by the time you get into your renderCell function is not an Object itself, you may need to just pull out the variable you need.

The third is the grid doesn't like the way your injecting in its columns, possibly back track a little and refactor you code into a simpler syntax, adding the columns as part of the grids constructor arguments as in my code snippet. You can always add complexity later on.

I hope that helps, if I think of anything else I'll add more, good luck.

[UPDATE]

Ok reading David's answer, I tried out not returning anything and just altering the node instead. It seems to work, here is the function changed to do this. I'm not sure whether I like not returning anything, it is a little less obvious what the function is doing, but still it works so thats cool...

function testRenderCell(object, value, node, options){
    node.innerHTML = value;
}

Answer 2

I just started working with dgrid yesterday. I used a dojo.store.JsonRest and had no problems. But, I doubt the store has anything to do with your problem. I would try a couple of things:

1. Instead of creating a new 'div', use the DOM node provided by the renderCell function (see my example below)
2. I don't think you don't need to return anything from the renderCell function. I didn't and it worked for me

I would guess that your problem is that you're creating a div and not using the one provided. Here's how I created my dgrid:

grid = new Grid({
    store: Observable(JsonRest({
        target: myUrl,
        idProperty: 'id'
    })),
    columns: {
        timestamp: {
            label: 'Date',
            renderCell: function (object, value, node, options) {
                // Object is the row; i.e., object's properties are the column names
                // value is the value for this cell 
                // node is the DOM node of this cell
                // Not sure what 'options' refers to; I didn't need a fourth param
                var dtg = new Date(value);

                node.innerHTML = locale.format(dtg, {
                     datePattern: 'MM/dd/yyyy',
                     timePattern: 'HH:mm:ss'
                });

                // Notice I didn't return anything
             }
        }
}, 'my-grid');

Hope this helps.