We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. crud in datagrid with local data

crud in datagrid with local data

Hello. Please, if possible, share me with a complete example of the CRUD operation  (local data)in Datagrid.

7 Replies
RN Rahul Narayanasamy Syncfusion Team July 22, 2019 07:18 AM UTC

Hi Ebi Torabi, 
 
Greetings from Syncfusion. 
 
Query: Hello. Please, if possible, share me with a complete example of the CRUD operation  (local data)in Datagrid. 
 
We have validated your query and created a sample based on your requirement. Here, we have created a normal editing sample in local data with CRUD operations. Please find the below code example and sample for your reference. 
 
[code example] 
... 
<EjsGrid DataSource="@gridData" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Normal"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="120"></GridColumn> 
        ... 
       <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="dropdownedit" Width="150"></GridColumn> 
    </GridColumns> 
</EjsGrid> 
 
@code{ 
    public List<OrdersDetails> 
    gridData { get; set; } 
    protected override void OnInit() 
    { 
    gridData = OrdersDetails.GetAllRecords(); 
    } 
    } 
 
 
Note: We have created the above sample with latest NuGet version(17.2.0.34) and latest source(17.2.34). 
 

 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


ET ebi torabi July 23, 2019 06:31 PM UTC

Thank you very much for the example. But for me, I deleted, edited and recorded data in the database without using the WEB API(List binding data source).
(blazor hosted core)





RN Rahul Narayanasamy Syncfusion Team July 24, 2019 02:41 PM UTC

Hi Ebi Torabi, 
 
Query: Thank you very much for the example. But for me, I deleted, edited and recorded data in the database without using the WEB API(List binding data source). 
 
We have validated your query and you can achieve your requirement by using OnActionComplete with the RequestType as Save. From this event, you will get the modified data(You can get the edited data in args.Data) from it. So using the modified data you can save the changes in server. Please find the below code example and screenshot for your reference. 
 
[code example] 
... 
 
<EjsGrid DataSource="@gridData" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" OnActionComplete="@actionCompletedHandler"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Normal"></GridEditSettings> 
    <GridColumns> 
        ... 
   </GridColumns> 
</EjsGrid> 
 
@functions{ 
    public List<OrdersDetails> 
    gridData { get; set; } 
    protected override void OnInit() 
    { 
    gridData = OrdersDetails.GetAllRecords(); 
 
    } 
    public void actionCompletedHandler(ActionEventArgs args) 
    { 
        if(args.RequestType.ToString() == "Save") 
        {   //you can get edited data by using args.Data 
            var data = JsonConvert.DeserializeObject<OrdersDetails>(JsonConvert.SerializeObject(args.Data));    //for getting serialized data 
        // Here you can process your operation to store database 
        } 
    } 
    } 
 
 
[screenshot] 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 
 


UH Uwe Hein July 24, 2019 03:39 PM UTC

Hi,

   will this also work in scheduler on server-side blazor or do you need an extra controller to run EjsDataManager to perform CRUD actions ?

     regards

         Uwe

AP Arun Palaniyandi Syncfusion Team July 25, 2019 02:28 PM UTC

Hi Uwe, 

Thanks for your update. 

Query: “will this also work in scheduler on server-side blazor or do you need an extra controller to run EjsDataManager to perform CRUD actions?” 

Yes, we need to add extra controller to run EjsDataManager to perform CRUD actions for schedule remote data.  But for local data no controller is needed and can use as same like Grid. 

We have also prepared a Schedule remote data CRUD sample below for your reference. 


Please let us know if you need further assistance.  

Regards, 
Arun P. 


UH Uwe Hein July 26, 2019 07:25 AM UTC

Hi Arun,

 thank you very much for your example ! It is working fine. (on preview 7)
Is there any documentation on the various adapter types and how to use them. We cannot use EF for various reasons (we use dapper), so 

Adaptor="Adaptors.ODataV4Adaptor" 

may not be the perfect adapter type to use, as dapper does not support OData out of the box. How do you use WebApiAdapter or BlazorAdapter ?

I do not need a working example (which of course is perfect, if you can provide it). Pseudo code or links to documentation would do.

   Thanks again for your really fast response and your good support.I am aware of the fact, that Blazor is a brand new moving target and changing constantly at the moment. You do a really good job !

      regards

          Uwe





ET ebi torabi July 29, 2019 10:04 AM UTC

For example, thanks, but the following code does not work
var data = JsonConvert.DeserializeObject<OrdersDetails>(JsonConvert.SerializeObject(args.Data));    //for getting serialized 

Loader.
Up arrow icon