Hi Team,
I want to display the ORG chart in the Asp.net MVC application but it is not displayed. It shows only an empty page. No error is shown in the console. I have attached the screenshot below.
My Layout references are as :
<link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.common.min.css" />
<link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.default.min.css" />
<link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jquery.min.js"></script>
<script src="~/Scripts/kendo/2022.3.913/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2022.3.913/kendo.aspnetmvc.min.js" type="text/javascript"></script>
<script src="~/Scripts/kendo/2022.3.913/kendo.dataviz.min.js"></script>
<script src="~/Scripts/kendo/2022.3.913/kendo.orgchart.min.js"></script>
Razer page code as below:-
@using Kendo.Mvc.UI;
@(Html.Kendo().OrgChart<fcPortoloManager.Models.Portolo.OrgChartViewModel>()
.Name("orgchart")
.DataSource(dataSource => dataSource
.Read(read => read.Action("Read", "OrganizationStructure"))
.Model(m => {
m.Id(f => f.ID);
m.ParentId(f => f.ParentID);
m.Name(f => f.Name);
m.Title(f => f.Title);
})
And controller code is as below :
public JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
return Json(new
{
Data = OrgChartData
}, JsonRequestBehavior.AllowGet);
}
public static OrgChartEmployeeViewModel One(Func<OrgChartEmployeeViewModel, bool> predicate)
{
return OrgChartData.FirstOrDefault(predicate);
}
private static IList<OrgChartEmployeeViewModel> OrgChartData
{
get
{
IList<OrgChartEmployeeViewModel> source = System.Web.HttpContext.Current.Session["OrgChartEmployees"] as IList<OrgChartEmployeeViewModel>;
if (source == null)
{
System.Web.HttpContext.Current.Session["OrgChartEmployees"] = source = new List<OrgChartEmployeeViewModel>
{
new OrgChartEmployeeViewModel() { ID = 1, Name = "Gevin Bell", Title = "CEO", Expanded = true, Avatar = "../content/web/treelist/people/1.jpg" },
new OrgChartEmployeeViewModel() { ID = 2, Name = "Clevey Thrustfield", Title = "COO", Expanded = true, ParentID = 1, Avatar = "../content/web/treelist/people/2.jpg" },
new OrgChartEmployeeViewModel() { ID = 3, Name = "Carol Baker", Title = "CFO", Expanded = false, ParentID = 1, Avatar = "../content/web/treelist/people/3.jpg" },
new OrgChartEmployeeViewModel() { ID = 4, Name = "Kendra Howell", Title = "CMO", Expanded = false, ParentID = 1, Avatar = "../content/web/treelist/people/4.jpg" },
new OrgChartEmployeeViewModel() { ID = 5, Name = "Sean Rusell", Title = "Financial Manager", Expanded = true, ParentID = 3, Avatar = "../content/web/treelist/people/5.jpg" },
new OrgChartEmployeeViewModel() { ID = 6, Name = "Steven North", Title = "Senior Manager", Expanded = false, ParentID = 3, Avatar = "../content/web/treelist/people/6.jpg" },
new OrgChartEmployeeViewModel() { ID = 7, Name = "Michelle Hudson", Title = "Operations Manager", Expanded = true, ParentID = 2, Avatar = "../content/web/treelist/people/7.jpg" },
new OrgChartEmployeeViewModel() { ID = 8, Name = "Andrew Berry", Title = "Team Lead", ParentID = 5, Avatar = "../content/web/treelist/people/8.jpg" },
new OrgChartEmployeeViewModel() { ID = 9, Name = "Jake Miller", Title = "Junior Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/9.jpg" },
new OrgChartEmployeeViewModel() { ID = 10, Name = "Austin Piper", Title = "Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/10.jpg" },
new OrgChartEmployeeViewModel() { ID = 11, Name = "Dilyana Newman", Title = "Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/11.jpg" },
new OrgChartEmployeeViewModel() { ID = 12, Name = "Eva Andrews", Title = "Team Lead", ParentID = 6, Avatar = "../content/web/treelist/people/12.jpg" },
new OrgChartEmployeeViewModel() { ID = 13, Name = "Kaya Nilsen", Title = "Financial Specialist", ParentID = 6, Avatar = "../content/web/treelist/people/13.jpg" },
new OrgChartEmployeeViewModel() { ID = 14, Name = "Elena Austin", Title = "Team Lead", ParentID = 4, Avatar = "../content/web/treelist/people/14.jpg" },
new OrgChartEmployeeViewModel() { ID = 15, Name = "Lora Samuels", Title = "Lawyer", ParentID = 4, Avatar = "../content/web/treelist/people/15.jpg" },
new OrgChartEmployeeViewModel() { ID = 16, Name = "Lillian Carr", Title = "Operator", ParentID = 7, Avatar = "../content/web/treelist/people/17.jpg" },
new OrgChartEmployeeViewModel() { ID = 17, Name = "David Henderson", Title = "Team Lead", ParentID = 7, Avatar = "../content/web/treelist/people/16.jpg" },
};
}
return source;
}
}
The model code is as below :
public class OrgChartEmployeeViewModel { public int ID { get; set; } public string Name { get; set; } public string Title { get; set; } public bool Expanded { get; set; } public string Avatar { get; set; } public int ParentID { get; set; } }