This is a migrated thread and some comments may be shown as answers.

Async Treeview Datasource Q

2 Answers 57 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Simon Woods
Top achievements
Rank 1
Simon Woods asked on 11 Feb 2014, 08:07 AM
Hi ... relatively new to webdev ...

I'm trying to populate the treeview from an async remote data source

var tree = $('#treeview').kendoTreeView({   
        dataSource: getQueryData(),
        dataTextField: "Name",
        select: function (e) { 
         var id = this.dataItem(e.node).id;
         onChange(id);
        }

I need to retrieve the data then process it prior to setting the data source in order to add sprites. Thus far my solution is as follows

  function fetchData(cb) {
    var data = [];
    var ds = new kendo.data.DataSource({
      transport: {
        read: {
          url         : "http://localhost:57773/api/definitions",
          dataType    : "json"
        }
      }
    });

    ds.fetch(function () {
      data = cb(ds.data());              
    });      

    return data;
  };

  function addSprites (data) {
    for (var key in data) {
      if (key == "NodeType") {
       data.spriteCssClass = data.NodeType;
      }

      if (data[key] !== null && typeof(data[key])=="object") {
        addSprites(data[key]);
      }
    }
    return data
  };

  function getQueryData () {  

    var dataitems = fetchData(addSprites);
    
    var hds = new kendo.data.HierarchicalDataSource({
      data: dataitems,
      schema: {
        model: {
          id          : "Key",
          hasChildren : "HasChildren"          
        }
      }  
    });

    return hds;
  }; 

I am not quite sure how I should be architecting this since the hierarchical data set is returning prior to the completion of the async data retrieval and pre-processing of that data. I'd be grateful if someone could give me a steer as to how to do this "properly". If possible I'd like to avoid going synchronous.

Thx IA.

Simon

2 Answers, 1 is accepted

Sort by
0
Simon Woods
Top achievements
Rank 1
answered on 11 Feb 2014, 01:38 PM
One of co-workers pointed me to dataSpriteCssClassField which meant I could bind directly to the datasource
0
Alex Gyoshev
Telerik team
answered on 11 Feb 2014, 03:21 PM
Hello Simon,

Indeed, you can use the dataSpriteCssClassField to specify the field where the sprite class is held (in your example, this appears to be "NodeType".

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Simon Woods
Top achievements
Rank 1
Answers by
Simon Woods
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or