Introduction
Licensing
Knowledge Base
Components / Scheduling / Gantt / Data Binding / Ajax Binding
New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Ajax Binding

You can bind the Telerik UI Gantt for ASP.NET Core using Ajax binding to load and process tasks and dependencies through server-side Action methods.

For a complete example, refer to the Basic Usage Demo of the Gantt component.

To configure the Gantt for Ajax data binding, follow the next steps:

  1. Set up the Gantt’s DataSource configuration
  • Specify the action methods for the CRUD operations in the Read, Create, Update, and Destroy options of the DataSource and DependencyDataSource configurations.
  • Define the unique Model identifier in the Id() option of the Model configuration of each DataSource. In addition, map the required Model fields, such as ParentID, Start, End, Expanded, and more, in the Model configuration.
  • Configure the additional Gantt settings like views, columns, and more.
Razor
    @using Kendo.Mvc.Examples.Models.Gantt;
    
    @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
        .Name("gantt")
        .Columns(columns =>
        {
            columns.Bound(c => c.TaskID).Title("ID").Width(50);
            columns.Bound(c => c.Title).Editable(true).Sortable(true);
            columns.Group(g =>
            {
                g.Bound(c => c.Start).Width(100).Editable(true).Sortable(true);
                g.Bound(c => c.End).Width(100).Editable(true).Sortable(true);
            }).Title("Timings");
        })
        .Views(views =>
        {
            views.DayView();
            views.WeekView(weekView => weekView.Selected(true));
            views.MonthView();
        })
        .Height(700)
        .ShowWorkHours(false)
        .ShowWorkDays(false)
        .Snap(false)
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.TaskID);
                m.ParentId(f => f.ParentID);
                m.Field(f => f.Expanded).DefaultValue(true);
            })
            .Read("Basic_Usage_ReadTasks", "Gantt")
            .Destroy("Basic_Usage_DestroyTask", "Gantt")
            .Update(update => update.Action("Basic_Usage_UpdateTask", "Gantt").Data("onUpdateCreate"))
            .Create(create => create.Action("Basic_Usage_CreateTask", "Gantt").Data("onUpdateCreate"))
        )
        .DependenciesDataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.DependencyID);
                m.PredecessorId(f => f.PredecessorID);
                m.SuccessorId(f => f.SuccessorID);
            })
            .Read("Basic_Usage_ReadDependencies", "Gantt")
            .Create("Basic_Usage_CreateDependency", "Gantt")
            .Destroy("Basic_Usage_DestroyDependency", "Gantt")
        )
    )
    
    <script>
        // Send the dates for the newly creted/updated tasks as UTC strings
        function onUpdateCreate(e) {
            e.End = e.End.toISOString();
            e.Start = e.Start.toISOString();
        }
    </script>
  1. Define the Action methods in the Controller
    • Create action methods for reading, creating, updating, and deleting tasks and dependencies.
    • Each action method must return a JSON result using the ToDataSourceResult(request, ModelState) method for proper binding and validation handling.
C#
    public partial class GanttController : Controller
    {
        public ActionResult Basic_Usage()
        {
            return View();
        }

        public virtual JsonResult Basic_Usage_ReadTasks([DataSourceRequest] DataSourceRequest request)
        {
            return Json(taskService.GetAll().ToDataSourceResult(request));
        }

        public virtual JsonResult Basic_Usage_DestroyTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)
        {
            if (ModelState.IsValid)
            {
                taskService.Delete(task, ModelState);
            }

            return Json(new[] { task }.ToDataSourceResult(request, ModelState));
        }

        public virtual JsonResult Basic_Usage_CreateTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)
        {
            if (ModelState.IsValid)
            {
                taskService.Insert(task, ModelState);
            }

            return Json(new[] { task }.ToDataSourceResult(request, ModelState));
        }

        public virtual JsonResult Basic_Usage_UpdateTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)
        {
            if (ModelState.IsValid)
            {
                taskService.Update(task, ModelState);
            }

            return Json(new[] { task }.ToDataSourceResult(request, ModelState));
        }

        public virtual JsonResult Basic_Usage_ReadDependencies([DataSourceRequest] DataSourceRequest request)
        {
            return Json(dependencyService.GetAll().ToDataSourceResult(request));
        }

        public virtual JsonResult Basic_Usage_DestroyDependency([DataSourceRequest] DataSourceRequest request, DependencyViewModel dependency)
        {
            if (ModelState.IsValid)
            {
                dependencyService.Delete(dependency);
            }

            return Json(new[] { dependency }.ToDataSourceResult(request, ModelState));
        }

        public virtual JsonResult Basic_Usage_CreateDependency([DataSourceRequest] DataSourceRequest request, DependencyViewModel dependency)
        {
            if (ModelState.IsValid)
            {
                dependencyService.Insert(dependency);
            }

            return Json(new[] { dependency }.ToDataSourceResult(request, ModelState));
        }
    }

See Also

In this article
See Also
Not finding the help you need?
Contact Support