Infragistics｜Ultimate UI Blazor｜IgbDataGrid Sample

338 瀏覽人次

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

結果