Telerik Forums
UI for Blazor Forum
1 answer
1.5K+ views

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>

 

 

Nadezhda Tacheva
Telerik team
 answered on 03 Feb 2021
2 answers
634 views

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


Peter
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 03 Feb 2021
1 answer
433 views

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?

Stamo Gochev
Telerik team
 answered on 03 Feb 2021
2 answers
1.4K+ views
Is there a way to get the cursor to look like a pointer when over an item, short of using the template?
Dean
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 02 Feb 2021
1 answer
104 views

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!

Marin Bratanov
Telerik team
 answered on 02 Feb 2021
1 answer
280 views
Is there a straightforward way to hide the input portion of the DatePicker and leave only the Select/Icon?
Nadezhda Tacheva
Telerik team
 answered on 01 Feb 2021
15 answers
141 views

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

Marin Bratanov
Telerik team
 answered on 01 Feb 2021
5 answers
516 views

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.

Marin Bratanov
Telerik team
 answered on 01 Feb 2021
4 answers
221 views

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; }
}
Marin Bratanov
Telerik team
 answered on 01 Feb 2021
3 answers
95 views

Is it possible to close the edit view (edit template?) manually?

 

Fredrik
Top achievements
Rank 1
Veteran
Iron
 answered on 01 Feb 2021
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?