TreeView Databinding from javascript

[George Rossopoulos]

Hi

I have a treeview like this 

<ej-tree-view id="treeID" enable-multiple-expand="true" auto-check="true" full-row-select="true" node-select="onFolder" >
              <e-tree-view-fields  id="n_id"  parent-id="n_parent_id" text="v_text"></e-tree-view-fields>
          </ej-tree-view>
          <ej-script-manager></ej-script-manager>

and I wish to populate it from javasccript like this

<script>
   $(document).ready(function ()
   {
         _LinksViewType =@Model.iBookmarkviewtype;
         $("#treeID").ejTreeView("option", "dataSource", "@Model.lstTree");

Whats wrong with this?

Thank you in advance for the help

George

[Ashokkumar Balasubramanian]

Hi George Rossopoulos, 

 

We have checked your provided code block and your requirement. In that code block, you have tried to populate the tree data’s on before creating the TreeView element. If you want to populate tree data’s on before creating the TreeView component. So, can you populate the tree nodes on TreeView component create event. Please check the below code block.  

 

[CSHTML] 

 

<ej-tree-view id="treeID" enable-multiple-expand="true" auto-check="true" full-row-select="true" node-select="onFolder" create="onCreate"> 

        <e-tree-view-fields id="n_id" parent-id="n_parent_id" text="v_text" has-child="hasChild" expanded="expanded"></e-tree-view-fields> 

    </ej-tree-view> 

 

[Script] 

 

function onCreate(args) { 

        var localData = [ 

            { n_id: 1, v_text: "Discover Music", hasChild: true, expanded: true }, 

            { n_id: 2, n_parent_id: 1, v_text: "Hot Singles" }, 

            { n_id: 3, n_parent_id: 1, v_text: "Rising Artists" }, 

            { n_id: 4, n_parent_id: 1, v_text: "Live Music" }, 

            { n_id: 6, n_parent_id: 1, v_text: "Best of 2013 So Far" }, 

            { n_id: 7, v_text: "Sales and Events", hasChild: true, expanded: true }, 

            { n_id: 8, n_parent_id: 7, v_text: "100 Albums - $5 Each" }, 

            { n_id: 9, n_parent_id: 7, v_text: "Hip-Hop and R&B Sale" }, 

            { n_id: 10, n_parent_id: 7, v_text: "CD Deals" }]; 

        $("#treeID").ejTreeView("option", "fields.dataSource", localData); 

    } 

 

Sample Link: 

 

http://www.syncfusion.com/downloads/support/forum/135654/ze/UpdateDataSource1731719581.zip 

 

Please let us know, if the provided information’s are helpful to achieve your requirement or not. 

 

Regards, 

Ashokkumar B.