Infragistics|Ultimate UI Blazor|IgbDataGrid Sample

infragistics log


顯示 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; }
            }
        }


結果




延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言