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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Insert new item Observable binding

Thread ID:

Created:

Updated:

Platform:

Replies:

150935 Jan 24,2020 07:22 PM UTC Jun 3,2020 11:28 AM UTC Blazor 5
loading
Tags: Grid
Dimitar
Asked On January 24, 2020 07:22 PM UTC

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 [Syncfusion]
Replied On January 27, 2020 09:26 AM UTC

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 


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
Replied On February 5, 2020 05:42 PM UTC

Works perfect. 
Thank you

Vignesh Natarajan [Syncfusion]
Replied On February 6, 2020 03:59 AM UTC

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
Replied On June 2, 2020 04:08 PM UTC

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 [Syncfusion]
Replied On June 3, 2020 11:28 AM UTC

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  
 
 
Please get back to us if you have any other queries or if above solution does not resolve your query.  
 
Regards, 
Vignesh Natarajan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon