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.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
                    </e-gantt-taskfields>
                    <e-gantt-columns>
                        <e-gantt-column field="TaskId" width="50"></e-gantt-column>
                        <e-gantt-column field="TaskName" headerText="Job Name" width="250"></e-gantt-column>
                        <e-gantt-column field="StartDate"></e-gantt-column>
                        <e-gantt-column field="Duration" hideAtMedia="(min-width: 500px)"></e-gantt-column>
                    </e-gantt-columns>
                </ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}