|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | title: Editing in Blazor DataGrid | Syncfusion |
4 | | -description: Checkout and learn here all about Editing in Syncfusion Blazor DataGrid and much more details. |
| 4 | +description: Discover comprehensive details about editing features in the Syncfusion Blazor DataGrid, including how to enable and customize them. |
5 | 5 | platform: Blazor |
6 | 6 | control: DataGrid |
7 | 7 | documentation: ug |
@@ -1621,6 +1621,198 @@ public class OrderData |
1621 | 1621 |
|
1622 | 1622 | {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBTWrDHUvvLUGmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} |
1623 | 1623 |
|
| 1624 | +## Perform CRUD operation using Blazor DataGrid events |
| 1625 | + |
| 1626 | +The Syncfusion Blazor DataGrid enables seamless CRUD (Create, Read, Update and Delete) operations directly with `IQueryable` data from a database without requiring additional data adaptors. This functionality can be implemented using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property of the Grid and handling the necessary CRUD actions through Grid events such as [RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdated)and [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting). |
| 1627 | + |
| 1628 | +### Create an interface layer to the database |
| 1629 | + |
| 1630 | +Define the `Book` model class along with the `ILibraryService` interface. The Book model will represent the data structure for the books, and the `ILibraryService` interface will define the CRUD methods to interact with the database. |
| 1631 | + |
| 1632 | +**Book Model** |
| 1633 | + |
| 1634 | +The Book model represents the structure of a book in a library system. It includes essential properties such as Id, Name, Author, Quantity, Price, and Available. |
| 1635 | + |
| 1636 | +```cs |
| 1637 | +public class Book |
| 1638 | +{ |
| 1639 | + public long Id { get; set; } |
| 1640 | + public string Name { get; set; } = null!; |
| 1641 | + public string Author { get; set; } = null!; |
| 1642 | + public int? Quantity { get; set; } |
| 1643 | + public int Price { get; set; } |
| 1644 | + public bool? Available { get; set; } |
| 1645 | +} |
| 1646 | +``` |
| 1647 | + |
| 1648 | +**ILibraryService Interface** |
| 1649 | + |
| 1650 | +The `ILibraryService` interface declares the CRUD operations that interact with the database for managing `Book` data. |
| 1651 | + |
| 1652 | +```csharp |
| 1653 | +using System.Collections.Generic; |
| 1654 | +using System.Linq; |
| 1655 | + |
| 1656 | +namespace LibraryManagement.Models |
| 1657 | +{ |
| 1658 | + interface ILibraryService |
| 1659 | + { |
| 1660 | + IQueryable<Book> GetBooks(); |
| 1661 | + void InsertBook(Book employee); |
| 1662 | + void UpdateBook(long id, Book employee); |
| 1663 | + Book SingleBook(long id); |
| 1664 | + void DeleteBook(long id); |
| 1665 | + } |
| 1666 | +} |
| 1667 | +``` |
| 1668 | + |
| 1669 | +### Create an intermediate service using the interface |
| 1670 | + |
| 1671 | +Now, implement the `ILibraryService` interface in a service class. This service interacts with the database using Entity Framework and performs CRUD operations. |
| 1672 | + |
| 1673 | +```csharp |
| 1674 | +using Microsoft.EntityFrameworkCore; |
| 1675 | +using System.Linq; |
| 1676 | + |
| 1677 | +namespace LibraryManagement.Models |
| 1678 | +{ |
| 1679 | + public class LibraryService : ILibraryService |
| 1680 | + { |
| 1681 | + private LibraryContext _context; |
| 1682 | + public LibraryService(LibraryContext context) |
| 1683 | + { |
| 1684 | + _context = context; |
| 1685 | + } |
| 1686 | + |
| 1687 | + public void DeleteBook(long id) |
| 1688 | + { |
| 1689 | + try |
| 1690 | + { |
| 1691 | + Book ord = _context.Books.Find(id); |
| 1692 | + _context.Books.Remove(ord); |
| 1693 | + _context.SaveChanges(); |
| 1694 | + } |
| 1695 | + catch |
| 1696 | + { |
| 1697 | + throw; |
| 1698 | + } |
| 1699 | + } |
| 1700 | + |
| 1701 | + public IQueryable<Book> GetBooks() |
| 1702 | + { |
| 1703 | + try |
| 1704 | + { |
| 1705 | + return _context.Books.AsQueryable(); |
| 1706 | + } |
| 1707 | + catch |
| 1708 | + { |
| 1709 | + throw; |
| 1710 | + } |
| 1711 | + } |
| 1712 | + |
| 1713 | + public void InsertBook(Book book) |
| 1714 | + { |
| 1715 | + try |
| 1716 | + { |
| 1717 | + _context.Books.Add(book); |
| 1718 | + _context.SaveChanges(); |
| 1719 | + } |
| 1720 | + catch |
| 1721 | + { |
| 1722 | + throw; |
| 1723 | + } |
| 1724 | + } |
| 1725 | + public void UpdateBook(long id, Book book) |
| 1726 | + { |
| 1727 | + try |
| 1728 | + { |
| 1729 | + var local = _context.Set<Book>().Local.FirstOrDefault(entry => entry.Id.Equals(book.Id)); |
| 1730 | + // check if local is not null |
| 1731 | + if (local != null) |
| 1732 | + { |
| 1733 | + // detach |
| 1734 | + _context.Entry(local).State = EntityState.Detached; |
| 1735 | + } |
| 1736 | + _context.Entry(book).State = EntityState.Modified; |
| 1737 | + _context.SaveChanges(); |
| 1738 | + } |
| 1739 | + catch |
| 1740 | + { |
| 1741 | + throw; |
| 1742 | + } |
| 1743 | + } |
| 1744 | + } |
| 1745 | +} |
| 1746 | +``` |
| 1747 | + |
| 1748 | +### Configure the DataGrid to perform CRUD actions using Blazor DataGrid events |
| 1749 | + |
| 1750 | +To perform CRUD (Create, Read, Update, and Delete) operations with the Syncfusion Blazor DataGrid and keep your database in sync, handle the relevant Grid events. Since data is bound to the Grid using the `DataSource` property, you must explicitly update your backend in response to user actions. |
| 1751 | + |
| 1752 | +**RowUpdated:** Triggered when a record is added or edited. Use this event to insert or update the record in your database. |
| 1753 | + |
| 1754 | +**RowDeleting:** Triggered when a record is deleted. Use this event to remove the record from your database. |
| 1755 | + |
| 1756 | +Below is an example showing how to wire up these events to perform CRUD operations using a service: |
| 1757 | + |
| 1758 | +```cs |
| 1759 | +@page "/counter" |
| 1760 | +@rendermode InteractiveAuto |
| 1761 | + |
| 1762 | +@using Syncfusion.Blazor.Data |
| 1763 | +@using BlazorWebApp.Shared.Models |
| 1764 | +@using BlazorWebApp.Shared.Services |
| 1765 | + |
| 1766 | +@inject ClientServices clientlibrary |
| 1767 | + |
| 1768 | +<SfGrid DataSource="@LibraryBooks" |
| 1769 | + Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })" |
| 1770 | + TValue="Book"> |
| 1771 | + <GridEditSettings AllowAdding="true" |
| 1772 | + AllowDeleting="true" |
| 1773 | + AllowEditing="true" |
| 1774 | + Mode="EditMode.Normal"></GridEditSettings> |
| 1775 | + <GridEvents RowDeleting="RowDeleting" |
| 1776 | + RowUpdated="RowUpdated" |
| 1777 | + TValue="Book"></GridEvents> |
| 1778 | + <GridColumns> |
| 1779 | + <GridColumn Field="@nameof(Book.Id)" IsPrimaryKey="true" IsIdentity="true" Visible="false"></GridColumn> |
| 1780 | + <GridColumn Field="@nameof(Book.Name)" Width="150"></GridColumn> |
| 1781 | + <GridColumn Field="@nameof(Book.Author)" Width="150"></GridColumn> |
| 1782 | + <GridColumn Field="@nameof(Book.Quantity)" Width="90" TextAlign="TextAlign.Right"></GridColumn> |
| 1783 | + <GridColumn Field="@nameof(Book.Price)" Width="90" Format="C2" TextAlign="TextAlign.Right"></GridColumn> |
| 1784 | + <GridColumn Field="@nameof(Book.Available)" DisplayAsCheckBox="true" Width="70"></GridColumn> |
| 1785 | + </GridColumns> |
| 1786 | +</SfGrid> |
| 1787 | + |
| 1788 | +@code { |
| 1789 | + public List<Book> LibraryBooks { get; set; } = new(); |
| 1790 | + |
| 1791 | + protected override async Task OnInitializedAsync() |
| 1792 | + { |
| 1793 | + LibraryBooks = await clientlibrary.GetBooks(); |
| 1794 | + } |
| 1795 | + public async Task RowDeleting(RowDeletingEventArgs<Book> args) |
| 1796 | + { |
| 1797 | + await clientlibrary.RemoveBook(args.Datas[0].Id); |
| 1798 | + } |
| 1799 | + public async Task RowUpdated(RowUpdatedEventArgs<Book> args) |
| 1800 | + { |
| 1801 | + if (args.Action == SaveActionType.Added) |
| 1802 | + { |
| 1803 | + await clientlibrary.InsertBook(args.Data); // Handle insert. |
| 1804 | + } |
| 1805 | + else if (args.Action == SaveActionType.Edited) |
| 1806 | + { |
| 1807 | + await clientlibrary.UpdateBook(args.Data.Id, args.Data); // Handle update. |
| 1808 | + } |
| 1809 | + } |
| 1810 | +} |
| 1811 | +``` |
| 1812 | + |
| 1813 | +This approach ensures that all CRUD actions performed in the Grid are synchronized with your backend data source. |
| 1814 | + |
| 1815 | +> You can find the sample in the following [Github](https://github.com/SyncfusionExamples/blazor-server-datagrid-efcore-crud/) repository. |
1624 | 1816 |
|
1625 | 1817 | ## See also |
1626 | 1818 |
|
|
0 commit comments