Loading Treeview control

3 posts, 0 answers
  1. Saloni
    Saloni avatar
    3 posts
    Member since:
    Aug 2016

    Posted 09 Aug Link to this post

    I am using angular1.0 and kendo UI controls and trying to populate the tree view all at once. Need help on loading the treeview control. I am struggling to load the child nodes. My api call returns this

    "[{\"Item\":\"National\",\"StationName\":[{\"Item\":\"A\"}]},{\"Item\":\"San Francisco\",\"StationName\":[{\"Item\":\"B\"},{\"Item\":\"C\"},{\"Item\":\"KCBS-AM\"}]},{\"Item\":\"Los Angeles\",\"StationName\":[{\"Item\":\"D\"},{\"Item\":\"E\"},{\"Item\":\"F\"},{\"Item\":\"G\"},{\"Item\":\"H\"}]},{\"Item\":\"Seattle\",\"StationName\":[{\"Item\":\"I\"},{\"Item\":\"J\"}]}]"

    This is on my js (controller) file

     
       $scope.treeData = new kendo.data.HierarchicalDataSource({
           transport: {
               read: {
                   url: 'api/stationdata/GetStationData',
                   dataType: "json",
                   contentType:"application/json"
               },
               schema: {
                   model: {
                       id: "item",
                       children: "stationName"
                   }
               }
           }
       });

     

    this is on my html

     <div kendo-tree-view="tree"

                             k-data-source="treeData"
                             k-on-change="selectedItem = dataItem">
                            <span k-template>
                               {{dataItem.item}}{{dataItem.stationName}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
                            </span>
                        </div>

     

    Attacched is the screen shot of what I see. How do I get the child node to display ?

     

  2. Saloni
    Saloni avatar
    3 posts
    Member since:
    Aug 2016

    Posted 09 Aug Link to this post

    I want to add to the above question that this is what is returned from my api call

    <string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">[{"Item":"National","StationName":[{"Item":"CRS-DMG Local Commerce"}],"HasStation":true},{"Item":"San Francisco","StationName":[{"Item":"KMVQ-FM Digital"},{"Item":"KMVQ-FM"},{"Item":"KCBS-AM"}],"HasStation":true},{"Item":"Los Angeles","StationName":[{"Item":"KCBS-AM Digital"},{"Item":"KROQ-FM Digital"},{"Item":"KNX-AM Digital"},{"Item":"KNX-AM"},{"Item":"KROQ-FM"}],"HasStation":true},{"Item":"Seattle","StationName":[{"Item":"KFNQ-FM Digital"},{"Item":"KFNQ-AM"}],"HasStation":true}]</string>

     

    Now, I get the error item.level is not a function. any help ?

  3. Kendo UI is VS 2017 Ready
  4. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 11 Aug Link to this post

    Hello Saloni,

    I noticed that the data is not returned in a valid JSON format. Please strip the data from the <string> tag. Also, I made small adjustments to the data in order to display it correctly in the TreeView. Check the following example demonstrating the result after the adjustments to the data:

    http://dojo.telerik.com/aBOpO

    Also, I can suggest checking the information for the Kendo UI HierarchicalDataSource:

    http://docs.telerik.com/kendo-ui/framework/hierarchicaldatasource/overview 

    Please modify the response from the server and advice if the issue still persists.

    Regards,
    Stefan
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top