In Development
Last Updated: 19 Aug 2019 15:18 by ADMIN
Scheduled for 1.6.0
When you change the data source of the treeview and the new data has a different set of Expanded states than the old data, you will get a `Microsoft.JSInterop.JSException: 'Cannot read property 'scrollHeight' of null` in VS. It will also fail to show you proper debug information, symbols and source code.


Simple Repro

@using Telerik.Blazor.Components.TreeView
 
<button class="btn btn-primary" @onclick="@(() => ChangeTreeData(false))">Change tree data</button>
 
<TelerikTreeView Data="@FlatData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding ParentIdField="Parent" ExpandedField="IsExpanded"></TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>
 
@code {
    public List<TreeItem> FlatData { get; set; } = new List<TreeItem>();
 
    public class TreeItem //most fields use the default names and will bind automatically in this example
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? Parent { get; set; } //this is a non-default field name
        public bool HasChildren { get; set; }
        public bool IsExpanded { get; set; } //this is a non-default field name
    }
 
    protected override void OnInit()
    {
        ChangeTreeData(true);
    }
 
    int currIndex { get; set; } = 0;
 
    void ChangeTreeData(bool expandItems)
    {
        currIndex++;
 
        FlatData.Clear();
 
        List<TreeItem> data = new List<TreeItem>();
 
        data.Add(new TreeItem { Id = currIndex, HasChildren = true, IsExpanded = expandItems, Parent = null, Text = $"root {currIndex}" });
        data.Add(new TreeItem { Id = currIndex + 1, HasChildren = false, IsExpanded = expandItems, Parent = currIndex, Text = $"root {currIndex}: child one" });
 
        FlatData.AddRange(data);
    }
 
}
Declined
Last Updated: 19 Aug 2019 15:16 by ADMIN

Add the following Razor component and run. Click around tree, especially from disclosure icon to node to 'plus' icon. Error will occur.

 

=====================================

@page "/poopy"


@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button

<style>
    .k-mid:hover .showme {
        display: block;
    }

    .showme {
        display: none;
        margin-left: 10px;
    }

    .showhim:hover .showme {
        display: block;
    }
</style>


@using Telerik.Blazor.Components.TreeView

<TelerikTreeView Data="@TreeData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
            <ItemTemplate>
                <div @onclick="@(_ => NodeClicked((context as TreeItem).Text))" style="cursor: pointer">@((context as TreeItem).Text)</div>
                <div class="showme" @onclick="SayHelloHandler" style="cursor: pointer">
                    <TelerikIcon IconName="@IconName.Plus" />
                </div>
            </ItemTemplate>
        </TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>

@helloString

@code {
    MarkupString helloString;

    void NodeClicked(string node)
    {
        helloString = new MarkupString(node);
    }


    void SayHelloHandler()
    {
        string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
        helloString = new MarkupString(msg);
    }


    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> TreeData { get; set; }

    protected override void OnInitialized()
    {
        LoadTreeData();
    }

    private void LoadTreeData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });

        TreeData = items;
    }
}

======================================

Microsoft.JSInterop.JSException

  HResult=0x80131500
  Message=Cannot read property 'scrollHeight' of null
TypeError: Cannot read property 'scrollHeight' of null
    at Object.r (https://localhost:44326/_content/telerik.ui.for.blazor.trial/js/telerik-blazor.js:1:1433)
    at https://localhost:44326/_framework/blazor.server.js:8:28347
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44326/_framework/blazor.server.js:8:28316)
    at https://localhost:44326/_framework/blazor.server.js:1:19148
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44326/_framework/blazor.server.js:1:19119)
    at e.processIncomingData (https://localhost:44326/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (https://localhost:44326/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (https://localhost:44326/_framework/blazor.server.js:1:38027)
  Source=System.Private.CoreLib
  StackTrace:
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Microsoft.JSInterop.JSRuntimeBase.<InvokeWithDefaultCancellation>d__13`1.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<GetContentHeight>d__57.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<SetMaxHeight>d__56.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_1(Object state)
   at System.Threading.QueueUserWorkItemCallback.<>c.<.cctor>b__6_0(QueueUserWorkItemCallback quwi)
   at System.Threading.ExecutionContext.RunForThreadPoolUnsafe[TState](ExecutionContext executionContext, Action`1 callback, TState& state)
   at System.Threading.QueueUserWorkItemCallback.Execute()
   at System.Threading.ThreadPoolWorkQueue.Dispatch()
In Development
Last Updated: 19 Aug 2019 13:04 by ADMIN
Scheduled for 1.6.0
Created by: Carl
Comments: 3
Category: UI for Blazor
Type: Feature Request
3

A basic Menu control is one of the most fundamental common controls ....  Why was it not included in the first release of UI for Blazor???

How about a basic fundamental Menu control in the UI for Blazor?   If not now, when?

Won't Fix
Last Updated: 19 Aug 2019 04:41 by ADMIN
Created by: nonick
Comments: 2
Category: UI for Blazor
Type: Feature Request
1
I would love to see a Surface Chart.
Declined
Last Updated: 19 Aug 2019 04:39 by ADMIN
Created by: nonick
Comments: 2
Category: UI for Blazor
Type: Feature Request
1
Can i bind charts using lamda expressions? If i have an array of objects i may want subsets of these objects to be part of separate series on the chart. To select them i would like to be able to write expressions on each series.
Declined
Last Updated: 19 Aug 2019 04:38 by ADMIN
Created by: nonick
Comments: 2
Category: UI for Blazor
Type: Bug Report
1
Sorting in the grid is somewhat random. If i click on a column it typically cycles through 3 different values, where i would expect only 2 (first,last) to show up.
Declined
Last Updated: 19 Aug 2019 04:37 by ADMIN
Created by: Valid Development Factory
Comments: 2
Category: Charts
Type: Bug Report
1

Hi,

We tried making the name property of our TelerikChartSeries dynamic by binding it to a string value. This however seems to completely crash startup, the browser tab freezes and the console doesn't show any errors. If we just put in a simple string in the Name property the application runs without a problem.

<TelerikChartSeries Type="ChartSeriesType.Column" Name="@Team1Name" Data="@Results" Field="@nameof(ChartViewModel.Team1Score)" CategoryField="@nameof(ChartViewModel.CategoryName)">
    <TelerikChartSeriesLabels Visible="true" />
</TelerikChartSeries>

As you can see in this example we're binding the Name property to Team1Name which can be changed whenever another team is selected from a dropdownlist.

Thank you in advance.

Approved
Last Updated: 16 Aug 2019 14:01 by ADMIN

If filtering is enabled, the error may prevent the view from rendering  similar to NotImplementedException: Unexpected frame type during RemoveOldFrame: None.

Without filtering, an exception is thrown when you attempt to edit a field, similar to Error: System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Nullable`1[System.Int64]'.

Won't Fix
Last Updated: 16 Aug 2019 13:05 by ADMIN
Created by: Eric
Comments: 1
Category: UI for Blazor
Type: Bug Report
1

You may get an exception like

InvalidOperationException: The current thread is not associated with the Dispatcher. Use Invoke() or InvokeAsync() to switch execution to the Dispatcher when triggering rendering or modifying any state accessed during rendering.

or you may get components that simply don't work (for example, a Window does not show, a treeview does not expand).

The solution is to revert to the RenderComponentAsync method in your _Hosts.cshtml file.

Approved
Last Updated: 16 Aug 2019 07:44 by ADMIN
Created by: Mark Stevens
Comments: 0
Category: Charts
Type: Feature Request
1
At the moment, the charts always have a flat look, but I want the rounded (gradient) look that you get when you don't reference the theme (see attached).
Completed
Last Updated: 15 Aug 2019 12:15 by ADMIN
Release 1.5.0
Created by: Kenny
Comments: 6
Category: Grid
Type: Bug Report
12

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; }
    }
}
Completed
Last Updated: 14 Aug 2019 07:43 by ADMIN
Release 1.5.0
Created by: Eric
Comments: 0
Category: DatePicker
Type: Bug Report
1
In the following sample, the pickers should have different (distinct) formats, but they are always yyyy-MM-dd

@using Telerik.Blazor.Components.DatePicker


<TelerikDatePicker Enabled="false" @bind-Value="@HireDate" Format="MMMM/dd/yyyy"></TelerikDatePicker>
@HireDate

<br/>

<TelerikDatePicker @bind-Value="@MeetingDate" Format="MM/dd/yyyy HH:mm:ss"></TelerikDatePicker>
@MeetingDate

@code  {
DateTime HireDate { get; set; } = new DateTime(2018, 5, 6);
DateTime MeetingDate { get; set; } = new DateTime(2019, 3, 4, 15, 0, 0);
}
Pending Review
Last Updated: 13 Aug 2019 15:38 by ADMIN
Created by: Tyler
Comments: 3
Category: UI for Blazor
Type: Feature Request
1
The Notifications component I think would be a great addition to UI for Blazor!  
Use it quite often with SPAs
Declined
Last Updated: 09 Aug 2019 06:40 by ADMIN

Hello,

I'm trying the grid component and I'm able to add a row to the grid using the embbed editor. But I wanted to add an item externally to the list:


<button @onclick="@MyClick">Add item</button>

 

void MyClick()
{
    MyData.Add(new SampleData() { ID = 46, Name = "from click" });
    StateHasChanged();
}

The new line does not appear on the grid but if I add a second item through the embbed editor then I get the 2 items!

I also try to replace the List<MyData> by an ObservableCollection<MyData> unsuccessfully.

 

Thanks & regards,

 

Declined
Last Updated: 09 Aug 2019 05:26 by ADMIN
Created by: Robert
Comments: 4
Category: TabStrip
Type: Feature Request
1
There is no keepTabContent property for TabStrip. When setting that property to true in angular component, the component renders all tabs and they are persisted in the DOM.
I would like the same behavior for Blazor component.
Approved
Last Updated: 09 Aug 2019 05:14 by ADMIN
Created by: Mark Stevens
Comments: 0
Category: Charts
Type: Feature Request
1
Approved
Last Updated: 06 Aug 2019 07:40 by ADMIN

I want to be able to control the page at which the user is in the grid. I will later use that to call my own API through the OnRead event. Binding the Page parameter does not seem to work, however.

Reproducible:

@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.NumericTextBox
@using Telerik.DataSource.Extensions;
 
<TelerikNumericTextBox @bind-Value="@startPage"></TelerikNumericTextBox>
 
<TelerikGrid Data=@GridData TotalCount=@Total Page="@startPage"
             Filterable=true Sortable=true Pageable=true EditMode="inline">
    <TelerikGridEvents>
        <EventsManager OnRead=@ReadItems></EventsManager>
    </TelerikGridEvents>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(Employee.ID) />
        <TelerikGridColumn Field=@nameof(Employee.Name) Title="Name" />
        <TelerikGridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
    </TelerikGridToolBar>
</TelerikGrid>
 
There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls.
 
@code {
    int startPage { get; set; } = 2;
 
    public List<Employee> SourceData { get; set; }
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;
 
    protected override void OnInit()
    {
        SourceData = GenerateData();
    }
 
    protected async Task ReadItems(GridReadEventArgs args)
    {
        Console.WriteLine("data requested: " + args.Request);
 
        //you need to update the total and data variables
        //the ToDataSourceResult() extension method can be used to perform the operations over the full data collection
        //in a real case, you can call data access layer and remote services here instead, to fetch only the necessary data
 
        //await Task.Delay(2000); //simulate network delay from a real async call
 
        var datasourceResult = SourceData.ToDataSourceResult(args.Request);
 
        GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
        Total = datasourceResult.Total;
 
        StateHasChanged();
    }
 
    //This sample implements only reading of the data. To add the rest of the CRUD operations see
 
    private List<Employee> GenerateData()
    {
        var result = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new Employee()
            {
                ID = i,
                Name = "Name " + i,
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
            });
        }
 
        return result;
    }
 
    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

while the similar approach works without OnRead:

@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.NumericTextBox
 
<TelerikNumericTextBox @bind-Value="@startPage" Min="1"></TelerikNumericTextBox>
 
<TelerikGrid Data="@MyData" Height="300px"
             Pageable="true" Sortable="true" Page="@startPage"
             FilterMode="Telerik.Blazor.FilterMode.FilterRow">
    <TelerikGridColumns>
        <TelerikGridColumn Field="@(nameof(SampleData.Id))" />
        <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
        <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </TelerikGridColumns>
</TelerikGrid>
 
@code {
    int startPage { get; set; } = 2;
 
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });
 
    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Approved
Last Updated: 05 Aug 2019 07:12 by ADMIN
Created by: Garrett
Comments: 0
Category: Charts
Type: Bug Report
1

After updating the chart data, some elements remain in the DOM. This can clutter the browser if the data updates come in on intervals and the chart remains in operation for a while. A screenshot is attached below.

MCVE:

@using Telerik.Blazor
@using Telerik.Blazor.Components.Button
@using Telerik.Blazor.Components.Chart
 
<h3>Chart</h3>
 
 
<TelerikButton Primary="true" @onclick="AddDataPoint">Add data point</TelerikButton>
 
<TelerikChart Transitions="false">
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="CPU Usage Data" Data="@simpleData">
        </TelerikChartSeries>
    </TelerikChartSeriesItems>
 
    <TelerikChartValueAxes>
        <TelerikChartValueAxis Max="100" Color="black"></TelerikChartValueAxis>
    </TelerikChartValueAxes>
 
    <TelerikChartTitle Text="CPU Usage"></TelerikChartTitle>
 
    <TelerikChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
    </TelerikChartLegend>
</TelerikChart>
 
 
 
@code {
    void AddDataPoint()
    {
        Random random = new Random();
        var _val = Math.Round((random.NextDouble() * 100), 3);
 
        if (simpleData.Count >= 60)
        {
            simpleData = simpleData.TakeLast(59).ToList();
        }
        simpleData.Add(_val);
 
        //StateHasChanged();
 
    }
 
    public List<object> simpleData = new List<object>();
}

Approved
Last Updated: 02 Aug 2019 10:39 by ADMIN
Scheduled for 1.5.0

Reproducible below, expected results is that after editing the decimal field you'll get the data under the grid. Actual: either it does not get updated, or the value is always 0.

@using Telerik.Blazor.Components.Grid
 
 
<TelerikGrid Data=@MyData EditMode="incell" Pageable="true" Height="500px">
    <TelerikGridEvents>
        <EventsManager OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler"></EventsManager>
    </TelerikGridEvents>
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
    </TelerikGridToolBar>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
        <TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <TelerikGridColumn Field=@nameof(SampleData.SomeDecimal) Title="Some Decimal" />
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
</TelerikGrid>
 
@lastUpdateOnDecimal
 
@code {
    public void EditHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
 
        Console.WriteLine("Edit event is fired for column " + args.Field);
    }
 
    string lastUpdateOnDecimal;
 
    public void UpdateHandler(GridCommandEventArgs args)
    {
        string fieldName = args.Field;
        object newVal = args.Value; //you can cast this, if necessary, according to your model
 
        SampleData item = (SampleData)args.Item;//you can also use the entire model
 
        //perform actual data source operation here
 
        //if you have a context added through an @inject statement, you could call its SaveChanges() method
        //myContext.SaveChanges();
 
        if (fieldName == "SomeDecimal")
        {
            lastUpdateOnDecimal = $"decimal for {item.ID} updated to {newVal} on {DateTime.Now}";
        }
 
        var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
        if (matchingItem != null)
        {
            matchingItem.Name = item.Name;
        }
 
        Console.WriteLine("Update event is fired for " + args.Field + " with value " + args.Value);
    }
 
    public void CreateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
 
        //perform actual data source operation here
 
        item.ID = MyData.Count;
        MyData.Add(item);
 
        Console.WriteLine("Create event is fired.");
    }
 
    public void DeleteHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
 
        //perform actual data source operation here
 
        //if you have a context added through an @inject statement, you could call its SaveChanges() method
        //myContext.SaveChanges();
 
        MyData.Remove(item);
 
        Console.WriteLine("Delete event is fired.");
    }
 
    //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 decimal SomeDecimal { get; set; }
    }
 
    public List<SampleData> MyData { get; set; }
 
    protected override void OnInit()
    {
        MyData = new List<SampleData>();
 
        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "Name " + i.ToString(),
                SomeDecimal = i
            });
        }
    }
}

 

1 2 3 4 5 6