Blazor DataGrid: A Tutorial on Editing Modes and Cell Edit Types

Learn how easily you can enable editing options in the Syncfusion's Blazor DataGrid, and its different cell edit types. You will also see the different editing modes - Normal, Dialog, and Batch and how to add a custom editor component - AutoComplete in a Data Grid record.
The Blazor DataGrid, also known as the Blazor Grid is a feature-rich component useful for displaying data in a tabular format. Its wide range of functionalities include data binding, adaptive UI layout for all devices, editing, Excel-like filtering, custom sorting, aggregating rows, selection, and support for Excel, CSV, and PDF formats.
Download an example from GitHub:
bit.ly/3jKaXTE
Download the data binding sample from the below GitHub link:
bit.ly/2PG8TPH
TRIAL LICENSE KEY:
If you need a trial license key, start your Blazor trial from your Syncfusion account and then obtain your trial license key from the downloads page.
bit.ly/2Z6mQvg
Check if you are eligible for a free license for all the Syncfusion products on our Community License page.
bit.ly/3i4txp6
BOOKMARK DETAILS
--------------
[00:00] Blazor DataGrid - Introduction
[01:04] Enable editing with toolbar options
[02:58] Cell edit types
[04:22] Customize default cell editor controls
[05:39] Cell edit template
[07:11] Edit modes
[08:23] Disable column editing
Blazor DataGrid
------------------
Product overview: bit.ly/3jN3rau
Examples: bit.ly/2Z6mSTU
Documentation: bit.ly/2QRiaou
Download free trial: bit.ly/2EZhJWL
NuGet package: bit.ly/3ciUt13
SUBSCRIBE
----------
Syncfusion on RUclips: bit.ly/syncfusionyoutube
Sign up to receive email updates: bit.ly/syncfusionemail
SOCIAL COMMUNITIES
-------------
Facebook: / syncfusion
Twitter: / syncfusion
LinkedIn: / syncfusion
#blazordatagrid #dotnet #blazor

[@coolwaterdvr]

Amazing! 😲 👍👍👍👍👍

[@SyncfusionInc]

Thanks for your support. 😁

[@chandradev819]

What is the syntax for reading bulk updated records and saving in database ? you are just showing with mock data.

[@SyncfusionInc]

Please use a Custom way of binding data to Grid to read bulk records. With this support, you can handle the bulk update of the changed records and update those in DB in the BatchUpdate method based on your requirement and then return the data to get updated in Grid.
Please refer to the below documentation for more details,
blazor.syncfusion.com/documentation/datagrid/custom-binding/#crud-operation
Please refer to the code below.
public override object BatchUpdate(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key, int? dropIndex)
{
if (changedRecords != null)
{
//Perform your custom batch update action to db here
}
if (addedRecords != null)
{
//Perform your custom batch add action to db here
}
if (deletedRecords != null)
{
//Perform your custom batch delete action to db here
}
return Orders;
}

[@NicholasStein]

I copy your code for the toolbar and it does not show up on my grid. Do I need to add a css or iconic to my _Hosts or something like that? The double click works for inline editing, but I am not getting the toolbar buttons. I cloned your repo, compiled and ran, and it did not show the toolbar either. Your repo does not have a Startup.cs so I was unable to plug my license number into it for the old version (Version="18.1.0.56") you are using. When i loaded the repo into VS2019 16.9 Preview 1, it defaulted to netstandard2.1.

[@SyncfusionInc]

Kindly ensure the issue by adding the below codes in your sample.
_Host.cshtml

Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddSyncfusionBlazor();
}
Please refer the below documentation and the sample for your reference.
Sample - www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid246250040
Documentation:
blazor.syncfusion.com/documentation/datagrid/getting-started/
blazor.syncfusion.com/documentation/datagrid/editing/#normal
blazor.syncfusion.com/documentation/datagrid/tool-bar/

[@aisonsystem3168]

Hi !
I want to save the ID of the country in order model and after it in display mode i want to auto check the what is the name against the id and I wanna show the name of the country in the grid

[@SyncfusionInc]

Hello,
We can look into this and get back to you but response times via our RUclips videos are slower than our regular support. Have you opened a support ticket or tried our live chat? www.syncfusion.com/support/directtrac/incidents/newincident
If you have a retail or flat license, you also have access to our support chat.

[@SyncfusionInc]

Please refer to the below documentation, and in SfDropdownList of EditTemplate, kindly set the ID to Value property and Country Name to Text property.
blazor.syncfusion.com/documentation/datagrid/editing#using-dropdownlist-in-edittemplate

[@3wsystems663]

HI IEditorSettings not found it is a webmatrix tool that i need to install?..

[@3wsystems663]

jUST uPDATE TO THE NEW VERSION 18.03 AND IT WORKS.. YEA..
How can I bind this datagrid to my sql server database ?? can you put an example.. thanks

[@SyncfusionInc]

We suspect that you are facing difficulties while using this IEditorSettings property. You can customize the behavior of the editor component through the EditorSettings property of the GridColumn component. Find the below documentation for your reference.
blazor.syncfusion.com/documentation/datagrid/editing/#customizing-the-default-editor-controls
blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-type
blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template
blazor.syncfusion.com/documentation/datagrid/editing/#edit-modes
blazor.syncfusion.com/documentation/datagrid/editing/#disable-editing-for-particular-column

[@SyncfusionInc]

You can consume data from SQL Server using Microsoft SqlClient and bound it to Blazor DataGrid. You can achieve this requirement by using Custom Adaptor. Find the below link for your reference.
Reference:
blazor.syncfusion.com/documentation/datagrid/data-binding/#sql-server-data-bindingsql-client
blazor.syncfusion.com/documentation/datagrid/data-binding/#entity-framework
For performing data manipulation, you can override available methods such as Insert/InsertAsync, Update/UpdateAsync and Remove/RemoveAsync of the Custom Adaptor.
blazor.syncfusion.com/documentation/datagrid/custom-binding/
blazor.syncfusion.com/documentation/datagrid/custom-binding/#crud-operation
blazor.syncfusion.com/documentation/datagrid/custom-binding/
blazor.syncfusion.com/documentation/datagrid/custom-binding/#crud-operation
blazor.syncfusion.com/documentation/datagrid/editing/#entity-framework
blazor.syncfusion.com/documentation/datagrid/editing/#handle-crud-in-data-access-layer-class