Binding remote data to kendo treeview

Question

I trying to return the values i get from the controller action method to the kendo treeview to pupulate the module Name as the parent node in the kendo treeview.

public ActionResult LoadTreeView([DataSourceRequest] DataSourceRequest request)
    {
        using (var countryvar = new TGSFMSSys_UserEntities())
        {
            IQueryable<Module> module = countryvar.Modules;
            DataSourceResult result = module.ToDataSourceResult(request, value => new Module
            {
                ModuleId = value.ModuleId,
                ModuleName = value.ModuleName

            });
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

Below is the Javascript code for the kendo treeview I created

<script>
    $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        check: onCheck,
        dataSource:
        {
            transport: {
                read: '/MapModuleTask/LoadTreeView'
            }
        },
        dataTextField: 'ModuleName'
    });
</script>

Answer 1

Please try with the below code snippet.

Controller : HomeController.cs

public JsonResult LoadTreeView(int? id)
{
    List<Module> modules = new List<Module>();

    int temp = id.GetValueOrDefault();

    modules.Add(new Module() { ModuleId = 1 + temp, ModuleName = "Name1_" + temp , hasChildren = false });
    modules.Add(new Module() { ModuleId = 2 + temp, ModuleName = "Name2_" + temp, hasChildren = true });

    return Json(modules, JsonRequestBehavior.AllowGet);
}

Model :

public class Module
{
    public int ModuleId { get; set; }
    public string ModuleName { get; set; }
    public Boolean hasChildren  { get; set; }
}

View :

<div id="treeview"></div>
<script>

    var datasource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: function (options) {
                var id = options.data.ModuleId; 
                $.ajax({
                    url: '/Home/LoadTreeView',
                    dataType: "json",   
                    data: { id: id },
                    success: function (result) {
                         options.success(result);
                    },
                    error: function (result) {
                         options.error(result);
                    }
                });
            }
        },
        schema: {
            model: {
                id: "ModuleId",
                hasChildren: "hasChildren"
            }
        }
    });

    $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        dataSource: datasource,
        dataTextField: 'ModuleName'
    });
</script>

Let me know if any concern.