If seems that if databind to an ObservableCollection returned from a (synchronous) property, the DropDownList is updating as the ObservableCollection changes.
If I databind to an ObserverableCollection returned from an asynchronous method, I have to run StateHasChanged() to force the DropDownList to refresh its datasource.
Here are some snippets to demonstrate:
public class ApiDataSourceModel{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
public class DropDownModel
public string Value { get; set; }
public string Text { get; set; }
}
public async Task<ObservableCollection<DropDownModel>> GetApiDataSource()
{
//Tried returnApiDataSource as List and even here as ObservableCollection to try to get to refresh DropDownList
ObservableCollection<ApiDataSourceModel> returnApiDataSource = await GetMyApiDataSource();
if (returnApiDataSource is not null)
{
return returnApiDataSource.Select(c => new DropDownModel() { Value = MyValueField.ToString(), Text = MyTextField }).ToList().ConvertIEnumerableToObservableCollection();
}
else
return default(ObservableCollection<Models.System.DropDownModel>);
}
//Custom Extension
public static ObservableCollection<T> ConvertIEnumerableToObservableCollection<T>(this IEnumerable<T> iEnumerableCollection)
{
if (iEnumerableCollection is not null)
return new ObservableCollection<T>(iEnumerableCollection);
else
return null;
}
string selectedApiDataSourceValue;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
ObservableCollection<DropDownModel> sourceForDdl = await GetApiDataSource();
//This won't update DDL without StateHasChanged() even though DDL data is an Observable collection that has been updated.
StateHasChanged();
}
}
DropDownList
<TelerikDropDownList @bind-Value="@selectedApiDataSourceValue"
Id="ApiDataSourceField"
Data="@sourceForDdl ">
</TelerikDropDownList>
Hi,
I can set the Grid property Resizable="true" to allow the user to adjust the column width.
I want save all column width in the Localstorage to restore it after a page refresh.
How can I read the width of all columns and set at first load? I use Blazor Server.
Exists an event "OnColumnWidthResized"?
Best regards,
Peter
Is there any way to control the tooltip position? In the Kendo UI Pie Chart the tooltip is always outside the pie when I hover over a slice, however the tooltips in the Blazor grid always appear wherever my mouse cursor is and many times it will block my ability to click on the slice to fire the series click event.
Can we make the the tooltips appear outside the pie itself just like in the Kendo UI Pie Chart?
Based on the example https://demos.telerik.com/blazor-ui/datetimepicker/overview, on Cancel or Set, the Input gets focused. On the mobile, it causes the keyboard to appear as well, which is not an intuitive behaviour.
Is it possible for this behaviour to be removed?
Thanks!
Hi everybody,
the synchronization of buttons and the circle is not working correctly. Sometimes when I use one of the buttons the circle jumps back to zero or it is not moving. It seems that the buttons are using different values as the circle. You can also see this effect when using the online sample for label template (https://demos.telerik.com/blazor-ui/slider/label-template).
Curious: the online sample for overview (https://demos.telerik.com/blazor-ui/slider/overview) seems working correctly.
BTW: the same effect exists for RangeSlider component.
Best Regards, Stefan
I have a template for one of my columns that is bound to a bool property of the context object.
class Model
{
public string Name { get; set; }
public string Guid { get; set; }
public bool IsSelected { get; set; }
}
And grid columns defined like so:
<
GridColumns
>
<
GridColumn
Field
=
"@(nameof(Model.IsSelected))"
Width
=
"220px"
Title
=
"Name"
Resizable
=
"false"
>
<
Template
Context
=
"context"
>
@{
if (context is Model model)
{
<
TelerikCheckBox
Id
=
"cbIsSelected"
@
bind-Value
=
"@model.IsSelected"
/>
<
label
for
=
"cbIsSelected"
class
=
"ml-2"
>@model.Name</
label
>
}
}
</
Template
>
</
GridColumn
>
<
GridColumn
Field
=
"@(nameof(Model.Guid))"
Width
=
"330px"
/>
</
GridColumns
>
The GridSearchBox works beautifully on the Guid field, but not on the Name field. I'd like to be able to search on both. I'd appreciate guidance on how to do this.
Is it possible to use an editor in a window? The following seems to hang the application when opening the window:
@page "/test"
<
div
class
=
"container-fluid"
>
<
TelerikWindow
Left
=
"3rem"
Top
=
"2rem"
Visible
=
"@Visible"
>
<
WindowTitle
>Test</
WindowTitle
>
<
WindowActions
><
WindowAction
Name
=
"Close"
@onclick="@(() => Visible = false)" /></
WindowActions
>
<
WindowContent
>
<
TelerikEditor
@
bind-Value
=
"Body"
Width
=
"650px"
Height
=
"400px"
></
TelerikEditor
>
</
WindowContent
>
</
TelerikWindow
>
<
TelerikButton
ButtonType
=
"@ButtonType.Button"
OnClick="@(() => Visible = true)">Editor</
TelerikButton
>
</
div
>
@code{
private string Body { get; set; }
private bool Visible { get; set; }
}
Is it possible to close the edit view (edit template?) manually?