From ca33b8644647a784fccd24ea257fe46ad36d73d4 Mon Sep 17 00:00:00 2001 From: Nithya Date: Mon, 9 Jun 2025 10:49:44 +0530 Subject: [PATCH 1/7] 936998: Editing correction --- blazor/datagrid/edit-types.md | 2 + blazor/datagrid/editing.md | 194 ++++++++++++++++++++++++++++++++++ 2 files changed, 196 insertions(+) diff --git a/blazor/datagrid/edit-types.md b/blazor/datagrid/edit-types.md index 81ea70011b..dfd413661a 100644 --- a/blazor/datagrid/edit-types.md +++ b/blazor/datagrid/edit-types.md @@ -1739,6 +1739,8 @@ public class EmployeeData ![Render images in the DropDownList editor using the ItemTemplate](./images/blazor-datagrid-render-image-using-item-template.gif) +> You can find the sample in the following [Github](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/Render-image-in-dropdownlist) repository. + ### Render multiple columns in DropDownList The Syncfusion Blazor DataGrid allows you to render a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) within the Grid's edit form for a specific column. This feature is particularly useful when you want to display more detailed information for each item in the `SfDropDownList` while editing a column. diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md index 7f0e4f3df7..bbbd997e24 100644 --- a/blazor/datagrid/editing.md +++ b/blazor/datagrid/editing.md @@ -1621,6 +1621,200 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBTWrDHUvvLUGmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Perform CRUD operation using Blazor DataGrid events + +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 [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating), [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) and [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting). + +### Create an interface layer to the database + +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. + +**Book Model** + +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. + +```cs +public class Book +{ + public long Id { get; set; } + public string Name { get; set; } = null!; + public string Author { get; set; } = null!; + public int? Quantity { get; set; } + public int Price { get; set; } + public bool? Available { get; set; } +} +``` + +**ILibraryService Interface** + +The `ILibraryService` interface declares the CRUD operations that interact with the database for managing `Book` data. + +```csharp +using System.Collections.Generic; +using System.Linq; + +namespace LibraryManagement.Models +{ + interface ILibraryService + { + IQueryable GetBooks(); + void InsertBook(Book employee); + void UpdateBook(long id, Book employee); + Book SingleBook(long id); + void DeleteBook(long id); + } +} +``` + +### Create an intermediate service using the interface + +Now, implement the `ILibraryService` interface in a service class. This service interacts with the database using Entity Framework. + +```csharp +using Microsoft.EntityFrameworkCore; +using System.Linq; + +namespace LibraryManagement.Models +{ + public class LibraryService : ILibraryService + { + private LibraryContext _context; + public LibraryService(LibraryContext context) + { + _context = context; + } + + public void DeleteBook(long id) + { + try + { + Book ord = _context.Books.Find(id); + _context.Books.Remove(ord); + _context.SaveChanges(); + } + catch + { + throw; + } + } + + public IQueryable GetBooks() + { + try + { + return _context.Books.AsQueryable(); + } + catch + { + throw; + } + } + + public void InsertBook(Book book) + { + try + { + _context.Books.Add(book); + _context.SaveChanges(); + } + catch + { + throw; + } + } + public void UpdateBook(long id, Book book) + { + try + { + var local = _context.Set().Local.FirstOrDefault(entry => entry.Id.Equals(book.Id)); + // check if local is not null + if (local != null) + { + // detach + _context.Entry(local).State = EntityState.Detached; + } + _context.Entry(book).State = EntityState.Modified; + _context.SaveChanges(); + } + catch + { + throw; + } + } + } +} +``` + +### Configure the DataGrid to perform CRUD actions using Blazor DataGrid events + +To implement CRUD (Create, Read, Update, and Delete) operations with the Syncfusion Blazor DataGrid and ensure changes are reflected in your database, handle the relevant Grid action events. The Grid binds to your data using the `DataSource` property, but you must explicitly update the database in response to user actions. + +**RowCreating:** Triggered when a new record is added. Use this event to insert the new record into your database. + +**RowEditing:** Triggered when a record is updated. Use this event to update the corresponding record in your database. + +**RowDeleting:** Triggered when a record is deleted. Use this event to remove the record from your database. + +Below is an example demonstrating how to wire up these events to perform CRUD operations using a service: + +```cs +@page "/counter" +@rendermode InteractiveAuto + +@using Syncfusion.Blazor.Data +@using BlazorWebApp.Shared.Models +@using BlazorWebApp.Shared.Services + +@inject ClientServices clientlibrary + + + + + + + + + + + + + + +@code { + public List LibraryBooks { get; set; } = new(); + + protected override async Task OnInitializedAsync() + { + LibraryBooks = await clientlibrary.GetBooks(); + } + + public async Task RowCreating(RowCreatingEventArgs args) + { + await clientlibrary.InsertBook(args.Data); + } + + public async Task RowEditing(RowEditingEventArgs args) + { + await clientlibrary.UpdateBook(args.Data.Id, args.Data); + } + public async Task RowDeleting(RowDeletingEventArgs args) + { + await clientlibrary.RemoveBook(args.Datas[0].Id); + } +} +``` + +This approach ensures that all CRUD actions performed in the Grid are synchronized with your backend data source. + +> You can find the sample in the following [Github](https://github.com/SyncfusionExamples/blazor-server-datagrid-efcore-crud/) repository. ## See also From cbc7ebd15063638de8c3cb4c4f5e70afd53d813f Mon Sep 17 00:00:00 2001 From: Nithya Date: Mon, 9 Jun 2025 11:22:47 +0530 Subject: [PATCH 2/7] 936998: toc correction --- blazor-toc.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/blazor-toc.html b/blazor-toc.html index 44ad0b59b5..db27b85745 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1841,13 +1841,17 @@ +
  • Connecting to Adaptors
  • Connecting to Database From d0d80a255924684f67c49cfa62844ece2182ba12 Mon Sep 17 00:00:00 2001 From: Nithya Date: Mon, 9 Jun 2025 13:27:18 +0530 Subject: [PATCH 3/7] 936998: Editing --- blazor/datagrid/edit-types.md | 6 +++--- blazor/datagrid/editing.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/datagrid/edit-types.md b/blazor/datagrid/edit-types.md index dfd413661a..e86f1993a6 100644 --- a/blazor/datagrid/edit-types.md +++ b/blazor/datagrid/edit-types.md @@ -1,7 +1,7 @@ --- layout: post title: Edit Types in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Edit Types in Syncfusion Blazor DataGrid and much more details. +description: Learn about the different edit types available in the Syncfusion Blazor DataGrid, how to customize them in the Grid, and much more. platform: Blazor control: DataGrid documentation: ug @@ -855,13 +855,13 @@ public class OrderData ## Customize TimePicker of TimePickerEdit Type -You can customize the [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-with-web-app) in the Grid edit form for time data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfTimePicker` to meet your specific requirements. The [TimeEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TimeEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid. +You can customize the [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-webapp) in the Grid edit form for time data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfTimePicker` to meet your specific requirements. The [TimeEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TimeEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid. The table below highlights the key aspects of customizing a `SfTimePicker` using the `EditorSettings` property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html): | Component | Edit Type | Description | Example Customized Edit Params | |------------|--------------|----------------------------------------------------------------------------------------------------------|---------------------------------| -| [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-with-web-app) | TimePickerEdit | The `TimePickerEdit` type renders a `SfTimePicker` for time data type columns. To customize the `SfTimePicker`, refer to the [SfTimePicker API documentation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) for detailed information on available properties. | Params: { Value: new Date() } | +| [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-webapp) | TimePickerEdit | The `TimePickerEdit` type renders a `SfTimePicker` for time data type columns. To customize the `SfTimePicker`, refer to the [SfTimePicker API documentation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) for detailed information on available properties. | Params: { Value: new Date() } | Below is an example demonstrating how to customize the `SfTimePicker` for the **OrderTime** column in the Grid: diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md index bbbd997e24..0220c30343 100644 --- a/blazor/datagrid/editing.md +++ b/blazor/datagrid/editing.md @@ -1,7 +1,7 @@ --- layout: post title: Editing in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Editing in Syncfusion Blazor DataGrid and much more details. +description: Discover comprehensive details about editing features in the Syncfusion Blazor DataGrid, including how to enable and customize them. platform: Blazor control: DataGrid documentation: ug From ef1ac21afaa133d6540a7a75a1d7851f3099f29e Mon Sep 17 00:00:00 2001 From: Nithya Date: Mon, 9 Jun 2025 14:02:14 +0530 Subject: [PATCH 4/7] 936998: correction --- blazor/datagrid/edit-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/datagrid/edit-types.md b/blazor/datagrid/edit-types.md index e86f1993a6..ec4726f9a3 100644 --- a/blazor/datagrid/edit-types.md +++ b/blazor/datagrid/edit-types.md @@ -748,7 +748,7 @@ public class OrderData ## Customize DatePicker of DatePickerEdit Type -You can customize the [SfDatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started-with-web-app) in the Grid edit form for date data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfDatePicker` to meet your specific requirements. The [DateEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DatePickerEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid. +You can customize the [SfDatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started-with-web-app) in the Grid edit form for date data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfDatePicker` to meet your specific requirements. The [DateEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DateEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid. The table below highlights the key aspects of customizing a `SfDatePicker` using the `EditorSettings` property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html): From 7a2edeb1f69db202fc2bcd4dd58b317afacf5382 Mon Sep 17 00:00:00 2001 From: Nithya Date: Mon, 9 Jun 2025 14:44:57 +0530 Subject: [PATCH 5/7] 936998: correction --- blazor/datagrid/editing.md | 58 ++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md index 0220c30343..ac816950ac 100644 --- a/blazor/datagrid/editing.md +++ b/blazor/datagrid/editing.md @@ -1623,7 +1623,7 @@ public class OrderData ## Perform CRUD operation using Blazor DataGrid events -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 [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating), [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) and [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting). +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). ### Create an interface layer to the database @@ -1747,15 +1747,13 @@ namespace LibraryManagement.Models ### Configure the DataGrid to perform CRUD actions using Blazor DataGrid events -To implement CRUD (Create, Read, Update, and Delete) operations with the Syncfusion Blazor DataGrid and ensure changes are reflected in your database, handle the relevant Grid action events. The Grid binds to your data using the `DataSource` property, but you must explicitly update the database in response to user actions. +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. The Grid binds to your data using the `DataSource` property, but you must explicitly update your backend in response to user actions. -**RowCreating:** Triggered when a new record is added. Use this event to insert the new record into your database. - -**RowEditing:** Triggered when a record is updated. Use this event to update the corresponding record in your database. +**RowUpdated:** Triggered when a record is added or edited. Use this event to insert or update the record in your database. **RowDeleting:** Triggered when a record is deleted. Use this event to remove the record from your database. -Below is an example demonstrating how to wire up these events to perform CRUD operations using a service: +Below is an example showing how to wire up these events to perform CRUD operations using a service: ```cs @page "/counter" @@ -1768,23 +1766,22 @@ Below is an example demonstrating how to wire up these events to perform CRUD op @inject ClientServices clientlibrary + Toolbar="@(new List { "Add", "Edit", "Delete", "Cancel", "Update" })" + TValue="Book"> - + AllowDeleting="true" + AllowEditing="true" + Mode="EditMode.Normal"> + - - - - - - + + + + + + @@ -1793,21 +1790,22 @@ Below is an example demonstrating how to wire up these events to perform CRUD op protected override async Task OnInitializedAsync() { - LibraryBooks = await clientlibrary.GetBooks(); + LibraryBooks = await clientlibrary.GetBooks(); } - - public async Task RowCreating(RowCreatingEventArgs args) + public async Task RowDeleting(RowDeletingEventArgs args) { - await clientlibrary.InsertBook(args.Data); + await clientlibrary.RemoveBook(args.Datas[0].Id); } - - public async Task RowEditing(RowEditingEventArgs args) + public async Task RowUpdated(RowUpdatedEventArgs args) { - await clientlibrary.UpdateBook(args.Data.Id, args.Data); + if (args.Action == SaveActionType.Added) + { + await clientlibrary.InsertBook(args.Data); // Handle insert. } - public async Task RowDeleting(RowDeletingEventArgs args) + else if (args.Action == SaveActionType.Edited) { - await clientlibrary.RemoveBook(args.Datas[0].Id); + await clientlibrary.UpdateBook(args.Data.Id, args.Data); // Handle update. + } } } ``` From d7fb784a588824c596968c5c5d0f309797348981 Mon Sep 17 00:00:00 2001 From: NithyaSivaprakasam <103498896+NithyaSivaprakasam@users.noreply.github.com> Date: Fri, 13 Jun 2025 16:32:40 +0530 Subject: [PATCH 6/7] Update blazor-toc.html --- blazor-toc.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/blazor-toc.html b/blazor-toc.html index db27b85745..0a3cbe5fbb 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1841,9 +1841,6 @@ -
  • Connecting to Adaptors
  • Connecting to Database From 9c56f6925907d122f44bfc21a2464b8c7031033c Mon Sep 17 00:00:00 2001 From: NithyaSivaprakasam <103498896+NithyaSivaprakasam@users.noreply.github.com> Date: Fri, 13 Jun 2025 16:38:17 +0530 Subject: [PATCH 7/7] Update blazor-toc.html --- blazor-toc.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor-toc.html b/blazor-toc.html index 0a3cbe5fbb..44ad0b59b5 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1847,7 +1847,7 @@
  • URL Adaptor
  • ODataV4 Adaptor
  • Web API Adaptor
    • -
  • Custom Adaptor
    • +
  • Custom Adaptor
  • Connecting to Database