New to Telerik UI for Blazor? Download Free 30-day trial

Grid - Popup Editing

771Mountain-100 Silver, 381912.15447/1/2018 12:00:00 AM
772Mountain-100 Silver, 421912.15447/1/2018 12:00:00 AM
773Mountain-100 Silver, 441912.15447/1/2018 12:00:00 AM
774Mountain-100 Silver, 481912.15447/1/2018 12:00:00 AM
775Mountain-100 Black, 381898.09447/1/2018 12:00:00 AM
776Mountain-100 Black, 421898.09447/1/2018 12:00:00 AM
777Mountain-100 Black, 441898.09447/1/2018 12:00:00 AM
778Mountain-100 Black, 481898.09447/1/2018 12:00:00 AM
779Mountain-200 Silver, 381265.61957/1/2018 12:00:00 AM
780Mountain-200 Silver, 421265.61957/1/2018 12:00:00 AM
781Mountain-200 Silver, 461265.61957/1/2018 12:00:00 AM
782Mountain-200 Black, 381251.98137/1/2018 12:00:00 AM
783Mountain-200 Black, 421251.98137/1/2018 12:00:00 AM
784Mountain-200 Black, 461251.98137/1/2018 12:00:00 AM
785Mountain-300 Black, 38598.43543/1/2019 12:00:00 AM
  • Editing-popup.razor
  • ProductService.cs
  • ProductBindingModel.cs
Loading the demo source code...please wait.


The Telerik Grid for Blazor provides editing functionalities. You can choose between three different modes:
  • Inline
  • InCell
  • Popup
All modes support validation. This demo showcases the capabilities of the Popup editing mode. When you click on an Edit command button on a Grid row a popup window will show on top of the Grid containing all editable columns. The dialog exposes two additional command buttons - Update and Cancel to either apply the changes or to cancel the edit operation.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.