Message after editing in grid.

[jose]

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?

[jose]

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. 

[Venkatesh Ayothi Raman]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F140838872417950.zip 

Refer the below link to know about EJ2 toast control: 

https://ej2.syncfusion.com/aspnetcore/documentation/toast/getting-started-asp-core 

demo link: https://ej2.syncfusion.com/aspnetcore/Toast/DefaultFunctionalities#/material 

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

Regards, 

Venkatesh Ayothiraman. 

[jose]

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?

[Mohammed Farook J]

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, 

 

https://ej2.syncfusion.com/documentation/api/grid#actionfailure 

 

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