title: jquery treeview in grails
body: <p>I am trying to implement the <a href="http://jquery.bassistance.de/treeview/demo/async.html" rel="nofollow noreferrer">async jQuery treeview</a> in my grails project.. So my requirement is that on loading of the page i want to provide following structure :</p>
  <pre><code>-&gt; Overview
  -&gt; Resources
    --&gt; User Activity
    --&gt; Network Sources
  </code></pre>
  <p>And by clicking on <strong>User Activitity/Network Sources</strong> it should have following children :</p>
  <pre><code>--&gt; User Activity
    ---&gt; By Day of Week
    ---&gt; By Time of Day
    .....
  --&gt; Network Resources
    ---&gt; By Day of Week
    ---&gt; By Time of Day
    .....
  </code></pre>
  <p>Now the children list of Resources should be coming from controller, so based on that I have tried with following piece of code :</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    function initTrees() {
                  jQuery(&quot;#mixed&quot;).treeview({
                          url: &quot;/.../.../getSubTreedata&quot;
                  })
  
          }
   $(document).ready(function(){
                  initTrees();
          });
  &lt;/script&gt;
  
  &lt;ul id=&quot;mixed&quot;&gt;
          &lt;li&gt;&lt;span&gt;Overview&lt;/span&gt;&lt;/li&gt;
          &lt;li id=&quot;36&quot; class=&quot;hasChildren&quot;&gt;
              &lt;span&gt;Resources&lt;/span&gt;
              &lt;ul&gt;
                         &lt;li&gt;&lt;span class=&quot;placeholder&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  <p>And controller has following piece of code :</p>
  <pre><code>def getSubTreedata = {
          def jsonChild1 = [text:&quot;By Day of Week&quot;];
          def jsonChild2 = [text:&quot;By Time of Day&quot;];
          def jsonChild3 = [text:&quot;Holiday&quot;];
          def jsonChild4 = [text:&quot;Weekend&quot;];
          def jsonChild5 = [text:&quot;Time Windows&quot;];
          def jsonResult = [
              text: &quot;User Activity&quot;,
              expanded : false,
              classes : &quot;important&quot;,
              children : [jsonChild1,jsonChild2,jsonChild3,jsonChild4,jsonChild5],
          ]
          
          def convertedData = jsonResult as JSON
          convertedData = new StringBuffer(convertedData.toString()).insert(0, &quot;[&quot;);
          convertedData = new StringBuffer(convertedData.toString()).insert(convertedData.length(), &quot;]&quot;);
          println &quot;convertedData = &quot;+convertedData;
          render convertedData;
  </code></pre>
  <p>Ultimately its printing
  <code>convertedData = convertedData = [{&quot;text&quot;:&quot;User Activity&quot;,&quot;expanded&quot;:false,&quot;classes&quot;:&quot;important&quot;,&quot;children&quot;:[{&quot;text&quot;:&quot;By Day of Week&quot;},{&quot;text&quot;:&quot;By Time of Day&quot;},{&quot;text&quot;:&quot;Holiday&quot;},{&quot;text&quot;:&quot;Weekend&quot;},{&quot;text&quot;:&quot;Time Windows&quot;}]}]</code></p>
  <p>But it's not matching with my requirement, i need to create an array at controller and parse it into JSON and return it...</p>
  <p>Any help would be highly Appreciated...</p>
  <p><strong>: UPDATE :</strong>
  Now I am able to show the proper tree format at UI, but my major question is how can I show all the children i.e. &quot;By day of week&quot;, &quot;Time of Day&quot; etc as a link with Ajax.Updater... I know I need to change jquery.treeview.async.js file which actually is displaying all the childs.... But I am not getting how can I create them as a link and call Ajax.Updater by clicking on that link...</p>