1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Best approach for displaying a message after grid action

Best approach for displaying a message after grid action

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.37 (nuget package).

What would be the best approach for displaying a message from the controller to the user when using grid with Url Adaptor, after an action has been completed?

For example:
  • The user added a new record, display a message "congratulations for adding a new record" (just an example).
  • The user tries to delete a record, when deleting, the db throws an error that the record is used in another table, display a message "record can't be deleted because it is still in use elsewhere".
One approach I tried is to use the "ActionFailure" method of the grid.

In the controller I would return a status code with a json object containing the message.
return StatusCode(Microsoft.AspNetCore.Http.StatusCodes.Status400BadRequest, Json(new { title = "error", message= "msg"}));

Then in the "ActionFailure" I would display the message with a modal dialog.
function onActionFailure(args) {
            var error = args[0].error;
            if (error.status === 400) {
                var errObj = JSON.parse(error.response);
                var err = errObj.Value;
                var dialog = document.getElementById("ErrorList").ej2_instances[0];
                dialog.setProperties({ header: err.title, content: err.message });
                dialog.show();
                
            } 
}

However this can't be used for a successful request.
I wondered if it would be a good idea to add some properties for (error) messages to the CRUDModel, then get the message in the "ActionComplete" event?


Kind regards
Phil

5 Replies
RS Renjith Singh Rajendran Syncfusion Team May 2, 2018 12:37 PM UTC

Hi Phil, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you use the “actionComplete” event of Grid. The actionComplete event will be triggered after each successful Grid actions. So for displaying a message after successful CRUD operations use your message dialog codes by checking for the requestType as “save”. Since the save requestType will be used for every successful save and insert actions. Please refer the code example below, 

    <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Update", "Cancel","Delete" })" allowPaging="true" actionComplete="complete"> 
        <e-datamanager url="/Home/UrlDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update"></e-datamanager> 
        <e-grid-editSettings allowAdding="true" allowEditing="true"></e-grid-editSettings> 
       <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column> 
            ... 
       </e-grid-columns> 
    </ejs-grid> 
<script type="text/javascript"> 
    function complete(args) { 
        if (args.requestType == "save") { 
            //Your dialog model to display the message after successful insert and edit actions 
        }  
    } 
</script> 

Documentation :  
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


UN Unknown May 2, 2018 02:25 PM UTC

Thank you for your reply.

How can I pass a message from the server to the client? More specifically, where should I put this message?

I ask this because on the server side I have to return different objects for different actions.
When adding, I return the CRUDModel<MyModel>.value property.
When updaing, I return the CRUDModel<MyModel>.value property.
When deleting, I return the CRUDModel<MyModel> directly.

I do not want to add a message property to my models, so it would make sense to add a message property to the CRUDModel, however, it is not returned when adding/updating.

Could you please provide a sample on how to retrieve a message from the server after a successful "add, update, delete" action?

RS Renjith Singh Rajendran Syncfusion Team May 3, 2018 04:29 PM UTC

Hi Phil, 

We have analyzed your query. We have achieved your requirement by using a “CustomAdaptor” which is extended from an “UrlAdaptor”. In the “created” event of Grid we have extended the UrlAdaptor to create a custom adaptor. In this custom adaptor we have defined a customized processResponse method, in which we have shown the message from server by using an alert method. We have also prepared a sample which could be downloaded from the link below, 

 
 
Please refer the code example below, 

[Client side code] 
 
    <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Update", "Cancel","Delete" })" 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)) { 
                    alert(data.message); 
                } 
                if (!ej.base.isNullOrUndefined(data.data)) 
                    return data.data; 
                else 
                    return data; 
            } 
        } 
        var grid = document.querySelector('#Grid').ej2_instances[0]; 
        grid.dataSource = new ej.data.DataManager({ 
            url: "/Home/UrlDatasource", 
            insertUrl: "/Home/Insert", 
            updateUrl: "/Home/Update", 
            removeUrl: "/Home/Delete",   
           adaptor: new CustomAdaptor() 
        });   
    } 
</script> 

[Server side code] 

    public ActionResult Update([FromBody]CRUDModel<OrdersDetails> value) 
    { 
        ... 
       string msg = "Successfully performed editing the record";  //Message from server 
        return Json(new { data = value.value, message = msg }); 
    } 
   public ActionResult Insert([FromBody]CRUDModel<OrdersDetails> value) 
    { 
        ... 
        string msg = "Successfully performed inserting a record";   //Message from server 
        return Json(new { data = value.value, message = msg }); 
    } 
   public ActionResult Delete([FromBody]CRUDModel<OrdersDetails> value) 
    { 
        ... 
        string msg = "Successfully performed deleting a record";    //Message from server 
        return Json(new { data = value, message = msg }); 
    } 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


UN Unknown May 4, 2018 03:35 PM UTC

Thank you very much for your response.
This is exactly what I needed.

RS Renjith Singh Rajendran Syncfusion Team May 7, 2018 04:07 AM UTC

Hi Phil, 

Thanks for the update. 

We are happy to hear that your requirement has been achieved.  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon