c# - Telerik for Blazor 下拉选择事件未更新网格中的数据

问题描述

我正在使用 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; }
}

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

标签： c#asp.net-coretelerikblazor-client-side

解决方案

我将假设网格组件[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; }
    }
}

c# - Telerik for Blazor 下拉选择事件未更新网格中的数据

问题描述

解决方案

推荐阅读