Search code examples
asp.net-mvcsyncfusion

Display Time with Date in Gantt Chart using Syncfusion in asp.net Mvc


When I displayed data in gantt chart it displays only date not time but in back end method date with time retrieve from database.Now How can I display Time with Date in SyncFusion Gantt Chart.

Gantt Chart *

@(Html.EJ().Gantt("GanttContainer")
        .ToolbarSettings(options =>
        {
            options.ShowToolbar(true);
            options.ToolbarItems(new List<GanttToolBarItems>()
        {
            GanttToolBarItems.Add,
            GanttToolBarItems.Edit,
            GanttToolBarItems.Delete,
            GanttToolBarItems.Update,
            GanttToolBarItems.Cancel,
            GanttToolBarItems.Indent,
            GanttToolBarItems.Outdent,
            GanttToolBarItems.ExpandAll,
            GanttToolBarItems.CollapseAll,
            GanttToolBarItems.Search,
    });
        })
                  .TaskIdMapping("pt_id")
                  //                  .ParentTaskIdMapping("parent_pt_id")
                  .TaskNameMapping("pt_desc")
                  .StartDateMapping("s_start_date")    // Want To Display Time with Date Here
                  .EndDateMapping("s_end_date")        // Want To Display Time with Date Here
                  .ProgressMapping("pt_progress")
                  .EnableVirtualization(true)
                  .PredecessorMapping("link_logic" )
                  .ChildMapping("subtask")
                  .EnableCollapseAll(true)
                  .IsResponsive(true)
                  .HighlightWeekends(true)
                  .IncludeWeekend(true)
                  .SplitterPosition("50%")
                  .AllowColumnResize(true)
                  .TreeColumnIndex(1)
                  .AllowSelection(true)
                  .AllowSorting(true)
                  .AllowMultiSorting(true)
                  .ShowColumnChooser(true)
                  .EnableContextMenu(true)
                  .AllowGanttChartEditing(true)
                  .EditSettings(edit =>
                  {
                      edit.AllowEditing(true);
                      edit.AllowAdding(true);
                      edit.AllowDeleting(true);
                      edit.EditMode("cellEditing");
                  })   
               .Datasource(ViewBag.datasource)
               )

*


Solution

  • By using DateFormat property we can display start date and end date columns in required format. Please find the code snippet below

    //...
    .DateFormat("MM/dd/yyyy hh:mm tt")
    //...