Telerik for Blazor 下拉菜单 select 事件未更新网格中的数据

Question

我正在使用 Telerik 网格，该网格显示从数据库生成的数据行。每个数据库项目都有一个与之关联的时间段（按小时）。我有一个 TelerikDropDownList，它向网格添加过滤选项（select 一小时）。我想要做的只是显示与网格下拉列表中 select 小时相关的数据。我正在使用 WebAssembly 顺便说一句。

这是网格组件：

    <ShowSelect />            

    <TelerikGrid Data="_showItem" Height="80%"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
                 Resizable="true" Reorderable="true" >
        <GridColumns>                
                <GridColumn Field="@(nameof(ShowItem.planned_sequence))" Title="SEQ" />
                <GridColumn Field="@(nameof(ShowItem.matrix_id))" Title="Matrix ID" />
                <GridColumn Field="@(nameof(ShowItem.item_id))" Title="Item ID" />
                <GridColumn Field="@(nameof(ShowItem.item_desc))" Title="Description" />
                <GridColumn Field="@(nameof(ShowItem.item_type_id))" Title="Item Type ID" />
                <GridColumn Field="@(nameof(ShowItem.planned_selling_price))" Title="Planned Price" />
                <GridColumn Field="@(nameof(ShowItem.planned_availabe_qty))" Title="Available Qty" />
                <GridColumn Field="@(nameof(ShowItem.planned_minutes))" Title="P Mins" />
        </GridColumns>
    </TelerikGrid>

@code{
public ShowItem[] _showItem;            

[Inject] HttpClient HttpClient { get; set; }       
[Inject] public AppData ShowData { get; set; }

protected override async Task OnInitializedAsync()
{
    _showItem = await HttpClient.GetJsonAsync<ShowItem[]>("API call...");

    _showItem = _showItem.Where(i => i.time_slot_id == ShowData.SelectedShow).ToArray();
}        
}

我的 ShowSelect 组件：

<TelerikDropDownList Value="ShowData.SelectedShow" Data="@Shows"
                 TextField="ShowName" ValueField="ShowId"
                 ValueChanged="@((int s) => ShowSelected(s))"></TelerikDropDownList>

@code {
public List<Show> Shows { get; set; } = new List<Show>();

public SelectedShow SelectedShow { get; set; } = new SelectedShow();

[Inject] public AppData ShowData { get; set; }

protected override void OnInitialized()
{
    base.OnInitialized();

    var time = DateTime.UtcNow.AddHours(-5); //Fix for no WebAssembly time zone option (Eastern Standard Time)

    for(int i = 15; i > 0; i--)
    {
        var hour = time.AddHours(-i);
        Shows.Add(new Show { ShowId = hour.Hour, ShowName = $"{Convert.ToChar(int.Parse(hour.ToString("HH")) + 65)} - {hour.ToString("hh tt").ToLower()} {hour.ToString("MM/dd/yy")}" }); 
    }

    Shows.Add(new Show { ShowId = time.Hour, ShowName = $"{Convert.ToChar(int.Parse(time.ToString("HH")) + 65)} - {time.ToString("hh tt").ToLower()} {time.ToString("MM/dd/yy")}" });

    for(int i = 1; i < 15; i++)
    {
        var hour = time.AddHours(i);
        Shows.Add(new Show { ShowId = hour.Hour, ShowName = $"{Convert.ToChar(int.Parse(hour.ToString("HH")) + 65)} - {hour.ToString("hh tt").ToLower()} {hour.ToString("MM/dd/yy")}" });
    }
}

public void ShowSelected(int showId)
    {
        ShowData.SelectedShow = showId;

        Show Show = Shows.Where(s => s.ShowId == showId).First();
        SelectedShow.ShowId = Show.ShowId;
        SelectedShow.ShowName = Show.ShowName;
    }
}

我的 AppData 服务：

public class AppData
{
    public int SelectedShow { get; set; } = DateTime.UtcNow.AddHours(-5).Hour;
}

我的模特们：

public class ShowItem
{
    public int network_id { get; set; }
    public DateTime spt_date_id { get; set; }
    public int time_slot_id { get; set; }
    public string show_num { get; set; }
    public int planned_sequence { get; set; }
    public int item_id { get; set; }
    public int matrix_id { get; set; }
    public int item_type_id { get; set; }
    public int planned_selling_price { get; set; }
    public int planned_availabe_qty { get; set; }
    public int planned_minutes { get; set; }
    public string item_desc { get; set; }
}

public class Show
{
    public int ShowId { get; set; }
    public string ShowName { get; set; }
}

public class SelectedShow
{
    public int ShowId { get; set; }
    public string ShowName { get; set; }
}

我遇到的问题是，当 select 从下拉列表中选择不同的时间段时，网格没有改变。有人知道我哪里出错了吗？

Answer 1

我假设网格组件在下拉列表更改后正确设置了以下值 [Inject] public AppData ShowData { get; set; }。

问题是在网格组件中没有事件处理程序或任何代码来更新网格数据。

当第一次将网格组件添加到页面时，OnInitializedAsync 事件将触发一次，仅此而已 - 它不会被再次调用，因此您的服务不会被再次调用获取新的网格数据。

我个人处理这个问题的方法是 从 ShowSelect 组件公开一个事件，我可以在网格组件中使用该事件，以便再次调用我的服务 .

有了这个，我真的不需要 AppState 如果它只包含这些内容。

我还会在我的 API 中添加一个参数，以便服务器进行过滤并仅将相关数据发回给我。

编辑：由于评论，我做了一个公开事件的例子，就在这里（我在数据绑定中削减了一些角落以使其更短，但我希望它仍然说明了这一点）。

首先是ShowSelect组件

<TelerikDropDownList Value="@ShowId" Data="@Shows"
                     ValueChanged="@((int s) => ShowSelected(s))"></TelerikDropDownList>

@code {
    List<int> Shows { get; set; } = new List<int> { 1, 2, 3 };
    [Parameter]
    public int ShowId { get; set; }
    [Parameter]
    public EventCallback<int> OnShowIdChanged { get; set; }

    async Task ShowSelected(int showId)
    {
        ShowId = showId;
        await OnShowIdChanged.InvokeAsync(ShowId);
    }
}

然后，使用网格在主要组件中使用该事件：

<ShowSelect ShowId="@ShowId" OnShowIdChanged="@ShowIdChangedHandler" />

<TelerikGrid Data="@MyData" Height="400px" Pageable="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.GenerationDate))" Title="Benchmark - data generated at" />
        <GridColumn Field="@(nameof(SampleData.ShowId))" Title="Show ID - see the dropdown" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> MyData { get; set; }
    int ShowId { get; set; } // you may not even want this parameter here, but it helps with keeping the dropdown in sync with the main page

    protected override async Task OnInitializedAsync()
    {
        ShowId = 2;//maybe you fetch that from a service too
        MyData = await GetDataFromService(ShowId);
    }

    async Task ShowIdChangedHandler(int showId)
    {
        ShowId = showId;
        MyData = await GetDataFromService(ShowId);
    }

    async Task<List<SampleData>> GetDataFromService(int showId)
    {
        await Task.Delay(500);
        //simulate service here
        var data = Enumerable.Range(1, 30).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            GenerationDate = DateTime.Now,
            ShowId = showId
        }).ToList();

        return await Task.FromResult(data);
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime GenerationDate { get; set; }
        public int ShowId { get; set; }
    }
}

Telerik for Blazor 下拉菜单 select 事件未更新网格中的数据

Telerik for Blazor dropdown select event not updating data in grid

c#

telerik

asp.net-core

blazor-client-side