1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Display a success message after adding/editing a record

Display a success message after adding/editing a record

I have a grid. I am using the dialog mode to open a dialog when the user adds or edits an item. When the user clicks save and is returned to the grid I want to display a bootstrap type message that says something like "Success". How do I do that? I do not want to do a javascript alert. Here is my code below:
 
<div class="inventoryGrid">
    @Html.EJS().Grid("InventoryGrid").DataSource(DataManager => { DataManager.Json(@Model.Inventory.ToArray()).InsertUrl("/Home/AddInventoryItem").UpdateUrl("/Home/UpdateInventoryItem").Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).AllowSorting(true).Columns(col =>
{
    col.Field("InventoryID").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Width("40").Add();
    col.Field("HECNumber").HeaderText("HEC Number").Visible(false).Add();
}).AllowPaging(true).ActionBegin("actionBegin").ActionComplete("actionComplete").FilterSettings(filter => { filter.Columns(filterColumns).Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).SortSettings(sort => sort.Columns(sortColumns)).PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit" }).Render()

</div>

<script>
    function booleanAccessorFn(field, data, column) {
        var value = data[field];
        if (value == true) {
            value = "Yes";
        } else {
            value = "No";
        }

        return value;
    }

    function actionBegin(args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "HECNumber" || this.columns[i].field == "CeeUsNumber" || this.columns[i].field == "IsBudgetCharge") {
                    this.columns[i].visible = true;
                }
            }
        }

        if (args.requestType == "save") {

            if (args.data['EmployeePrice'] == null) {
                args.data['EmployeePrice'] = value;
            }
        }
    }


    function actionComplete(args) {
        if (args.requestType === 'save') {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "CustomerID") {
                    this.columns[i].visible = false;
                }

            }


        }

        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            var dialog = args.dialog;
            // change the header of the dialog
            dialog.header = args.requestType === 'beginEdit' ? 'Edit Inventory Item' : 'Add Inventory Item';
        }
    }

</script>

@Html.EJS().ScriptManager()


So When the user saves an item a success message should appear below the words Manage Inventory. Ideally, I want to display a different message based on if the item was edited or added. So if the user adds an item then "Item Added" should be displayed. If the user edits an item then the message should say "Item Updated".


4 Replies 1 reply marked as answer
MS Manivel Sellamuthu Syncfusion Team January 27, 2021 12:29 PM UTC

Hi Danyelle, 

Greetings from Syncfusion support. 

From your query, we can understand that you want to  display alert dialog with according to the corresponding action.  
You can achieve your requirement by using the actionComplete event of the Grid, which will trigger once the add or edit action is completed successfully. 
Please refer the below code example for more information. 

<div class="control-section"> 
    @Html.EJS().Grid("Grid").ActionComplete("ActionComplete").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
. . . 
 
}).AllowPaging().PageSettings(page => page.PageCount(2)). 
EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }). 
Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }).Render() 
</div> 
 
<script> 
    function ActionComplete(args) { 
// You can differentiate the actions with args.action 
// here you can show the popup as per your requirement 
        if (args.action === 'add') { 
            console.log(args); 
        } 
        if (args.action === 'edit') { 
            console.log(args); 
        } 
    } 
</script> 

Please let us know, if you need further assistance. 

Regards, 
Manivel 


DA Danyelle January 27, 2021 12:56 PM UTC

This still does not show anything on my page, nor does any kind of pop up appear.

DA Danyelle January 27, 2021 05:00 PM UTC

I have come up with a solution. See My code Below:

<div id="UpdateAlert" class="alert alert-success" role="alert" style="display:none">
    <a rel='nofollow' href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>The item was updated.</strong>
</div>

<div id="InsertAlert" class="alert alert-success" role="alert" style="display:none">
    <a rel='nofollow' href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>The item has been created successfully.</strong>
</div>

 @Html.EJS().Grid("InventoryGrid").DataSource(DataManager => { DataManager.Json(@Model.Inventory.ToArray()).InsertUrl("/Home/AddInventoryItem").UpdateUrl("/Home/UpdateInventoryItem").Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).AllowSorting(true).Columns(col =>
{
  ...
}).AllowPaging(true).ActionBegin("actionBegin").ActionComplete("actionComplete").FilterSettings(filter => { filter.Columns(filterColumns).Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).SortSettings(sort => sort.Columns(sortColumns)).PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit" }).Render()

</div>

<script>
    function actionComplete(args) {
        if (args.action === 'add') {
            document.getElementById("InsertAlert").style.display = "block";
            setTimeout(function () { hideAlert(); }, 5000);
        }
        if (args.action === 'edit') {
            document.getElementById("UpdateAlert").style.display = "block";
            setTimeout(function () { hideAlert(); }, 5000);
        }
    }

    function hideAlert() {
        document.getElementById("UpdateAlert").style.display = "none";
        document.getElementById("InsertAlert").style.display = "none";
    }
</script>



Marked as answer
MS Manivel Sellamuthu Syncfusion Team January 28, 2021 06:43 AM UTC

Hi Danyelle, 

Thanks for your update. 

We are glad that you have found the solution for your requirement on your own. 

Please let us know, if you need further assistance. 

Regards, 
Manivel 


Loader.
Up arrow icon