Widgets inside Dojo dgrid OnDemandList

Question

I'm trying to do something similar to this question but using an OnDemandList instead of an OnDemandGrid.

Here is what I have so far

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dgrid/OnDemandList",
    "widget/CategoryItem",
    "dojo/dom-construct",
    "dojo/text!./templates/category-list.html"
], function(declare, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, OnDemandList, CategoryItem, domConstruct, template) {
    var CatList = declare([OnDemandList]);
    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString: template,
        baseClass: "category-list",

        postCreate: function() {
            this.inherited(arguments);

            // Create OnDemandList, place in div defined in template.
            var cat1 = this.cat1 = new CatList({
                store: this.store,
                renderRow: this.renderItem
            }, this.categoriesLevel0);

        },

        renderItem: function(item) {
            return new CategoryItem({
                title: item.title
            });
        }
    });
});

The problem is my renderItems function needs to somehow return a dom containing my custom widget. As it is now I get this error Error on domReady callback: Error: NotFoundError: DOM Exception 8

Answer 1

Yeah it definitely needs to return a dom node from renderRow. Assuming you're using _WidgetBase for CategoryItem it should work like:

renderItem: function(item) {
    var category = new CategoryItem({
        title: item.title
    });
    return category.domNode;
}

The example here: https://github.com/SitePen/dgrid/wiki/OnDemandList-and-OnDemandGrid does pretty much the same thing, except it uses put-selector, which is just constructing a div, attaching the widget to it and returning the new div.