Connecting the data store

Within a Diagram control, the data source that represents all the nodes of the graph can be specified through the nodesStore property of the Diagram class. This property accepts any object that conforms to the dojo.data.api and that implements the dojo.data.api.Read and dojo.data.api.Identity interfaces. Additionally, the Diagram widget handles data change events provided the data store implements the dojo.data.api.Notification interface.
To connect a data store to a Diagram widget declaratively:
  • Use the following code:
     <div dojoType="dojo.data.ItemFileWriteStore" url="./mycompany.json" jsId="graphModel" ></div>            
       <div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' style="width:900px;height:700px" nodesStore="graphModel" ></div>
To connect a data store to a Diagram widget programmatically:
  1. Use the following code:
    var diagram = new ibm_ilog.diagram.widget.Diagram();
        var graphModel = new dojo.data.ItemFileReadStore({url:"./mycompany.json"});
        diagram.attr('nodesStore', graphModel);
  2. Use the query property to specify which query the diagram must use to fetch the items from the data store.