IgbDataGridのデータソースを非同期で入れ替える

IgbDataGrid は非推奨のコントロールです。代わりに IgbGrid をご利用ください。IgbGrid での実装方法についてご不明な点がありましたら弊社技術サポートまでお問い合わせください。

ボタンクリックでIgbDataGridのデータソースを入れ替えるサンプルです。

<IgbDataGrid .....　DataSource="DataSource">
.....
</IgbDataGrid>

<button @onclick="ChangeData">
    Change Data
</button>

@code {
    private List<SaleInfo> DataSource;
    private IgbDataGrid DataGridRef;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        IgbDataGridModule.Register(IgniteUIBlazor);
        GenerateData();
    }

    public void GenerateData()
    {
        var sales = new List<SaleInfo>();

        for (var i = 0; i < 10; i++)
        {
            var item = new SaleInfo()
            {
                ProductID =  i,
                ProductName = "Item" + i,
                MyDate = DateTime.Today.AddDays(i)
            };
            sales.Add(item);
        }

        this.DataSource = sales;
    }

    public async Task GenerateData2()
    {
        await Task.Delay(2000);

        var sales = new List<SaleInfo>();

        for (var i = 0; i < 5; i++)
        {
            var item = new SaleInfo()
                {
                    ProductID = i,
                    ProductName = "Updated" + (i * 10),
                    MyDate = DateTime.Today.AddDays(i * 10)
                };
            sales.Add(item);
        }

        this.DataSource = sales;

    }

    public class SaleInfo
    {
        public string ProductName { get; set; }
        public int ProductID { get; set; }
        public DateTime MyDate { get; set; }
    }

    private async Task ChangeData()
    {
        await GenerateData2();
    }
}