Any Tree from JSON example ?

[kccheng]

Hi,

After reading the doc/examples for two days, well, I can run the simple
Tree example ... but I'm still very confuse with the relationship between Tree
and JSON ... specially, how the "ForeignKey" related to rootValue, tree relationship ....

Could someone provide me an PARENT mode example ? For example,
I want have a tree looks like below:

aaa
   xxx
        111
             jjj
        222
             iii
bbb
   yyy
       333
       444
   zzz
       555
             kkk
             lll
       666

What's the JSON looks like for this tree ?
How many foreignkey I need in DataSource?
What's the root value ?
Thanks a lot.


Regards
KC

[bladewheels]

Sounds about right...

I think it took me at least 3 days to get a working example (w/Grails) going; my code/laptop's in the bag now but I'll post a simplified version tomorrow AM if no one else has.

Keep the faith (it can be done!)

[davidj6]

It's really not complicated. Here's an example of a menu tree that is built from a datasource:

isc.RestfulDataSource.create({
  ID: "mainMenuDS",
  dataFormat: "json",
  fetchDataURL: "data/MainMenu",
  title: "Main Menu",
  fields: [
    {
      name: "formId",
      title: "Form ID",
      type: "integer",
      primaryKey: true,
      canEdit: false,
      hidden: true,
      required: true
    },
    {
      name: "parentFormId",
      title: "Parent Form ID",
      type: "integer",
      canEdit: false,
      hidden: true,
      required: true,
      foreignKey: "mainMenuDS.formId"
    },
    {
      name: "name",
      title: "Name",
      type: "text",
      canEdit: false,
      required: true,
      length: 64
    },
    {
      name: "url",
      title: "Url",
      type: "text",
      canEdit: false,
      hidden: true,
      required: true,
      length: 64
    },
    {
      name: "isFolder",
      title: "Is Folder",
      type: "boolean",
      canEdit: false,
      hidden: true,
      required: true
    }
  ]
})

And here is some sample data:

{
  "data": [
  {
    "menuItemId": 101,
    "parentMenuItemId": 1,
    "name": "Item search",
    "formName": "ItemSearch",
    "isFolder": false
  },
  {
    "menuItemId": 102,
    "parentMenuItemId": 1,
    "name": "Add item",
    "formName": "ItemEdit",
    "isFolder": false
  },
  {
    "menuItemId": 1,
    "parentMenuItemId": 0,
    "name": "Inventory",
    "isFolder": true
  },
  {
    "menuItemId": 201,
    "parentMenuItemId": 2,
    "name": "Invoice/memo search",
    "formName": "InvoiceSearch",
    "isFolder": false
  },
  {
    "menuItemId": 202,
    "parentMenuItemId": 2,
    "name": "Add memo",
    "formName": "MemoEdit",
    "isFolder": false
  },
  {
    "menuItemId": 2,
    "parentMenuItemId": 0,
    "name": "Invoice/Memo",
    "isFolder": true
  }
]
}

Note that this is using my custom RestfulDataSource so the "response" and "status" fields in the JSON structure are not included. See RestDataSource for details on the default response structure.

I hope this helps.

[kccheng]

Hi David,

Thanks for the example. I have no problem to get the
example running ... I think I more or less catch the point., but still confusing.

So far, my understanding is:

* a tree need both primaryKey and foreignKey
* primaryKey and foreignKey must have the same data type (so internally,
the value of foreignKey could be compared with the value of primaryKey to
determine which record is the parent record).
* primaryKey is the recordID, and foreignKey is myParentRecordID
* rootValue is the foreignKey value of the top level tree.
* if JSON is constructed as { response: { data: [ .... ] } },
the DataSource requires to setRecordXPath("/response/data")

Are these correct ? Please help to confirm.

Regards,
KC

[Isomorphic]

Everything but the last point. With a RestDataSource, you don't need to set recordXPath because the RestDataSource is preconfigured with one.

Also note, trees can be loaded in multiple different data formats. The format shown by David is called the "parent" modelType and accomodates level-by-level load on demand. The "children" modelType is also available and in this case you define the tree as a nested JSON structure where each record contains an Array of children. See the Tree DataBinding overview for details.

[kccheng]

Gotcha ! Thanks.

Regards
KC