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

Message after editing in grid.

Hi.

I'm using Syncfusion Js2 grid for .Net Core , to edit rows. I successfully edit my row but I'm having an issue about how to correctly use a toaster/alert after editing a row. Since I´m using this grid and it uses Json to return the value, it doesn't do a post. So I cant return a model to my view with my toast dynamic values. I thought that i could use a tempData or ViewBag to send the message but it will stop being dynamic, and it shouldn't work well because it doesn't do a post, so the variable would not be validated and the tempData would never be destroyed. 

Any ideas on how to send my toaster/alert info after updating the row to display the message?

4 Replies

JO jose November 9, 2018 08:24 PM UTC

I saw that i could do something like this. https://www.syncfusion.com/forums/137307/best-approach-for-displaying-a-message-after-grid-action 
But im still  doubting about how to trigger a toast message or a bootstrap alert from the complete method, not just a javascript alert. 


VA Venkatesh Ayothi Raman Syncfusion Team November 12, 2018 07:13 AM UTC

Hi Jose, 

Thanks for contacting Syncfusion support. 

From your query, we found that you want to show toast message after performing crud operations in Grid. So we suggest you to use same custom adaptor as well as EJ2 toast component to achieve your requirement. Please refer the below code snippet, 

<ejs-toast id="element"> 
    <e-toast-position X="Right"></e-toast-position> 
</ejs-toast> 
 
<ejs-grid id="Grid" allowPaging="true" created="created"> 
 
           ..... 
 
</ejs-grid> 
 
 
 
<script type="text/javascript"> 
    function created(args) { 
        // extending the default UrlAdaptor 
        class CustomAdaptor extends ej.data.UrlAdaptor { 
            processResponse(data, ds, query, xhr, request, changes) { 
                if (!ej.base.isNullOrUndefined(data.message)) { 
                    setTimeout( 
                        () => { 
                            var toastObj = document.getElementById('element').ej2_instances[0]; 
                            toastObj.content = data.message; 
                            toastObj.target = document.body; 
                            toastObj.show(); 
                        }, 500); 
                } 
 
                        ..... 
 
           } 
        } 
   }; 
</script> 

In this code we have provided the returned message as a content of the toast. We have prepared the sample with this requirement and that sample can be downloadable from the below link, 


Refer the below link to know about EJ2 toast control: 



Please get back to us, If you need further assistance on this. 

Regards, 
Venkatesh Ayothiraman. 



JO jose November 13, 2018 07:59 PM UTC

it worked perfectly! Just two more questions. First, if i want to catch exceptions when something go wrong and show an specific toaster for the exception i just have to include an atributte in the json return of the controller and validate it in the front end, right?  and second, im using a template, and even if i specify the toaster to show in the right side or left, it always show in the left, always. Could this be a problem with any component regarding syncfusion or it should be just a template error?


MF Mohammed Farook J Syncfusion Team November 15, 2018 07:32 AM UTC

Hi Jose, 
 
Query #1: First, if i want to catch exceptions when something go wrong 
 
From this query, we found that you want to show  error messages in client side by using EJ2toast control. So we suggest you to use actionFailure event of the Grid to achieve your requirement. This event trigger when the grid actions are failed . Please refer the below code snippet, 
 
 
<ejs-toast id="element"> 
    <e-toast-position X="Right"></e-toast-position> 
</ejs-toast> 
 
<ejs-grid id="Grid" actionFailure="actionFailure"> 
     
</ejs-grid> 
 
<script type="text/javascript"> 
function actionFailure(args) { 
        setTimeout( 
            () => { 
                var toastObj = document.getElementById('element').ej2_instances[0]; 
                toastObj.content = args.error[0].error.response.match("Internal Server Error")[0]; 
                toastObj.target = document.body; 
                toastObj.show(); 
            }, 500); 
    } 
</script> 
 
In this code we have provided the actionFailure event argument response to the content of the toast control. 
 
Refer the below link to know about actionFailure event of the Grid, 
 
 
Query #2: if i specify the toaster to show in the right side or left, it always show in the left, always. 
 
We have analyzed this query. But we need some extra details before validating it. So please share following details for further assistance, 
 
  1. You mentioned, you have used toast control within the template. So please share the more details about the exact requirement.
  2. Code example of the toast control.
  3. Share the EJ2 package version?
 
Regards, 
J Mohammed Farook 


Loader.
Live Chat Icon For mobile
Up arrow icon