Movatterモバイル変換

[0]ホーム
URL:

newupdatedpro

  • Overview

  • Framework and Utilities

  • Angular

  • React

  • Vue

  • Blazor

  • Integrations

  • Roadmap

  • Release Notes

  • Accessibility

  • Theme Builder

  • Complex Components

  • Grid

  • Gantt Chart

  • Scheduler

  • CardView

  • Chart

  • Editor

  • DockingLayout

  • Kanban

  • PivotTable

  • Table

  • Core Components

  • Accordion

  • Badge

  • Barcode

  • Button

  • Breadcrumb

  • Card

  • Carousel

  • Calendar

  • CheckBox

  • ComboBox

  • ColorPicker

  • DateTimePicker

  • DropDownList

  • DropDownButton

  • FileUpload

  • Form

  • Gauge

  • Input

  • ListBox

  • ListMenu

  • Layout

  • MaskedTextBox

  • Menu

  • MultilineTextBox

  • MultiSplitButton

  • NumericTextBox

  • Pager

  • PasswordTextBox

  • PowerButton

  • ProgressBar

  • QueryBuilder

  • RadioButton

  • Rating

  • RepeatButton

  • Ribbon Bar

  • Qrcode

  • ScrollBar

  • Slider

  • Splitter

  • SwitchButton

  • Sortable

  • Tabs

  • Tank

  • TextBox

  • TimePicker

  • Toast

  • ToggleButton

  • Tooltip

  • Tree

  • Window

Blazor Gantt - Bind to JSON

Bind JSON Data to Smart.Gantt

For the purpose of the demo, we will be using the external JSON file at:
https://www.htmlelements.com/demos/gantt/load-from-json/data.json

First, in order to reach the files, it is necessary to inject HTPP Services. Add the HTTP Client in theStartup.cs file:

using System.Net.Http;.......public void ConfigureServices(IServiceCollection services){    services.AddRazorPages();    services.AddServerSideBlazor();    services.AddSingleton<WeatherForecastService>();    services.AddSmart();    services.AddHttpClient();    services.AddScoped<HttpClient>();}

Then insideIndex.razor, make an HTTP request for the JSON file and set it as value to theDataSource property:

@page "/"@using System.Net.Http.Json;@inject HttpClient Http@using Smart.Blazor; <h2> Gantt Chart </h2><GanttChart @ref="gantt" DurationUnit="Duration.Day" View="GanttChartView.Week" />@code {    GanttChart gantt;     string jsonSource = "https://www.htmlelements.com/demos/gantt/load-from-json/data.json";    private object[] records;    protected override async Task OnInitializedAsync()    {        records = await Http.GetFromJsonAsync<object[]>(jsonSource);        gantt.DataSource = records;    }}

Bounding to the JSON file above, produces the following result:

Gantt bound to JSON
[8]ページ先頭
©2009-2025 Movatter.jp