Data Binding Overview
The Telerik UI for ASP.NET Core Gantt provides flexible data binding capabilities that allow you to visualize project schedules and task dependencies from various data sources. You can choose the appropriate binding method based on your application architecture and data requirements.
The default casing for JSON strings in ASP.NET Core is camelCase. The Telerik UI components that are data-bound depend on PascalCase formatted response from the server. If the JSON serialization isn't configured properly, the UI components will display wrong data. To find out how to configure the application to return the data in Pascal-case, refer to the JSON Serialization article.
Data Binding Approaches
The Gantt supports the following data binding methods:
Local Data Binding
Bind the Gantt to a local dataset by passing an arbitrary model directly within the boundaries of the component. This approach is optimal for:
- Small to medium-sized datasets that can be loaded in memory.
- Static data that does not require frequent updates.
- Scenarios where all data is available at render time.
For detailed implementation instructions, refer to the Local Data Binding documentation.
Remote Data Binding
Connect the Gantt to a remote endpoint using AJAX operations. This enables:
- Dynamic data loading with paging, sorting, and filtering.
- Real-time updates of task progress and dependencies from external sources.
- Improved performance with large event datasets through server-side processing.
For more information and examples, refer to the Remote Data Binding documentation.
Data Binding in Razor Pages
You can seamlessly integrate the Gantt component into Razor Pages applications. All the data binding approaches described above can be configured within Razor Pages scenarios.
The component supports both HtmlHelper and TagHelper syntax, and allows you to send the anti-forgery token when connecting to remote endpoints to ensure secure data operations.
For detailed implementation instructions, refer to the Gantt in Razor Pages article.
Model Requirements
The model that binds to the Gantt extends the IGanttTask and the IGanttDependency interfaces, with the following properties:
public interface IGanttTask
{
string Title { get; set; }
DateTime Start { get; set; }
DateTime End { get; set; }
decimal PercentComplete { get; set; }
int OrderId { get; set; }
bool Summary { get; set; }
bool Expanded { get; set; }
}Key Considerations
When selecting a data binding approach for the Gantt, evaluate the following factors:
- Performance—Local binding offers faster initial rendering for smaller project schedules, while remote binding with enabled server operations provides better performance with large datasets through on-demand loading and server-side processing.
- Data volume—Local binding works well for small to medium-sized project schedules that can be loaded in memory, while large project schedules with numerous tasks and dependencies are better handled with remote binding and server-side filtering.
- CRUD operations—Remote binding enables full task management capabilities including creating, updating, and deleting tasks and dependencies, while local binding provides read-only project visualization.
- Real-time collaboration—Remote binding is essential for multi-user scenarios requiring live project updates, task progress tracking, and dependency changes from team members.
- Security—Remote binding provides better control over data access, user permissions, and project data validation compared to the local binding.