Unplanned
Last Updated:
17 Sep 2021 11:33
by ADMIN
Khuyen
Created on:
17 Sep 2021 11:33
Category:
Grid
Type:
Bug Report
Child column header text in a parent is not updating upon dynamic changes (MultiColumnHeaders scenario)
In Grid with MultiColumnHeaders, if you programmatically change a column header, this breaks the Grid rendering. The header text isn't updated unless the number of child columns changes.
Reproduction steps:
1. Run the provided code snippet. It will bind August's data to the grid. There are 5 days in August's data, so you can see 5 child columns under "Sales by Date".
2. Click the July button. July's data also has 5 days. You will see all the cell texts are updated, but the header texts aren't.
3. If you click on the July button again. They are updated at this time.
4. Refresh the page
5. Click the June button. June's data has only 3 days, so you will see all the header texts, and the cell texts are updated as expected.
Reproduction code:
<TelerikButton OnClick="@Change0">August</TelerikButton>
<TelerikButton OnClick="@Change">July</TelerikButton>
<TelerikButton OnClick="@Change2">June</TelerikButton>
@if (AllSales.Count > 0)
{
<TelerikGrid @ref="@Grid" Data="@AllSales" Pageable="false">
<GridColumns>
<GridColumn Field="@nameof(MyViewModel.Product)">
</GridColumn>
<GridColumn>
<HeaderTemplate>
<div>Sales by Date</div>
</HeaderTemplate>
<Columns>
@{
var dates = AllSales.First().SalesByDate.Keys.OrderByDescending(d => d).ToList();
foreach (var date in dates)
{
<GridColumn Title="@date.ToString("MM/dd")">
<HeaderTemplate>
@{
Console.WriteLine(date.ToString("MM/dd"));
<div>@date.ToString("MM/dd")</div>
}
</HeaderTemplate>
<Template>
@{
var record = context as MyViewModel;
if (record.SalesByDate.ContainsKey(date))
{
<div>@record.SalesByDate[date]</div>
}
}
</Template>
</GridColumn>
}
}
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
}
@code {
public class MyViewModel
{
public string Product { get; set; }
public Dictionary<DateTime, decimal> SalesByDate { get; set; }
}
List<MyViewModel> AllSales { get; set; } = new List<MyViewModel>();
TelerikGrid<MyViewModel> Grid { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
Change0();
}
protected void Change0()
{
AllSales = new List<MyViewModel>();
AllSales.Add(new MyViewModel
{
Product = "Product A",
SalesByDate = new Dictionary<DateTime, decimal>
{
{ new DateTime(2021,08,01), 1000 },
{ new DateTime(2021,08,02), 2000 },
{ new DateTime(2021,08,03), 3000 },
{ new DateTime(2021,08,04), 4000 },
{ new DateTime(2021,08,05), 5000 }
}
});
AllSales.Add(new MyViewModel
{
Product = "Product B",
SalesByDate = new Dictionary<DateTime, decimal>
{
{ new DateTime(2021,08,01), 1000 },
{ new DateTime(2021,08,02), 2000 },
{ new DateTime(2021,08,03), 3000 },
{ new DateTime(2021,08,04), 4000 },
{ new DateTime(2021,08,05), 5000 }
}
});
}
protected void Change()
{
AllSales = new List<MyViewModel>();
AllSales.Add(new MyViewModel
{
Product = "Product C",
SalesByDate = new Dictionary<DateTime, decimal>
{
{ new DateTime(2021,07,01), 1010 },
{ new DateTime(2021,07,02), 2020 },
{ new DateTime(2021,07,03), 3030 },
{ new DateTime(2021,07,04), 4040 },
{ new DateTime(2021,07,05), 5050 }
}
});
AllSales.Add(new MyViewModel
{
Product = "Product D",
SalesByDate = new Dictionary<DateTime, decimal>
{
{ new DateTime(2021,07,01), 1010 },
{ new DateTime(2021,07,02), 2020 },
{ new DateTime(2021,07,03), 3030 },
{ new DateTime(2021,07,04), 4040 },
{ new DateTime(2021,07,05), 5050 }
}
});
}
protected void Change2()
{
AllSales = new List<MyViewModel>();
AllSales.Add(new MyViewModel
{
Product = "Product E",
SalesByDate = new Dictionary<DateTime, decimal>
{
{ new DateTime(2021,06,01), 1100 },
{ new DateTime(2021,06,02), 2200 },
{ new DateTime(2021,06,03), 3300 }
}
});
AllSales.Add(new MyViewModel
{
Product = "Product F",
SalesByDate = new Dictionary<DateTime, decimal>
{
{ new DateTime(2021,06,01), 1100 },
{ new DateTime(2021,06,02), 2200 },
{ new DateTime(2021,06,03), 3300 },
}
});
}
}
0 comments