Authors:Rahul Akolkar, Ed Chatelain
Developers:Rahul Akolkar, Ed Chatelain

A simple model-bound container widget with single-node binding to a data model. A group is usually bound to an intermediate dojo.Stateful node in the data model. Child dijits or custom view components inside a group inherit their parent data binding context from it.


Parameter Type Default Description
ref String or StatefulModel   The value of the data binding expression passed declaratively by the developer. This usually references a location within an existing datamodel and may be a relative reference based on the parent / container data binding (dot-separated string).


Declarative example


// Initial data
var order = {
    "Serial" : "360324",
    "First" : "John",
    "Last" : "Doe",
    "Email" : "",
    "ShipTo" : {
        "Street" : "123 Valley Rd",
        "City" : "Katonah",
        "State" : "NY",
        "Zip" : "10536"
    "BillTo" : {
        "Street" : "17 Skyline Dr",
        "City" : "Hawthorne",
        "State" : "NY",
        "Zip" : "10532"
// The dojox.mvc.StatefulModel class creates a data model instance
// where each leaf within the data model is decorated with dojo.Stateful
// properties that widgets can bind to and watch for their changes.
var model = new dojox.mvc.StatefulModel({ data : order });
<div class="row" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model.ShipTo'">
    <div class="row">
        <label class="cell" for="streetInput">Street:</label>
        <input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Street'"/>
    <div class="row">
        <label class="cell" for="cityInput">City:</label>
        <input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'City'"/>
    <div class="row">
        <label class="cell" for="stateInput">State:</label>
        <input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'State'"/>
    <div class="row">
        <label class="cell" for="zipInput">Zipcode:</label>
        <input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Zip'"/>
<button id="shipto" type="button" data-dojo-type="dijit.form.Button" onClick="dijit.byId('addrGroup').set('ref',model.ShipTo);">Ship To</button>
<button id="billto" type="button" data-dojo-type="dijit.form.Button" onClick="dijit.byId('addrGroup').set('ref',model.BillTo);">Bill To</button>

In the above example, the TextBoxes inside the group with the id=”addrGroup” will display either the ShipTo data or the BillTo data depending upon which button is pressed.

Error in the documentation? Can’t find what you are looking for? Let us know!