Binding Json result to kendo treeview

Question

I have json result which looks like below (as in JSON viewer)

{
     - parents: [
              -   {
                   empname: "mjhdakj",
                -  child1Obj: {
                       empid: 1,
                    -  emp: {
                              EmployeeId: 1,
                              FirstName: "mjhdakj",
                              LastName: ",dkja",
                              ColorVariable: 0,
                             ColorValue: null
                             }
                    }
                 },
              -  {
                      empname: "hmgsjh",
                 -    child1Obj: {
                          empid: 2,
                    -     emp: {
                                 EmployeeId: 2,
                                 FirstName: "hmgsjh",
                                 LastName: ",khfs ",
                                 ColorVariable: 0,
                                 ColorValue: null
                               }
                       }
                   }
     ]
}

Now I am trying to bind this JSON result to a kendo treeview as the below code in .cshtml

@(Html.Kendo().TreeView()
    .Name("treeview")
    .DataTextField("parents")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("empTreeViewData", "Employee")
        )
    )
)

where empTreeViewData is the controller method which gives the JSON result and Employee is my controller. When trying to bind my JSON data I am getting error as " Uncaught TypeError: undefined is not a function" in Console of developer tools of browser.

I also tried binding using the below code.But it didn't work.

<script type="text/javascript">  
    $(document).ready(function () {     
        $.getJSON("/Employee/empTreeViewData", function (data) {
           // alert(JSON.stringify(data));

            var tv = $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },
                dataSource: data
            }).data("kendoTreeView");
        })   
    });
</script>
<div id="treeview"></div>

All the code is written in .cshtml and Razor View engine. I have also referred the below link: Kendo Treeview with remote datasource issue

and researched a lot regarding this. Please anybody could help me. Thanks in advance

knikolov knikolov · Accepted Answer · 2015-02-17T16:39:50

Have you checked the following demo:

http://demos.telerik.com/kendo-ui/treeview/remote-data-binding

Binding Json result to kendo treeview

1 Answers