In Development
Last Updated: 22 Jun 2020 06:27 by ADMIN
Igor
Created on: 13 Dec 2019 09:01
Category: UI for Blazor
Type: Feature Request
11
Data binding to an ObservableCollection for the all components

WPF and Xamarin supports data binding to INotifyCollectionChanged (ObservableCollection) and INotifyPropertyChanged.

This binding scenario is widely used.

So implementation of this feature allows WPF and Xamarin developers use their experience and code base in Blazor.

6 comments
ADMIN
Marin Bratanov
Posted on: 24 Jan 2020 13:49

The upcoming 2.7.0 release will implement this for the AutoComplete, ComboBox, DropDownList, MultiSelect and TreeView, in addition to the Grid that already has this feature. In future releases other components will receive this too (at the time of writing, the Menu and the Scheduler remain).

--Marin

ADMIN
Marin Bratanov
Posted on: 01 Jan 2020 19:10

Hi Igor,

This re-rendering happens without us doing it explicitly. Thus, adding another handler to PropertyChanged just adds more code to be executed, and we will also have to add if-checks everywhere it might be used to check if an event handler needs to be called to re-read the data. I think that  this is actually more likely to cause performance issues than the standard blazor re-rendering. Nevertheless, this is something the dev team will review when we get to working on this task.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Igor
Posted on: 01 Jan 2020 14:43

Hello, Martin

I checked your example and saw that both the TelerikGrid and the html table are updated when the value of Name property changes. This is due to the fact that all bound (displayed) properties of all elements of the source collection are reread (perhaps fully rerendered). It is possible in the case of long-term calculated properties or a large number of source collection elements or frequent changes, this will negatively affect performance. If the telerik grid subscribes to the PropertyChanged event, it will be able to read and rerender the value of only one property of only one element of the source collection.

  • Добавить в Словарь
    • Новый список слов для Английский -> Русский...
    • Создать новый список слов...
  • Копировать
  • Добавить в Словарь
    • Новый список слов для Английский -> Русский...
    • Создать новый список слов...
  • Копировать
ADMIN
Marin Bratanov
Posted on: 13 Dec 2019 15:27

Hello Igor,

Changing values should update the UI because Blazor should be monitoring this already. I am not sure this is something that must be logged. Give it a try on a simple page like this:

<TelerikButton OnClick="@UpdateRow2">Change row 2</TelerikButton>

<TelerikGrid Data="@MyData">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Team</th>
            <th>Hire Date</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var row in MyData)
        {
            <tr>
                <td>@row.Id</td>
                <td>@row.Name</td>
                <td>@row.Team</td>
                <td>@row.HireDate</td>
            </tr>
        }
    </tbody>
</table>

@code {
    void UpdateRow2()
    {
        MyData[1].Name = DateTime.Now.ToString();
    }

    public List<SampleData> MyData = Enumerable.Range(1, 5).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    }).ToList();

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Igor
Posted on: 13 Dec 2019 11:23
Hello Marin,


Do you know the best place where PropertyChanged event subscribing feature can be requested?
ADMIN
Marin Bratanov
Posted on: 13 Dec 2019 10:25

Hello Igor,

I updated the title to better explain what could be done (especially for people who are not familiar with WPF/Xamarin), and I also removed the leftover bits from the translator for clarity. I must also say that it is not very likely that we will subscribe to the PropertyChanged event, this is something the framework should do, we will probably only use the CollectionChanged event, like in the grid.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor