crud in datagrid with local data

[ebi torabi]

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

[Rahul Narayanasamy]

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(); 

    } 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppn-1892960225 

 

Note: We have created the above sample with latest NuGet version(17.2.0.34) and latest source(17.2.34). 

 

Help Documentation:     https://ej2.syncfusion.com/aspnet-core-blazor/documentation/grid/editing/  

Demo link:         https://ej2.syncfusion.com/aspnet-core-blazor/Grid/InlineEditing 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul 

[ebi torabi]

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)

[Rahul Narayanasamy]

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 

 

[Uwe Hein]

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

[Arun Palaniyandi]

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. 

https://www.syncfusion.com/downloads/support/forum/146116/ze/ScheduleBlazorCRUD-30590398 

Please let us know if you need further assistance.  

Regards, 

Arun P. 

[Uwe Hein]

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

[ebi torabi]

For example, thanks, but the following code does not work

var data = JsonConvert.DeserializeObject<OrdersDetails>(JsonConvert.SerializeObject(args.Data));    //for getting serialized