Telerik for Blazor 下拉选择事件不更新网格中的数据

Question

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

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

Answer 1

我将假设网格组件正确获取以下值 set [Inject] public AppData ShowData { get; set; } [Inject] public AppData ShowData { get; set; } [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; }
    }
}