Display a success message after adding/editing a record

[Danyelle]

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".

[Manivel Sellamuthu]

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 

[Danyelle]

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

[Danyelle]

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>

[Manivel Sellamuthu]

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