{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-default",
  "framework": "aspnet-mvc",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "default",
  "dependencies": [
    "Syncfusion.AspNetMvc.Gantt"
  ],
  "description": "Gantt chart with filtering, sorting, weekend highlighting, resizing, and a view-selector toolbar rendered from local task data.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/aspnetmvc/llms.txt",
    "skillPack": "syncfusion/aspnetmvc-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-mvc/gantt-default.md"
  },
  "files": [
    {
      "target": "src/components/gantt-default/OverView.cshtml",
      "content": "@using Syncfusion.EJ2\n@using Syncfusion.EJ2.DropDowns\n@{\n    ViewData[\"Title\"] = \"OverView\";\n}\n\n@section ControlsSection{\n    @{\n        List<object> toolbarItems = new List<object> { \"ExpandAll\", \"CollapseAll\" };\n        toolbarItems.Add(new\n        {\n            type = \"Input\",\n            align = \"Right\",\n            template = \"#ToolbarTemplate\"\n        });\n    }\n    <div id=\"ToolbarTemplate\">\n        <div>\n            @(Html.EJS().DropDownList(\"Drop\").DataSource((IEnumerable<object>)ViewData[\"Data\"])\n                .Fields(new DropDownListFieldSettings { Text = \"type\", Value = \"id\" }).Placeholder(\"View\").Width(\"99px\").Change(\"Change\")\n                .Render()\n            )\n        </div>\n    </div>\n    <div class=\"control-section\">\n        <div class=\"content-wrapper\">\n            @(Html.EJS().Gantt(\"OverView\").DataSource((IEnumerable<object>)ViewData[\"DataSource\"]).Height(\"500px\").AllowFiltering(true)\n                .HighlightWeekends(true).AllowSelection(true).AllowResizing(true).TreeColumnIndex(1)\n                .DateFormat(\"MMM dd, y\").Toolbar(toolbarItems).Load(\"load\").AllowSorting(true).ShowColumnMenu(true)\n                .TaskFields(ts => ts.Id(\"TaskId\").Name(\"TaskName\").StartDate(\"StartDate\").EndDate(\"EndDate\").Duration(\"TimeLog\").Progress(\"Progress\")\n                .Dependency(\"Predecessor\").ParentID(\"ParentID\").ResourceInfo(\"Assignee\"))\n                .Resources((IEnumerable<object>)ViewData[\"Resources\"])\n                .ResourceFields(rf => rf.Id(\"ResourceId\").Name(\"ResourceName\").Unit(\"ResourceUnit\"))\n                .TaskbarHeight(24).RowHeight(36)\n                .Columns(col =>\n                {\n                    col.Field(\"TaskId\").Width(80).Visible(false).Add();\n                    col.Field(\"TaskName\").HeaderText(\"Product Release\").Width(200).Add();\n                    col.Field(\"Assignee\").HeaderText(\"Assignee\").Width(130).Template(\"#columnTemplate\").Add();\n                    col.Field(\"Status\").HeaderText(\"Status\").Width(120).MinWidth(100).Template(\"#columnTemplate1\").Add();\n                    col.Field(\"Priority\").HeaderText(\"Priority\").Width(100).MinWidth(80).Template(\"#columnTemplate2\").Add();\n                    col.Field(\"Work\").HeaderText(\"Planned Hours\").Width(120).Add();\n                    col.Field(\"TimeLog\").HeaderText(\"Work Log\").Width(120).Add();\n                })\n                .SplitterSettings(sp => sp.Position(\"55.5%\"))\n                .EventMarkers(em =>\n                {\n                    em.Day(\"04/04/2024\").Label(\"Q-1 Release\").Add();\n                    em.Day(\"06/30/2024\").Label(\"Q-2 Release\").Add();\n                    em.Day(\"09/29/2024\").Label(\"Q-3 Release\").Add();\n                })\n                .Holidays(hol => {\n                    hol.From(\"01/01/2024\").To(\"01/01/2024\").Label(\"New Year holiday\").Add();\n                    hol.From(\"12/25/2023\").To(\"12/26/2023\").Label(\"Christmas holidays\").Add();\n                })\n                .SelectionSettings(ss => ss.Mode(Syncfusion.EJ2.Grids.SelectionMode.Row).Type(Syncfusion.EJ2.Grids.SelectionType.Single).EnableToggle(true))\n                .LabelSettings(ls => ls.RightLabel(\"Assignee\").TaskLabel(\"${Progress}%\"))\n                .TimelineSettings(ts => ts.TimelineUnitSize(50).ShowTooltip(true).TopTier(tt => tt.Format(\"MMM yyyy\").Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Month))\n                .BottomTier(bt => bt.Format(\"dd\").Count(4).Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day)))\n                .FilterSettings(f => f.Type(Syncfusion.EJ2.Gantt.FilterType.Menu))\n                .GridLines(Syncfusion.EJ2.Gantt.GridLine.Vertical)\n                .ProjectStartDate(\"12/24/2023\")\n                .ProjectEndDate(\"10/26/2024\")\n                .Render()\n            )\n        </div>\n    </div>\n\n    <script id=\"columnTemplate\" type=\"text/x-template\">\n        ${if(ganttProperties.resourceNames)}\n        <div class=\"image\">\n            <img src=\"../Content/gantt/images/${ganttProperties.resourceNames}.png\" style=\"height:25px;width:25px\" />\n            <div style=\"display:inline-block;width:100%;position:relative;${isRtl()}\">${ganttProperties.resourceNames}</div>\n        </div>\n        ${/if}\n    </script>\n    <script type=\"text/x-template\" id=\"columnTemplate1\">\n        ${if(taskData.Status)}\n        <div style=\"${Status(taskData.Status)}\"><span style=\"${StatusContent(taskData.Status)}\">${taskData.Status}</span></div>\n        ${/if}\n    </script>\n    <script type=\"text/x-template\" id=\"columnTemplate2\">\n        ${if(taskData.Priority)}\n        <div style=\"${Priority(taskData.Priority)}\"><span style=\"${PriorityContent(taskData.Priority)}\">${taskData.Priority}</span></div>\n        ${/if}\n    </script>\n\n    <style>\n        .e-gantt-child-taskbar,\n        .e-gantt-parent-taskbar {\n            border-radius: 10px !important\n        }\n        .fluent2 #overviewSample .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .fluent2-dark #overviewSample .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .fluent2-highcontrast #overviewSample .e-toolbar-items .e-toolbar-right .e-template .e-input-group {\n            width: 99px !important;\n        }\n         .e-bigger.fluent2 .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .e-bigger.fluent2-dark .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .e-bigger.fluent2-highcontrast .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .e-bigger.bootstrap5 .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .e-bigger.bootstrap5\\.3 .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .e-bigger.bootstrap5\\.3-dark-lite .e-toolbar-items .e-toolbar-right .e-template .e-input-group,\n        .e-bigger.bootstrap5\\.3-dark .e-toolbar-items .e-toolbar-right .e-template .e-input-group, \n        .e-bigger.bootstrap5\\.3-lite .e-toolbar-items .e-toolbar-right .e-template .e-input-group {\n            width: 101px !important;\n        }\n    </style>\n\n    <script>\n        var theme;\n        var style;\n        var currentTheme;\n        var statusStyleColor;\n        var priorityStyle;\n        var priorityContentStyle;\n        var statusContentstyleColor;\n        function load() {\n            var themeCollection = ['bootstrap5', 'bootstrap', 'bootstrap4', 'fluent', 'fabric', 'fusionnew', 'material3', 'material', 'highcontrast', 'tailwind', 'fluent2', 'tailwind3', 'bootstrap5.3'];\n            theme = window.themeName;\n            var check = themeCollection.indexOf(theme);\n            if (check >= 0) {\n                currentTheme = true;\n            }\n            else {\n                currentTheme = false;\n            }\n        }\n        function isRtl() {\n            let gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];\n            if (gantt.enableRtl) {\n                return 'right:10px;';\n            } else {\n                return 'left:10px;';\n            }\n        }\n\n        function Status(status) {\n            switch (status) {\n                case \"In Progress\":\n                    statusStyleColor = (currentTheme) ? \"#DFECFF\" : \"#2D3E57\";\n                    style = \"display: flex; padding: 0px 12px; gap: 10px; width: 96px; height: 24px; border-radius: 24px; background:\" + statusStyleColor;\n                    break;\n                case \"Open\":\n                    style = \"background-color: red; color: white; border-radius: 15px; padding:6px\";\n                    break;\n                case \"On Hold\":\n                    statusStyleColor = (currentTheme) ? \"#E4E4E7\" : \"#3C3B43\";\n                    style = \"display: flex; border-radius: 24px; padding: 0px 12px; gap: 10px; width: 78px; height: 24px; background:\" + statusStyleColor;\n                    break;\n                case \"Completed\":\n                    statusStyleColor = (currentTheme) ? \"#DFFFE2\" : \"#16501C\";\n                    style = \"display: flex; padding: 0px 12px; gap: 10px; width: 98px; height: 24px; border-radius: 24px;background:\" + statusStyleColor;\n                    break;\n                case \"High\":\n                    statusStyleColor = (currentTheme) ? \"#FFEBE9\" : \"#48211D\";\n                    style = \"display: flex; padding: 0px 12px; gap: 10px; width: 55px; height: 24px; border-radius: 24px; background:\" + statusStyleColor;\n                    break;\n            }\n            return style;\n        }\n\n        function StatusContent(status) {\n            switch (status) {\n                case \"In Progress\":\n                    statusContentstyleColor = (currentTheme) ? \"#006AA6\" : \"#34B6FF\";\n                    style = \"width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + statusContentstyleColor;\n                    break;\n                case \"Open\":\n                    style = \"background-color: red; color: white; border-radius: 15px; padding:6px\";\n                    break;\n                case \"On Hold\":\n                    statusContentstyleColor = (currentTheme) ? \"#766B7C\" : \"#CDCBD7\";\n                    style = \"width: 54px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + statusContentstyleColor;\n                    break;\n                case \"Completed\":\n                    statusContentstyleColor = (currentTheme) ? \"#00A653\" : \"#92FFC8\";\n                    style = \"width: 74px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + statusContentstyleColor;\n                    break;\n                case \"High\":\n                    statusContentstyleColor = (currentTheme) ? \"#FF3740\" : \"#FFB5B8\";\n                    style = \"width: 31px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + statusContentstyleColor;\n                    break;\n            }\n            return style;\n        }\n\n        function Priority(priority) {\n            switch (priority) {\n                case \"Low\":\n                    priorityStyle = (currentTheme) ? \"#FFF6D1\" : \"#473F1E\";\n                    style = \"display: flex; padding: 0px 12px; gap: 10px; width: 52px; height: 24px; border-radius: 24px; background: \" + priorityStyle;\n                    break;\n                case \"Normal\":\n                    priorityStyle = (currentTheme) ? \"#F5DFFF\" : \"#4D2F5A\";\n                    style = \"display: flex; padding: 0px 12px; gap: 10px; width: 73px; height: 24px; border-radius: 24px; background: \" + priorityStyle;\n                    break;\n                case \"Critical\":\n                    priorityStyle = (currentTheme) ? \"#FFEBE9\" : \"#48211D\";\n                    style = \"display: flex; padding: 0px 12px; gap: 10px; width: 72px; height: 24px; border-radius: 24px; background: \" + priorityStyle;\n                    break;\n                case \"High\":\n                    priorityStyle = (currentTheme) ? \"#FFEBE9\" : \"#48211D\";\n                    style = \"display: flex; padding: 0px 12px; gap: 10px; width: 55px; height: 24px; border-radius: 24px; background: \" + priorityStyle;\n                    break;\n            }\n            return style;\n        }\n\n        function PriorityContent(priority) {\n            switch (priority) {\n                case \"Low\":\n                    priorityContentStyle = (currentTheme) ? \"#70722B\" : \"#FDFF88\";\n                    style = \"width: 28px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + priorityContentStyle;\n                    break;\n                case \"Normal\":\n                    priorityContentStyle = (currentTheme) ? \"#7100A6\" : \"#E3A9FF\";\n                    style = \"width: 49px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + priorityContentStyle;\n                    break;\n                case \"Critical\":\n                    priorityContentStyle = (currentTheme) ? \"#FF3740\" : \"#FFB5B8\";\n                    style = \"width: 48px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + priorityContentStyle;\n                    break;\n                case \"High\":\n                    priorityContentStyle = (currentTheme) ? \"#FF3740\" : \"#FFB5B8\";\n                    style = \"width: 31px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; color: \" + priorityContentStyle;\n                    break;\n            }\n            return style;\n        }\n\n        function Change(e) {\n            var ganttObj = document.getElementById(\"OverView\").ej2_instances[0];\n            var position = e.value;\n            if (position === 'Grid') {\n                ganttObj.splitterSettings.position = '100%';\n            }\n            else if (position === 'Gantt') {\n                ganttObj.splitterSettings.position = '0%';\n            }\n            else {\n                ganttObj.splitterSettings.position = '55.5%';\n            }\n        }\n    </script>\n}"
    },
    {
      "target": "src/components/gantt-default/OverViewController.cs",
      "content": "using EJ2MVCSampleBrowser.Models;\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Web;\nusing System.Web.Mvc;\nusing static EJ2MVCSampleBrowser.Models.GanttData;\n\nnamespace EJ2MVCSampleBrowser.Controllers.Gantt\n{\n\n    public partial class GanttChartController : Controller\n    {\n        // GET: Gantt\n        public ActionResult OverView()\n        {\n            ViewData[\"DataSource\"] = GanttData.OverviewData();\n            ViewData[\"Resources\"] = this.GetResources();\n            ViewData[\"Data\"] = GanttDropDownLists.GridLinesData();\n            return View();\n        }\n        public List<GanttResources> GetResources()\n        {\n            List<GanttResources> GanttResourcesCollection = new List<GanttResources>();\n\n            GanttResources Record1 = new GanttResources()\n            {\n                ResourceId = 1,\n                ResourceName = \"Martin Tamer\"\n            };\n            GanttResources Record2 = new GanttResources()\n            {\n                ResourceId = 2,\n                ResourceName = \"Rose Fuller\"\n            };\n            GanttResources Record3 = new GanttResources()\n            {\n                ResourceId = 3,\n                ResourceName = \"Margaret Buchanan\"\n            };\n            GanttResources Record4 = new GanttResources()\n            {\n                ResourceId = 4,\n                ResourceName = \"Fuller King\"\n            };\n            GanttResources Record5 = new GanttResources()\n            {\n                ResourceId = 5,\n                ResourceName = \"Davolio Fuller\"\n            };\n            GanttResourcesCollection.Add(Record1);\n            GanttResourcesCollection.Add(Record2);\n            GanttResourcesCollection.Add(Record3);\n            GanttResourcesCollection.Add(Record4);\n            GanttResourcesCollection.Add(Record5);\n            return GanttResourcesCollection;\n        }\n        public class GanttDropDownLists\n        {\n            public string id { get; set; }\n            public string type { get; set; }\n\n            public static List<GanttDropDownLists> GridLinesData()\n            {\n                List<GanttDropDownLists> Data = new List<GanttDropDownLists>();\n                Data.Add(new GanttDropDownLists { id = \"Default\", type = \"Default\" });\n                Data.Add(new GanttDropDownLists { id = \"Grid\", type = \"Grid\" });\n                Data.Add(new GanttDropDownLists { id = \"Gantt\", type = \"Gantt\" });\n                return Data;\n            }\n        }\n    }\n}"
    }
  ]
}