Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Getting started with Blazor Gantt Chart component

    4 Nov 202524 minutes to read

    This section briefly explains about how to includeBlazor Gantt Chart component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI.

    Ready to streamline your Syncfusion® Blazor development?
    Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more.Explore Syncfusion® AI Coding Assistants

    Prerequisites

    Create a new Blazor app in Visual Studio

    You can create aBlazor WebAssembly App using Visual Studio viaMicrosoft Templates or theSyncfusion® Blazor Extension. For detailed instructions, refer tothis Blazor WASM App Getting Started documentation.

    Install Syncfusion® Blazor Gantt and Themes NuGet in the app

    To addBlazor Gantt Chart component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and installSyncfusion.Blazor.Gantt andSyncfusion.Blazor.Themes. Alternatively, you can utilize the following package manager command to achieve the same.

    Install-PackageSyncfusion.Blazor.Gantt-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19

    NOTE

    Syncfusion® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.

    Prerequisites

    Create a new Blazor app in Visual Studio code

    You can create aBlazor WebAssembly app using Visual Studio code viaMicrosoft Templates or theSyncfusion® Blazor Extension. For detailed instructions, refer tothis Blazor WASM App Getting Started documentation.

    Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`).

    dotnetnewblazorwasm-oBlazorAppcdBlazorApp

    Install Syncfusion® Blazor Gantt and Themes NuGet in the app

    • PressCtrl+` to open the integrated terminal in Visual Studio code.
    • Ensure you’re in the project root directory where your.csproj file is located.
    • Run the following command to install aSyncfusion.Blazor.Gantt andSyncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
    dotnetaddpackageSyncfusion.Blazor.Gantt-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestore

    NOTE

    Syncfusion® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.

    Prerequisites

    Latest version of the.NET Core SDK. If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).

    dotnet--version

    Create a Blazor WebAssembly App using .NET CLI

    Run thedotnet new blazorwasm command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).

    dotnetnewblazorwasm-oBlazorAppcdBlazorApp

    This command creates new Blazor WebAssembly App and places it in a new directory calledBlazorApp inside your current location. SeeCreate Blazor app topic anddotnet new CLI command topics for more details.

    Install Syncfusion® Blazor Gantt and Themes NuGet in the app

    Use the following command to addBlazor Gantt Chart component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install aSyncfusion.Blazor.Gantt andSyncfusion.Blazor.Themes NuGet package. SeeInstall and manage packages using the dotnet CLI topics for more details.

    dotnetaddpackageSyncfusion.Blazor.Gantt-Version32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-Version32.1.19dotnetrestore

    NOTE

    Syncfusion® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.

    Add import namespaces

    Open the~/_Imports.razor file and import theSyncfusion.Blazor andSyncfusion.Blazor.Gantt namespace.

    @using Syncfusion.Blazor@using Syncfusion.Blazor.Gantt

    Register Syncfusion® Blazor service

    Register the Syncfusion® Blazor service in the~/Program.cs file of your Blazor WebAssembly App.

    usingMicrosoft.AspNetCore.Components.Web;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingSyncfusion.Blazor;varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});builder.Services.AddSyncfusionBlazor();awaitbuilder.Build().RunAsync();....

    Add stylesheet and script resources

    The theme stylesheet and script can be accessed from NuGet throughStatic Web Assets. Include the stylesheet and script references in the<head> section of the~/index.html file.

    <head>    ....<linkhref="_content/Syncfusion.Blazor.Themes/bootstrap5.css"rel="stylesheet"/><scriptsrc="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"type="text/javascript"></script>    //Blazor GanttChart Component script reference.<!-- <script src="_content/Syncfusion.Blazor.Gantt/scripts/sf-gantt.min.js" type="text/javascript"></script> --></head>

    NOTE

    Check out theBlazor Themes topic to discover various methods (Static Web Assets,CDN, andCRG) for referencing themes in your Blazor application. Also, check out theAdding Script Reference topic to learn different approaches for adding script references in your Blazor application.

    Add Syncfusion® Blazor Gantt Chart component

    Add the Syncfusion® Blazor Gantt Chart component in the~/Pages/Index.razor file.

    <SfGanttDataSource="@TaskCollection"Height="450px"Width="700px"><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"></GanttTaskFields></SfGantt>@code{    private List<TaskData> TaskCollection { get; set; }    protected override void OnInitialized()    {        this.TaskCollection = GetTaskCollection();    }    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime StartDate { get; set; }        public DateTime EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public int? ParentID { get; set; }    }    private static List<TaskData> GetTaskCollection()    {        List<TaskData> Tasks = new List<TaskData>()        {            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }        };        return Tasks;    }}

    Binding Gantt Chart with data and mapping task fields

    Bind data with the Gantt Chart component by using theDataSource property. It accepts the list objects or the DataManager instance.

    Additionally, task-related fields from the data source are mapped to the Gantt Chart component using theGanttTaskFields property. This property ensures that the necessary task fields, such asId,Name,StartDate,EndDate,Duration, andParentID are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified inGanttTaskFields, ensuring that the necessary columns are displayed to represent the task data.

    This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to theId andParentID properties. For more detailed information, refer to thedocumentation.

    <SfGanttDataSource="@TaskCollection"Height="450px"Width="700px"><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"></GanttTaskFields></SfGantt>@code{    private List<TaskData> TaskCollection { get; set; }    protected override void OnInitialized()    {        this.TaskCollection = GetTaskCollection();    }    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime StartDate { get; set; }        public DateTime EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public int? ParentID { get; set; }    }    private static List<TaskData> GetTaskCollection()    {        List<TaskData> Tasks = new List<TaskData>()        {            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }        };        return Tasks;    }}

    Defining columns

    The Gantt Chart has an option to define columns using theGanttColumns component. To configure each column, use the following properties:

    • Field: Maps the data source fields to the columns.
    • HeaderText: Changes the title of columns.
    • TextAlign: Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, setTextAlign to right.
    • Format: Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
    • Visible: Show or hide a particular column. By default, columns are visible. Set this property tofalse to hide the column ortrue to make it visible.
    • Width: To specify the width of the column, which can be defined inpixels or as apercentage of the total column width.
    @using Syncfusion.Blazor.Grids<SfGanttDataSource="@TaskCollection"Height="450px"Width="700px"><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"></GanttTaskFields><GanttColumns><GanttColumnField="TaskID"HeaderText="Task ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="100"></GanttColumn><GanttColumnField="TaskName"HeaderText="Task Name"Width="250"></GanttColumn><GanttColumnField="StartDate"HeaderText="Start Date"Width="250"></GanttColumn><GanttColumnField="Duration"HeaderText="Duration"Width="250"></GanttColumn><GanttColumnField="Progress"HeaderText="Progress"Format="@NumberFormat"Width="250"></GanttColumn></GanttColumns></SfGantt>@code{    private List<TaskData> TaskCollection { get; set; }    private string NumberFormat = "C";    protected override void OnInitialized()    {        this.TaskCollection = GetTaskCollection();    }    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime StartDate { get; set; }        public DateTime EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public int? ParentID { get; set; }    }    private static List<TaskData> GetTaskCollection()    {        List<TaskData> Tasks = new List<TaskData>()        {            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }        };        return Tasks;    }}

    For further details regarding columns, referhere.

    Enable editing

    The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set bothEditSettings.AllowEditing andEditSettings.AllowTaskbarEditing properties totrue.

    <SfGanttDataSource="@TaskCollection"Height="450px"Width="700px"><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"></GanttTaskFields><GanttEditSettingsAllowEditing="true"Mode="Syncfusion.Blazor.Gantt.EditMode.Auto"AllowTaskbarEditing="true"></GanttEditSettings></SfGantt>@code{    private List<TaskData> TaskCollection { get; set; }    protected override void OnInitialized()    {        this.TaskCollection = GetTaskCollection();    }    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime StartDate { get; set; }        public DateTime EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public int? ParentID { get; set; }    }    private static List<TaskData> GetTaskCollection()    {        List<TaskData> Tasks = new List<TaskData>()        {            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }        };        return Tasks;    }}

    NOTE

    When the edit mode is set toAuto, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart.

    You can find the full information regarding Editing fromhere

    Enable filtering

    The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set theAllowFiltering property totrue. The filtering behavior can be customized using theFilterSettings property.

    <SfGanttDataSource="@TaskCollection"Height="450px"Width="700px"AllowFiltering="true"><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"></GanttTaskFields></SfGantt>@code{    private List<TaskData> TaskCollection { get; set; }    protected override void OnInitialized()    {        this.TaskCollection = GetTaskCollection();    }    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime StartDate { get; set; }        public DateTime EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public int? ParentID { get; set; }    }    private static List<TaskData> GetTaskCollection()    {        List<TaskData> Tasks = new List<TaskData>()        {            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }        };        return Tasks;    }}

    You can find the full information regarding Filtering fromhere

    Enable sorting

    The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set theAllowSorting property totrue. The sorting behavior can be customized using theSortSettings property to define the sorting configuration.

    <SfGanttDataSource="@TaskCollection"Height="450px"Width="700px"AllowSorting="true"><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"></GanttTaskFields></SfGantt>@code{    private List<TaskData> TaskCollection { get; set; }    protected override void OnInitialized()    {        this.TaskCollection = GetTaskCollection();    }    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime StartDate { get; set; }        public DateTime EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public int? ParentID { get; set; }    }    private static List<TaskData> GetTaskCollection()    {        List<TaskData> Tasks = new List<TaskData>()        {            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }        };        return Tasks;    }}

    You can find the full information regarding Sorting fromhere

    Enabling Predecessors or task relationships

    The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times.

    • Start to Start (SS): The successor task begins when the predecessor task begins.
    • Start to Finish (SF): The successor task finishes when the predecessor task begins.
    • Finish to Start (FS): The successor task begins when the predecessor task finishes.
    • Finish to Finish (FF): The successor task finishes when the predecessor task finishes.

    These relationships can be configured using theDependency property in the task data.

    <SfGanttDataSource="@TaskCollection"Height="450px"Width="700px"><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"Dependency="Predecessor"></GanttTaskFields></SfGantt>@code{    private List<TaskData> TaskCollection { get; set; }    protected override void OnInitialized()    {        this.TaskCollection = GetTaskCollection();    }    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime StartDate { get; set; }        public DateTime EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public string Predecessor { get; set; }        public int? ParentID { get; set; }    }    public static List<TaskData> GetTaskCollection()    {        List<TaskData> Tasks = new List<TaskData>() {            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 },            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" }        };        return Tasks;    }}

    You can find the full information regarding Predecessors fromhere

    Handling exceptions

    Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using theOnActionFailure event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow.

    NOTE

    We recommend you bind theOnActionFailure event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get a solution as early as possible.

    The following sample code demonstrates notifying user when server-side exception has occurred during data operation,

    @using Syncfusion.Blazor@using Syncfusion.Blazor.Data@using Syncfusion.Blazor.Gantt@using Syncfusion.Blazor.Grids<labelclass="error"style="display:block; color: red; margin-bottom: 20px;">@ErrorDetails</label><SfGanttTValue="TaskData"Height="450px"Width="700px"><SfDataManagerUrl="https://some.com/invalidUrl"Adaptor="Adaptors.UrlAdaptor"></SfDataManager><GanttTaskFieldsId="TaskID"Name="TaskName"StartDate="StartDate"EndDate="EndDate"Duration="Duration"Progress="Progress"ParentID="ParentID"></GanttTaskFields><GanttEventsTValue="TaskData"OnActionFailure="ActionFailure"></GanttEvents></SfGantt>@code{    private string ErrorDetails = "";    public class TaskData    {        public int TaskID { get; set; }        public string TaskName { get; set; }        public DateTime? StartDate { get; set; }        public DateTime? EndDate { get; set; }        public string Duration { get; set; }        public int Progress { get; set; }        public int? ParentID { get; set; }    }    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)    {        this.ErrorDetails = args.Error.Message.ToString();        StateHasChanged();    }}

    NOTE

    View Sample in GitHub.

    See also

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2025 Movatter.jp