Questions on UI for ASP.NET MVC Forum

2 questions

0 answers

222 views

Problem with render the org chart on browser

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; }
    }