Infragistics｜Ultimate UI Blazor｜IgbDataGrid Sample

尚無瀏覽量

2023-02-20 更新

顯示 Ignite UI for Blazor 中包含的 data grid 的 sample。

下面是在項目中使用 data grid 的過程和數據綁定的 sample。

index.html

在第 22 行添加程式碼。


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>Blazor_Grid</title>

    <base href="/" />

    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <link href="css/app.css" rel="stylesheet" />

    <link href="Blazor_Grid.styles.css" rel="stylesheet" />

</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.

        <a href="" class="reload">Reload</a>

        <a class="dismiss">🗙</a>

    </div>

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>

    <script src="_framework/blazor.webassembly.js"></script>

</body>

</html>

Program.cs

在第 11 行添加程式砠以註冊 DataGrid 模塊。

        namespace Blazor_Grid
        {
            public class Program
            {
                public static async Task Main(string[] args)
                {
                    var builder = WebAssemblyHostBuilder.CreateDefault(args);
                    builder.RootComponents.Add("#app");
        
                    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
                    builder.Services.AddIgniteUIBlazor(typeof(DataGridModule));
                    await builder.Build().RunAsync();
                }
            }
        }

_Imports.razor

添加第 11 行程式碼，使 Blazor 元件的 Ignite UI 在組件上可用。

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Blazor_Grid
@using Blazor_Grid.Shared
@using IgniteUI.Blazor.Controls;

Index.razor

        @page "/"
        @using IgniteUI.Blazor.Controls
        @inject IIgniteUIBlazor IgniteUIBlazor
        
        @code
        {
            public List DataSource { get; set; } = new List();
            protected override void OnInitialized()
            {
                base.OnInitialized();
                DataGridModule.Register(IgniteUIBlazor);
        
                for (int i = 0; i < 10; i++)
                {
                    this.DataSource.Add(new SaleInfo
                    {
                        ProductID = 1001 + i,
                        ProductName = $"商品 {i + 1}",
                        Country = "日本",
                        OrderDate = DateTime.Today
                    });
                }
            }
        
            public class SaleInfo
            {
                public double ProductID { get; set; }
                public string ProductName { get; set; }
                public string Country { get; set; }
                public DateTime OrderDate { get; set; }
            }
        }

結果