Insert new item Observable binding

[Dimitar]

Hello,

When i click Add toolbar button i open Add New Record: http://prntscr.com/qsdnve 

1. How to hide Building Id and why it is open at all? It is set as IsPrimaryKey="true" in GridColumn definition and have HiddenInput and Key attributes: http://prntscr.com/qsg0ta

2. http://prntscr.com/qsfyzw When click save button i get this result: http://prntscr.com/qsfz8n as you can see i have same name with ID saved in database 16 and ID 0 that i not need.

public async Task ActionBeginAsync(ActionEventArgs<ViewModel> e)

        {

            if (e.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)

            {

                var result = await Context.AddOrUpdate(e.Data);

                Items.Add(result);

            }

        }

        public async Task ActionCompleteAsync(ActionEventArgs<ViewModel> args)

        {

            if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)

            {

                // Triggers once save operation completes

            }

        }

I catch the new object in ActionBegin in save action and save it in database. Then add it to ObservableCollection ( Items )

Please advise.

Regards,

Saykor

[Vignesh Natarajan]

Hi Dimitar,  

 

Greetings from Syncfusion support.  

 

Query: “How to hide Building Id and why it is open at all?” 

 

We suggest you to achieve your requirement using EditTemplate feature of EjsGrid. Since you do not want to render the input text for PrimaryKey column, we suggest you to define EditTemplate like below for that particular column.  

  

<EjsGrid @ref="Grid" DataSource="@GridData" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowFiltering="true" AllowSorting="true" AllowPaging="true"> 

<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"></GridEditSettings> 

    <GridEvents OnActionBegin="OnBegin" TValue="Order"></GridEvents> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsIdentity="true" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120">           

            <EditTemplate> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

PrimaryKey column will be in disabled state only when editing a record, while inserting a record value must be provided to primarykey column to save the record properly. Hence it is not in disabled state while inserting a record.  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/editing/#cell-edit-template  

Query2: “When click save button i get this result: http://prntscr.com/qsfz8n as you can see i have same name with ID saved in database 16 and ID 0 that i not need” 

 

From your query we suspect that you have database where its Primarykey column is Auto Increment column. So we suggest you define the PrimaryKey column as IsIdentity column to resolve your query. Refer the below code example.   

<EjsGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 

    <GridEvents OnActionBegin="Begin" TValue="OrdersDetails"></GridEvents> 

    . . . . ..  

    </GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsIdentity="true" Visible="false" IsPrimaryKey="true" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"> 

</GridColumn> 

. .. . . . . . . . . . . 

    </GridColumns> 

</EjsGrid> 

In your OnActionBegin event you have tried to insert a record in both in your database and in the list. Hence it is updated twice in your Grid. We suggest you to prevent the default save action in OnActionBegin event and save the changes in your data. Kindly ignore code to insert the record in your Items variable. Refer the below code example.  

public async void OnBegin(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 

        { 

            Args.Cancel = true; // prevent default action.  

            if (Args.Data.OrderID == null) 

            { 

                await Task.Run(() => OrderData.AddOrder(Args.Data)); 

            } 

            else 

            { 

                OrderData.UpdateOrder(Args.Data); 

            } 

            Grid.CloseEdit(); // close the edit / insert dialog            

        } 

    } 

  

Kindly get back to us if you have further queries.  

 

Regards 

Vignesh Natarajan. 

 

[Dimitar]

Works perfect. 

Thank you

[Vignesh Natarajan]

Hi Dimitar,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you need any further assistance from us.  

Regards, 

Vignesh Natarajan 

[vikash sahu]

I have Aspnetcore web API with store procedure of multiple table.

I call API and convert json data to datatable than convert datatable to ExpandoObject than bind to grid.

can you plz help me to update add and delete data to or from ExpendoObject and den call api to update database value

[Vignesh Natarajan]

Hi Vikash,  

 

Greetings from Syncfusion support.  

 

Query: “can you plz help me to update add and delete data to or from ExpendoObject and den call api to update database value” 

 

From your query we understand that you want to perform CRUD operation in Grid by calling a function to API service / controller. As per your requirement we have prepared a sample to perform CRUD operation in Grid using ExpandoObject and Web API controller. We have achieved your requirement using OnActionBegin event of Grid and HttpClient to make contact with WebAPI service.  

 

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/150935/ze/APIService687503096  

 

Please get back to us if you have any other queries or if above solution does not resolve your query.  

 

Regards, 

Vignesh Natarajan