1. Home
  2. Forum
  3. Angular - EJ 2
  4. Row dissapear when edited

Row dissapear when edited

Hi. I need help.
I have configured an asyncronic grid that uses Reactive Forms. When I edit a row and modify the data they are updated in the database but the row disappears from the grid. if I update the page the record appears. I attach the component files.
The dataSourceChanged event executes and successfully modifies the DB but the row disappears.

regards

Attachment: sociedadeslist_b635d692.7z

9 Replies
PS Pavithra Subramaniyam Syncfusion Team January 9, 2019 08:40 AM UTC

Hi LF, 
 
Greetings from Syncfusion. 
 
Query :  When I edit a row and modify the data they are updated in the database but the row disappears from the grid 
 
We have analyzed your query and we suspect that the return data and its type of the service update method is the cause of this issue. So we have prepared a sample with CRUD operation using async pipe for your reference. And also please provide the below mentioned details, it will help us provide better solution as soon as possible. 
 
  1. Check your service update method for edited data as mentioned in the below code snippet?
  2. Could you please share your service side code for us to analyze better?
  3. Since the same method is called for both ‘add’ and ‘edit’ operation, we suspect that the returned data might mismatch. Could you please ensure that?
  4. Please try to reproduce the reported issue in the below provided sample?
 
[.service.ts] 
... 
updateRecord(state: DataSourceChangedEventArgs): Observable<any> { 
    return this.http.put(this.customersUrl, state.data, httpOptions); 
  } 
... 
 
 
Regards, 
Pavithra S. 


LF LF January 9, 2019 07:37 PM UTC

Thank you very much for your response Pavithra.
Attached .NET server side code and Angular service component for you.
Can Paging also be influencing?

Attachment: Controllers_fe7fdaa6.7z

PS Pavithra Subramaniyam Syncfusion Team January 10, 2019 12:40 PM UTC

Hi LF, 
 
Thanks for the update. 
 
We have validated the attached file and suspect that you have used below method to update the records in your database while using WebApi adaptor, 
 
// POST: Sociedad/Edit/5 
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for  
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598. 
 
        [HttpPost] 
        [ValidateAntiForgeryToken] 
        public async Task<IActionResult> Edit([Bind("IdSociedad,Sigla,Nombre,IdPais")] Sociedad sociedad) 
        { 
            if (ModelState.IsValid) 
            { 
                await _sociedadAsyncRepository.UpdateAsync(sociedad); 
 
                return RedirectToAction(nameof(Index)); 
            } 
            ViewData["IdPais"] = new SelectList(_paisRepository.ListAll(), "IdPais", "Nombre", sociedad.IdPais); 
            return View(sociedad); 
        } 
 
If yes, then you need to directly return the updated values instead of return the values to view page. Refer the following code snippet, 
 
        [HttpPost] 
        [ValidateAntiForgeryToken] 
        public async Task<IActionResult> Edit([Bind("IdSociedad,Sigla,Nombre,IdPais")] Sociedad sociedad) 
        { 
            if (ModelState.IsValid) 
            { 
                await _sociedadAsyncRepository.UpdateAsync(sociedad); 
 
                return RedirectToAction(nameof(Index)); 
            } 
            ViewData["IdPais"] = new SelectList(_paisRepository.ListAll(), "IdPais", "Nombre", sociedad.IdPais); 
            return sociedad; 
        } 
 
Still you are facing the same issue, then please share the following details for further assistance, 
 
  1. Could you please share the screenshot if you find any script error in browser console after performing update action.
  2. Please share the server response screenshot for update action
  3. Please check actionFailure is triggered or not after performing the update. If yes, then please share the response of the actionFailure event. Refer the below code snippet to know about how to get response in actionFailure event,
function Failure(args){ 
       console.log(args.error); 
    } 
 
Regards, 
Pavithra S. 
 


LF LF January 10, 2019 03:03 PM UTC

Hi. Attached code of Get-Post on server side and images of the browser. The data is updated successfully in the BD.


Saludos

Attachment: Syncfusion_deae642c.7z

MF Mohammed Farook J Syncfusion Team January 16, 2019 06:37 AM UTC

Hi LF, 
 
Thanks for your update. 
 
We have validated the reported issue , but we need the following additional information for further analysis. 
 
  1. Could you please register ‘actionFailure’ event in your application and share the error details. The ‘actionFailure’ event is triggered when the Grid action failed . So we get the exact error details from the ‘actionFailure’ event. Please find the code example.
 
                    [App.component.html]  
 
<ejs-grid #grid='' [dataSource]='data' (actionFailure)='actionFailure($event)'>  
    ....  
</ejs-grid>  


 
 
                  [App.component.ts]  
 
   actionFailure(e: any): void {  
  
        console.log(e.error)  
    }  


 
  
  1. Please share the EJ2 package version details from your package.JSON.
  2. Could you please share the console window if you have any script error.
  3. Please ensure your server action returns the data after save process from their Network tab in console window. Please find the screenshot for your reference.
 
                                                                                                                                                                                                                                                                         
 
5.       Could you please share the Grid full code example. 
 
 
 
 
Regards, 
J Mohammed Farook 


LF LF January 16, 2019 06:23 PM UTC

Hi. I had no luck with the actionfailure event, it does not give errors in the console. I enclose requested images of the console, complete code of the grid and file package.json

Thanks for your time

Attachment: Sincfusion_dcaa343c.7z

PS Pavithra Subramaniyam Syncfusion Team January 18, 2019 12:45 PM UTC

Hi LF, 

After adding the new record, we will send the request to collect all the records (including newly added record) to server and bind that records to Grid. By default getSociedades response should have all the record details (including newly added record). So please ensure newly added record is present in  getSociedades response or not. Also please share the screenshot of how newly added records are present in getSociedades. 

Regards, 
Pavithra S. 


LF LF January 18, 2019 06:10 PM UTC

Hello again :). I attach the images before and after the edition. The data is updated and the service returns
updated but for some reason the grid is not updated :(.
Change the name of the service to getSociedadesAsync for clarity.
I want to cry haha.

regards

Attachment: Sincfusion_35257e24.zip

PS Pavithra Subramaniyam Syncfusion Team January 21, 2019 01:19 PM UTC

Hi LF, 
 
Thank you for your patience. 
 
Query : The data is updated and the service returns updated but for some reason the grid is not updated 
 
From the code snippet you have shared with us, we could find that some of old packaged version names are still available in your package.json file. So we suggest to refer to the below documentation to update the grid component packages, 
 
 
If the issue still occurs, then could you please provide the below additional information. It will be helpful for us to provide better solution as soon as possible, 
 
  1. Could you please share the hosted link of your sample for us to reproduce the reported issue?
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


Loader.
Up arrow icon