add unit to numberspinner in dojo

Question

I'm creating programmatically a table container with numberspinners in dojo. Is there a way to add a unit (seconds, meters, etc.) to the spinner? Or if that's not possible, how can I add a second row with just labels in it? So I can define the units there.

Answer 1

Consider creating a custom widget, which will container your "label" value, here an example.

Note:

You can change the HTML template templateString from label to div if your prefer. Below I am using ContentPage() but you can a layout component as you which.

require(['dijit/form/NumberSpinner', 'dijit/layout/ContentPane', 'dijit/_WidgetBase', 'dijit/_TemplatedMixin', 'dojo/_base/declare', 'dojo/domReady!'], function(NumberSpinner, ContentPane, _WidgetBase, _TemplatedMixin, declare, domReady) {
     var data = {
        meters: '1'
    },
    layout = new ContentPane(),
    LabelTextbox = declare([_WidgetBase, _TemplatedMixin], {
        label: '',
        textboxId: '',
        name: '',
        value: '',
        
        templateString: '<div><label>${label}</label><div data-dojo-attach-point="textboxNode"></div></div>',
        
        postCreate: function() {
            this.inherited(arguments);
        
            this.own(new NumberSpinner({
                id: this.textboxId,
                name: this.meters,
                value: this.value
            }, this.textboxNode));
        }
    });

    Object.keys(data).forEach(function (prop, index) {
        layout.addChild(new LabelTextbox({
            textboxId: prop + '-'+ index,
            name: prop,
            value: data[prop],
            label: 'meters: '
        }));
    }.bind(this));

    
    layout.placeAt('layout');
    layout.startup();

});

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="layout"></div>