Responsive Columns in gantt control

3 Jan 20241 minute to read

You can toggle the column visibility based on media queries, which are defined in the HideAtMedia. The HideAtMedia accepts valid Media Queries.

CSHTML

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
             "Progress").Child("SubTasks")).Columns(col =>
                {
                    col.Field("TaskId").Width(50).Add();
                    col.Field("TaskName").HeaderText("Job Name").Width(250).Add();
                    col.Field("StartDate").Add();
                    col.Field("Duration").Width(80).HideAtMedia("max-width: 500px").Add();
                }).Render()

HideAtMedia.cs

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}