Insert dialog not disappear

[JyongXuan Liu]

Dear Sir:

I want to show alert Dialog, but my 

Insert dialog not disappear

                                        <ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowFiltering="true" actionFailure="actionFailure" actionBegin="actionBegin" actionComplete="actionComplete" rowDataBound="rowDataBound" toolbar="@(new List<string>() { "Add", "Edit"})">

                                            <e-data-manager json="@ViewBag.dataSource" adaptor="RemoteSaveAdaptor" insertUrl="/Admin/User/Insert" updateUrl="/Admin/User/Update"></e-data-manager>

                                                <e-grid-pagesettings pageSize="15"></e-grid-pagesettings>

                                                <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true" mode="Dialog"></e-grid-editsettings>

                                                <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

                                                <e-grid-columns>

                                                    <e-grid-column field="SerialNo" headerText="No." allowFiltering="false" textAlign="Right" width="60"></e-grid-column>

                                                    <e-grid-column field="ID" headerText="ID" isPrimaryKey="true" visible="false" textAlign="Right" width="80"></e-grid-column>

                                                    <e-grid-column field="UserNo" headerText="帳號" width="90"></e-grid-column>

                                                    <e-grid-column field="UserName" headerText="姓名" width="90"></e-grid-column>

                                                    <e-grid-column field="Active" headerText="啟用" width="90" displayAsCheckBox="true" textAlign="Center" editType="booleanedit" type="boolean"></e-grid-column>

                                                    <e-grid-column field="Deleted" headerText="刪除" width="90" displayAsCheckBox="true" textAlign="Center" editType="booleanedit" type="boolean"></e-grid-column>

                                                    <e-grid-column field="CompanyID" headerText="公司" foreignKeyField='CompanyID' foreignKeyValue='CompanyName' dataSource="ViewBag.companiesData" width="120"></e-grid-column>

                                                    <e-grid-column field="DepartmentID" headerText="部門代碼" width="170"></e-grid-column>

                                                    <e-grid-column field="IdentityID" headerText="身份證號" width="120"></e-grid-column>

                                                    <e-grid-column field="Sex" headerText="性別" width="80"></e-grid-column>

                                                    <e-grid-column field="Email" headerText="電子郵件" width="170"></e-grid-column>

                                                    <e-grid-column field="Mobile" headerText="手機號碼" width="100"></e-grid-column>

                                                    <e-grid-column field="HomePhone" headerText="家庭電話" width="160"></e-grid-column>

                                                    <e-grid-column field="OfficePhone" headerText="辦公室電話" width="160"></e-grid-column>

                                                    <e-grid-column field="Birthday" headerText="出生日期" width="160"></e-grid-column>

                                                    <e-grid-column field="JobTitleCode" headerText="職稱代碼" width="160"></e-grid-column>

                                                    <e-grid-column field="JobTitleName" headerText="職稱名稱" width="160"></e-grid-column>

                                                    <e-grid-column field="JobRank" headerText="職等" width="160"></e-grid-column>

                                                    <e-grid-column field="JobGrade" headerText="職級" width="160"></e-grid-column>

                                                    <e-grid-column field="JobCode" headerText="人員類別代碼" width="160"></e-grid-column>

                                                    <e-grid-column field="JobType" headerText="人員類別" width="160"></e-grid-column>

                                                    <e-grid-column field="EnterDate" headerText="到職日" width="160"></e-grid-column>

                                                    <e-grid-column field="WorkPlace" headerText="工作地點" width="160"></e-grid-column>

                                                    <e-grid-column field="AreaCode" headerText="區域代碼" width="160"></e-grid-column>

                                                    <e-grid-column field="Address" headerText="地址" width="240"></e-grid-column>

                                                    <e-grid-column field="Synopsis" headerText="說明" width="240"></e-grid-column>

                                                </e-grid-columns>

                                            </ejs-grid>

<script>

    function toolbarClick(args) {

        if (args.item.text === 'Delete') {

            var grid = document.getElementById('Grid').ej2_instances[0]

            var dialogObj = grid.editModule.dialogObj;

            dialogObj.header = 'Delete Confirmation Dialog';

            dialogObj.showCloseIcon = true;

        }

    }

</script>

<script>

    function actionBegin(args) {

        if ((args.requestType === 'beginEdit') || (args.requestType === 'add')) {

            for (var i = 0; i < this.columns.length; i++) {

                if (this.columns[i].field == "SerialNo") {

                    this.columns[i].visible = false;

                }

            }

        }

        if ((args.requestType === 'beginEdit')) {

            for (var i = 0; i < this.columns.length; i++) {

                if (this.columns[i].field == "UserNo" || this.columns[i].field == "UserName") {

                    this.columns[i].allowEditing = false;

                }

            }

        }

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

            if ((args.requestType === 'beginEdit') || (args.requestType === 'add')) {

                for (var i = 0; i < this.columns.length; i++) {

                    if (this.columns[i].field == "SerialNo") {

                        this.columns[i].visible = false;

                    }

                }

            }

        }

    }

    function actionComplete(args) {

        if (args.requestType === 'save' || args.requestType == "cancel") {

            for (var i = 0; i < this.columns.length; i++) {

                if (this.columns[i].field == "SerialNo") {

                    this.columns[i].visible = true;

                }

                if (this.columns[i].field == "UserNo" || this.columns[i].field == "UserName") {

                    this.columns[i].allowEditing = true;

                }

            }

        }

    }

    function actionFailure(args) {

        var errorMessage = args[0].error.responseText.split("Exception:")[1].split("</div>")[0];

        alert(errorMessage);

    }

    function rowDataBound(args) {

        // bind the index of the record with respect to current page

        args.row.children[0].innerText = parseInt(args.row.getAttribute('aria-rowindex')) + (this.pageSettings.currentPage - 1) * this.pageSettings.pageSize;

    }

</script>

        public async Task<JsonResult> Insert([FromBody] CRUDModel<User> value)

        {

            var insertUser = (User)value.Value;

            var user = await _userService.GetUserByUserNoAsync(insertUser.UserNo);

            if (user != null)

            {

                //_notificationService.ErrorNotification("已有相同帳號存在!!");

                throw new Exception("已有相同帳號存在!!");

            }

            //await _userService.InsertUserAsync(user);

            //user = await _userService.GetUserByUserNoAsync(user.UserNo);

            //value.Value = user;

            return Json(value.Value);

            //return NoContent();

        }

[Aishwarya Rameshbabu]

Hi JyongXuan Liu,

Greetings from Syncfusion support.

Upon reviewing your query and the provided code example, we have observed that you are displaying an alert dialog when an error occurs during the insert operation in the Syncfusion Grid. You wanted to close the insert dialog in this scenario. To address your requirement, we have utilized the closeEdit method of the Grid within the actionFailure event. This approach cancels the edit state, thereby close the insert dialog. Please refer to the code example, sample, and video demonstration below for more detailed information.

Index.cshtml

 

async function actionFailure(args) {

    if (args && args.error && args.error[0] && args.error[0].error) {

        try {

            const response = await args.error[0].error.text();

            const errorMessage = response.split("Exception:")[1].split('\n')[0].slice(1);

            alert(errorMessage);

        } catch (error) {

            console.error("Error reading the error message: " + error);

        }

        var dialogElement = document.querySelector('.e-dialog.e-edit-dialog');

        if (dialogElement ) {

            this.closeEdit();

        }

    }

}

 

Sample and Video demonstration: Please find in the attachment.

API Reference:

closeEdit

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 195250SampleAndVideoDemo_3436e497.zip