Hello,
A Date/Time Picker is bound to a nullable DateTime value. If the user clears the value with the keyboard, the component will show as invalid (with red border). Instead, the picker should treat null values as valid.
Here is a test page with a few different workarounds:
<TelerikButton OnClick="@( () => DateValue = null )">Clear Value</TelerikButton>
<TelerikButton OnClick="@( () => DateValue = DateTime.Now )">Set Value</TelerikButton>
DateValue.HasValue: @DateValue.HasValue
<p>Default behavior:</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px" />
<p>Red border will disappear after blur (CSS):</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px"
Class="@( !DateValue.HasValue ? "valid-null" : "" )" />
<p>Red border will never appear (CSS):</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px"
Class="valid-null" />
<p>Red border will disappear after blur (OnChange):</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px"
OnChange="@OnPickerChange" />
<style>
.k-input.k-invalid.valid-null {
border-color: rgba(0, 0, 0, 0.08);
}
</style>
@code {
private DateTime? DateValue { get; set; } = DateTime.Now;
private async Task OnPickerChange(object newValue)
{
DateTime? newDate = (DateTime?)newValue;
if (!newDate.HasValue)
{
DateValue = DateTime.Now;
await Task.Delay(1);
DateValue = null;
}
}
}
I have a ComboBox/DropDownList that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling up the selection box dropdown list. I'm trying to scroll but then resets to the currently selected item making it almost impossible to scroll up. You can use your own demo examples to replicate this issue.
To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo), change the PageSize from 10 to 20. Open the dropdown and select an item. Then, open again the dropdown and scroll slowly up.
I have a Multiselect as an editor in the Grid. When I click in the multiselect the popup with the choices stays hidden behind the window.
<AdminEdit>
Workaround:
You can increase the z-index of the k-animation-container
<style>
.k-animation-container {
z-index: 15000;
}
</style>
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="300px" OnUpdate="@UpdateHandler">
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridColumn Field=@nameof(SampleData.Roles) Title="Position">
<Template>
@{
var item = context as SampleData;
@if (item.Roles.Any())
{
foreach (var role in item.Roles)
{
<span>@role</span>
}
}
}
</Template>
<EditorTemplate>
@{
CurrentlyEditedEmployee = context as SampleData;
<TelerikMultiSelect @bind-Value="@selectedValues" Data="@CurrentlyEditedEmployee.Roles"></TelerikMultiSelect>
}
</EditorTemplate>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
List<SampleData> MyData { get; set; }
List<string> Roles { get; set; }
SampleData CurrentlyEditedEmployee { get; set; }
private List<string> selectedValues { get; set; }
public async Task UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operations here through your service
await MyService.Update(item);
// update the local view-model data with the service data
await GetGridData();
}
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public List<string> Roles { get; set; } = new List<string>() { "Test" };
}
async Task GetGridData()
{
MyData = await MyService.Read();
Roles = await MyService.GetRoles();
}
protected override async Task OnInitializedAsync()
{
await GetGridData();
}
// the following static class mimics an actual data service that handles the actual data source
// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
public static class MyService
{
private static List<SampleData> _data { get; set; } = new List<SampleData>();
private static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };
public static async Task<List<SampleData>> Read()
{
if (_data.Count < 1)
{
for (int i = 1; i < 50; i++)
{
_data.Add(new SampleData()
{
ID = i,
Name = "Name " + i.ToString()
});
}
}
return await Task.FromResult(_data);
}
public static async Task<List<string>> GetRoles()
{
return await Task.FromResult(Roles);
}
public static async Task Update(SampleData itemToUpdate)
{
var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
if (index != -1)
{
_data[index] = itemToUpdate;
}
}
}
}</AdminEdit>
I want to control if the SplitterPane is collapsed or not from code. When I bind the Collapsed parameter of a SplitterPane to a variable, on initial load the SplitterPane is Collaped/Expanded based on the provided value. But when I change the value during run time, the splitter doesn't react.
The same behavior is observed if I try to programmatically change the Size of the SplitterPane.
Grid headers are misaligned if they are navigated in a scrolling scenario with a Frozen column.
===
ADMIN EDIT
===
The behavior affects the TreeList as well in a similar fashion. The misalignment is bigger when there is a frozen column but it is also reproducible without it in this demo.
The problem is that if the selected option is in the options added later then it does not show it as the selected value.
Example below shows correct function for "6" but incorrect for "7".
---
ADMIN EDIT
Here is a reproducible with the workaround highlighted in green:
@using System.Collections.ObjectModel
<h4>Option Selected: 6 @selectedSix</h4>
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="@selectedSix" />
<h4>Option Selected: 7 @selectedSeven</h4>
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="@selectedSeven">
</TelerikDropDownList>
<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>
<ul>
@foreach (var item in myDdlData)
{
<li>@item.MyValueField</li>
}
</ul>
@code {
int selectedSix { get; set; } = 6;
int selectedSeven { get; set; } = 7;
ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));
protected override async Task OnInitializedAsync()
{
AddOption();
await Task.Delay(TimeSpan.FromSeconds(1));
AddOption();
}
void AddOption()
{
myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });
int origSelection = selectedSeven;
selectedSeven = 0;
StateHasChanged();
//add this if it does not work
//await Task.Delay(30);//wait a rendering frame
selectedSeven = origSelection;
//add this if it does not work
//StateHasChanged();
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
Note: This behavior also occurs if the initial data is received after the component is initialized. The workaround in this case will be similar - set the selected value after the data is received.
---
In a Grid loaded with data made of ExpandoObject, set an aggregate GridAggregateType.Sum breaks the grouping feature while GridAggregateType Max, Min and Count work properly
Please find the attached project: in the grid on Index.razor grouping does not work, just comment Index.razor:43 to restore grouping feature
Exception message:
Error: System.InvalidOperationException: No generic method 'Sum' on type 'System.Linq.Enumerable' is compatible with the supplied type arguments and arguments. No type arguments should be provided if the method is non-generic.
at System.Linq.Expressions.Expression.FindMethod(Type type, String methodName, Type[] typeArgs, Expression[] args, BindingFlags flags)
at System.Linq.Expressions.Expression.Call(Type type, String methodName, Type[] typeArguments, Expression[] arguments)
at Telerik.DataSource.Expressions.EnumerableSelectorAggregateFunctionExpressionBuilder.CreateMethodCallExpression(LambdaExpression memberSelectorExpression)
at Telerik.DataSource.Expressions.EnumerableSelectorAggregateFunctionExpressionBuilder.CreateAggregateExpression()
at Telerik.DataSource.EnumerableSelectorAggregateFunction.CreateAggregateExpression(Expression enumerableExpression, Boolean liftMemberAccessToNull)
at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.<ProjectionPropertyValueExpressions>b__39_0(AggregateFunction f)
at System.Linq.Enumerable.SelectIListIterator`2.ToList()
at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateProjectionInitExpression()
at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateAggregateFunctionsProjectionMemberBinding()
at Telerik.DataSource.Expressions.QueryableAggregatesExpressionBuilder.CreateMemberBindings()+MoveNext()
at System.Collections.Generic.LargeArrayBuilder`1.AddRange(IEnumerable`1 items)
at System.Collections.Generic.EnumerableHelpers.ToArray[T](IEnumerable`1 source)
at System.Linq.Enumerable.ToArray[TSource](IEnumerable`1 source)
at System.Dynamic.Utils.CollectionExtensions.ToReadOnly[T](IEnumerable`1 enumerable)
at System.Linq.Expressions.Expression.MemberInit(NewExpression newExpression, IEnumerable`1 bindings)
at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateSelectBodyExpression()
at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateSelectExpression()
at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilderBase.CreateQuery()
at Telerik.DataSource.Extensions.QueryableExtensions.Aggregate(IQueryable source, IEnumerable`1 aggregateFunctions)
at Telerik.DataSource.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, Func`2 selector)
at Telerik.DataSource.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request)
at Telerik.DataSource.Extensions.QueryableExtensions.ToDataSourceResult(IEnumerable enumerable, DataSourceRequest request)
at Telerik.Blazor.Data.TelerikDataSourceBase.ProcessData(IEnumerable data)
at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataInternal()
at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataAsync()
at Telerik.Blazor.Components.TelerikGrid`1.DataBoundProcessData()
at Telerik.Blazor.Components.TelerikGrid`1.ProcessDataAsync()
at Telerik.Blazor.Components.TelerikGrid`1.ApplyFiltersAsync()
at Telerik.Blazor.Components.TelerikGrid`1.OnFilterChange(FilterDescriptorBase filter)
at Telerik.Blazor.Components.Common.Filters.TelerikFilterHeader`1.Filter(FilterDescriptor filterDescriptor)
at Telerik.Blazor.Components.Common.Filters.TelerikFilterHeader`1.OnValueChanged(Object newValue)
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)
Occasionally I am getting TaskCancellation errors such as:
[13:07:52 ERR] Unhandled exception in circuit 'hQsJqY3F4XbTbzQETSggJClg_e4YRyQkrKHFMHCXugM'.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikComboBox`2.Dispose()
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__140_0(Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)
===========
ADMIN EDIT
===========
The error is related to a Microsoft bug. It occurs one minute after some client component has been disposed.
The exceptions are not bypassed due to memory leak. The bug is expected to be fixed in .NET 6 and this will be respected for the Telerik components, so that the errors do not appear.
When you change the data source of the grid, it must re-render the data again.
For example, when you use a custom edit form, you add/edit the data with your own code and not through the grid. This is useful, for example, when you only want to show a few columns in the grid, but the model has many more editable fields. Or, when you want a customized layout/behavior of the edit form.
Minimum repro:
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.Button<TelerikButton OnClick="@ChangeProduct">Works: Change an existing product</TelerikButton><TelerikButton OnClick="@AddProduct">Does not work: Add a new product</TelerikButton><TelerikButton OnClick="@RemoveProduct">Does not work: Remove an existing product</TelerikButton><TelerikGrid Data=@GridData Pageable="true"> <TelerikGridColumns> <TelerikGridColumn Field=@nameof(Product.ProductName) Title="Product Name" /> <TelerikGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price"> </TelerikGridColumn> </TelerikGridColumns></TelerikGrid>@functions { public List<Product> GridData { get; set; } void AddProduct() { GridData.Insert(0, new Product() { ProductId = DateTime.Now.Millisecond, ProductName = "some product name", UnitPrice = DateTime.Now.Second }); //after updating the data, the grid should show the item at the top of the first page. //at the moment, you need to page, for example, for the data to be updated } protected void ChangeProduct() { GridData.Where(p => p.ProductId == 2).First().ProductName = "changed at " + DateTime.Now; } protected void RemoveProduct() { GridData.RemoveAt(4); //after updating the data, the grid should remove the fourth item immediately //at the moment, you need to page, for example, for the data to be updated } protected override void OnInit() { GridData = new List<Product>(); for (int i = 0; i < 25; i++) { GridData.Add(new Product() { ProductId = i, ProductName = "Product" + i.ToString(), UnitPrice = (decimal)(i * 3.14), }); } } public class Product { public string ProductName { get; set; } public decimal UnitPrice { get; set; } public int ProductId { get; set; } }}
Use any demo and rapidly hover between parent menu items:
If the PdfViewer is initialized with a default document, the display performance of this document will be a lot worse, compared to PDF documents that are loaded programmatically after the component is already on the web page.
I have a Grid using checkbox selection and when I un-check a row, the SelectedItemsChanged event is not firing. I'm using an async handler.
The problem appears to happen when a row is selected and then un-selected. The event is firing when it is selected but is not firing when it is un-selected.
<TelerikGrid Data="strategicLevelItems" SelectedItems="selectedStrategic" Width="100%" Height="500px"
ScrollMode="GridScrollMode.Scrollable" SelectionMode="GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<GetNavigationNodesModel> strategicItems) => OnStrategicSelectAsync(strategicItems))"
FilterMode="GridFilterMode.FilterRow">
<GridColumns>
<GridCheckboxColumn SelectAll="true" Width="40px" OnCellRender="@GridHelpers.CenterAlign" />
<GridColumn Field="@(nameof(GetNavigationNodesModel.Name))" />
</GridColumns>
</TelerikGrid>
private async Task OnStrategicSelectAsync(IEnumerable<GetNavigationNodesModel> selectedItems)
{
selectedStrategic = selectedItems;
var state = tacticalGrid.GetState();
var compositeFilter = new CompositeFilterDescriptor() { LogicalOperator = FilterCompositionLogicalOperator.Or };
foreach (var item in selectedItems)
{
compositeFilter.FilterDescriptors.Add(new FilterDescriptor()
{
Member = "ParentId",
Operator = FilterOperator.IsEqualTo,
Value = item.Id
});
}
state.FilterDescriptors.Clear();
state.FilterDescriptors.Add(compositeFilter);
await tacticalGrid.SetState(state);
}
This is kind of hard to explain, so please see the attached Before and After videos. In these videos, I'm using a brand new .NET 6 console app.
In the Before video, the Telerik UI for Blazor extension is disabled. After I type `Console` and hit the period, I see intellisense like I expect to.
In the After video, the extension is enabled. I'm typing the same thing and hitting period, but something interrupts the period keystroke, and it never appears. Instead, it just closes the intellisense window.
I used a new console app as an example, but it's happening in all projects. It's also happening with other keys like semicolons, spaces, and tabs. It's causing a huge amount of typos and making so I often have to hit keystrokes twice in order for them to register.
I tried doing a full reinstall of Visual Studio. Everything's fine until I install the Telerik extension, then it starts. If I disable the extension, the issue goes away.
When I updated to the latest version I noticed that the FormItems in AuthorizedViews were moved to the bottom of the form, Quick example:
<TelerikForm>
<FormItems>
<AuthorizeView>
<Authorized>
<FormItem Field="First"/>
</Authorized>
</AuthorizeView>
<FormItem Field="Second"/>
</FormItems>
</TelerikForm>will end up like
<TelerikForm>
<FormItems>
<FormItem Field="Second"/>
<FormItem Field="First"/>
</FormItems>
</TelerikForm>
Hi,
In most of my projects I use the ObjectGraphDataAnnotationsValidator component for validating complex types; and I also use a lot of your components. I've noticed what I *think* might be a clash between this validator and some of your input components. I've built a simple (and crude) example but I think it demonstrates the problem.
In the example code we have a table with 2 cells - in both cells we have an EditForm and 10 TelerikTextArea components. The first cell's EditForm contains a ObjectGraphDataAnnotationsValidator instance and the 2nd cell doesn't. Hopefully when you try to reproduce you will notice a distinct difference in performance with the performance of the 2nd EditForm being great, while the 1st EditForm is quite laggy and gets worse the more items you add.
I'm wondering if there is a clash here between the ObjectGraphDataAnnotationsValidator and the input components or I'm using them incorrectly?
Thanks
Michael.
@page "/"
<table width="100%">
<tr>
<td width="50%">
<h3>EditForm with ObjectGraphDataAnnotationsValidator</h3>
<EditForm Model="Items">
<ObjectGraphDataAnnotationsValidator />
@foreach (var item in Items)
{
<div style="display: flex">
<TelerikTextArea @bind-Value="item.TextValue" />
@if (Items.IndexOf(item) == (Items.Count - 1))
{
<TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
Add
</TelerikButton>
}
</div>
}
</EditForm>
</td>
<td width="50%">
<h3>EditForm without ObjectGraphDataAnnotationsValidator</h3>
<EditForm Model="Items">
@foreach (var item in Items)
{
<div style="display: flex">
<TelerikTextArea @bind-Value="item.TextValue" />
@if (Items.IndexOf(item) == (Items.Count - 1))
{
<TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
Add
</TelerikButton>
}
</div>
}
</EditForm>
</td>
</tr>
</table>
@code {
protected List<DataItem> Items { get; set; }
protected override void OnInitialized()
{
Items = new List<DataItem>();
for (var i = 1; i <= 10; i++)
{
Items.Add(new DataItem { TextValue = $"This is item number {i}." });
}
}
public class DataItem
{
public string TextValue { get; set; }
}
}
Hi!
I'm building a Blazor Component using your TelerikChart. To build my chart, I'm dynamically inserting the series name and the series data, which is pulled from a list. I also have a button on the page that changes the dataset (last month, this month, next month, etc). The button will rebuild the list of names and data, and Blazor will build the chart with a 'foreach' entry in the ChartSeriesItems section of the Chart Component.
The problem is that the Items are not cleared each time. When I click the button, I'm getting previous values. In the example below, I have 3 data sets. The first has 4 items, the second has 8 and the third has 6. If the user clicks the second, showing all 8, then clicks the first, the chart will show the new 4, and the previous 5-8 from the second set.
My chart description in HTML is:
...
<ChartSeriesItems>
@foreach(Tuple<string, object[]> t in myData)
{
<ChartSeries Type="ChartSeriesType.Column" Name=@t.Item1 Data=@t.Item2 />
}
</ChartSeriesItems>
...
I have checked my data through debugging to ensure that the myData variable is correct (i.e. when I click the first data, it only has 4 items). However, when the chart displays, it shows 8 items.
Is there a CLEARDATA method or something I can call on the Chart to ensure that the data is reset each time? I see that there is a Clear() in JavaScript, but I'm writing in only Blazor and C#, with no JavaScript.
I've attached the .razor page for your reference. (As this is my test code, I'm using random number generation to get the data.)
Thank you so much for your help!!
-Cheryl Simpson
Here is a TelerikForm with a FormItem (1) for a boolean field. Another FormItem (2) should render, depending on the boolean field (1). This does not work with a TelerikForm, but works with a standard EditForm.
The workaround for a TelerikForm is to use a FormItem Template with a TelerikCheckBox. This is demonstrated below as well.
<EditForm Model="@_data">
<label>Condition 1 (InputCheckbox):</label>
<InputCheckbox @bind-Value="@_data.Value1" />
<br />
@if (_data.Value1)
{
<label>Result 2</label>
<InputCheckbox DisplayName="Result 2:" @bind-Value="@_data.Value2"></InputCheckbox>
}
</EditForm>
<h1>TelerikForm</h1>
<TelerikForm Model="@_data">
<FormItems>
<FormItem LabelText="Condition 1 (FormItem):" Field="@nameof(_data.Value1)"></FormItem>
<FormItem>
<Template>
<label for="x">Condition 1 (TelerikCheckBox):</label>
<br />
<TelerikCheckBox Id="x" @bind-Value="_data.Value1" />
</Template>
</FormItem>
@if (_data.Value1)
{
<FormItem LabelText="Result 2:" Field="@nameof(_data.Value2)"></FormItem>
}
</FormItems>
</TelerikForm>
@code {
private ExampleDto _data { get; set; } = new ExampleDto();
public class ExampleDto
{
public string TextValue { get; set; }
public bool Value1 { get; set; }
public bool Value2 { get; set; }
}
}
Using mobile browser (Safari iOS or Chrome Android)
Go to demo grid page
https://demos.telerik.com/blazor-ui/grid/overview
Click any grid's filter menu which contains text field
Try to enter text into textbox.
The filter menu automatically closed, so you can't enter anything
---
ADMIN EDIT
this happens because the keyboard pops up, changes the screen size and may even scroll the page, and both of these events hide the popup menu.
A workaround could be using the filter row mode, with the caveat that it takes up more space on the initial rendering, and that filtering happens immediately.
---
I want to dynamically change the TileLayout Reorderable parameter but the component does not react to that change. Dynamic change in the Resizable parameter is also not applied.
I am also trying to change the TileLayoutItem ColSpan dynamically - for example, when implementing it in a responsive layout (https://docs.telerik.com/blazor-ui/knowledge-base/tilelayout-responsive) but using a variable as the ColSpan value does nothing. The TileLayout does not react to a change in the ColSpan parameter either.
It would be nice if the TelerikTileLayout could be told to refresh itself or to refresh after some of its parameters is changed.