Пользовательская проверка jqgrid в модальном всплывающем окне bootstrap не работает

---

Я пытаюсь отобразить jqgrid в модальном всплывающем окне bootstrap.Но во время проверки всплывающее окно проверки jqgrid отображается ниже модального всплывающего окна, которое не распознается пользователем.Если пользователь отменит модальное всплывающее окно boostrap, то только он сможет увидеть проверку jqgrid.

Поэтому мое требование состоит в том, чтобы показать всплывающее окно проверки jqgrid на модальном bootstrap или любом другом решении для проверки

<div id="addTaskModal" class="modal fade">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Add New Task</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">

                        <div class="row" style="margin: 5px">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div id="sprintName" class="col-xs-6"></div>
                                        <div class="col-xs-6">
                                            <a id="deleteTask" href="#"></a><a id="submitTask" href="#"></a><a id="EditTask" href="#"></a>
                                            <a id="addTaskGrid" href="#"></a>

                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body" id="TaskPanelBody">
                                    <table id="JQGridTask" class="table table-striped table-bordered dt-responsive nowrap"></table>
                                    <div id="JQGridTask_pager"></div>

                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </div>

        </div>
    </div>

вот код для jqgrid

function getAllTasksJqGrid(releasesprintid) {
            debugger;
            var lastsel;
            document.getElementById('submitTask').style.pointerEvents = 'none';
            $("#JQGridTask").GridUnload();
            $("#JQGridTask").jqGrid({
                url: "/Project/GetAllTaskJqGrid",
                mtype: "GET",
                datatype: "json",
                //autowidth: true,
                //width: null,
                shrinkToFit: false,
                loadonce: true,
                postData: { "releasesprintid": releasesprintid },

                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    id: "0"
                },
                // autoresizeOnLoad: true,
                //  prmNames: { id: "ProjectID" },
                colNames: ["SprintTaskId", "ReleaseSprintId", "TaskId", "TaskName"],
                colModel: [
                     { autoResizable: true, hidden: true, name: "SprintTaskId", index: "SprintTaskId" },
                    { autoResizable: true, hidden: true, name: "ReleaseSprintId", index: "ReleaseSprintId" },
                    { autoResizable: true, width: 252, name: "TaskId", key: true, index: "TaskId", editable: true, edittype: 'text', editrules: { size: 20, maxlength: 30, custom: true, custom_func: validate_task }, sortable: true },
                     { autoResizable: true, width: 252, name: "TaskName", index: "TaskName", editable: true, edittype: 'text', editrules: { size: 20, maxlength: 30, custom: true, custom_func: validate_task }, sortable: true },

                ],
                caption: "Tasks",
                //editurl: '/Project/CreateRCP',
                pager: "#JQGridTask_pager",
                onSelectRow: function (id) {
                    debugger;

                    //selRowId = $("#JQGridTask").jqGrid('getGridParam', 'selrow')
                    //taskid = $("#JQGridTask").jqGrid('getCell', selRowId, 'TaskId');
                    //taskname = $("#JQGridTask").jqGrid('getCell', selRowId, 'TaskName');

                    //    $("#JQGridRCP").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', { fromServer: true });


                    //

                },
                ondblClickRow: function (id) {
                    document.getElementById('submitTask').style.pointerEvents = 'auto';
                    var $self = $(this);
                    var rowObject;
                    var data = []
                    //  if (id && id !== lastsel) {
                    //   jQuery('#JQGridRCP').restoreRow(lastsel);

                    $self.jqGrid("editRow", id, {
                        keys: true,
                        aftersavefunc: function (rowid) {
                            var $this = $(this),
                                rowObject = $this.jqGrid("getGridParam", "datatype") === "local" ?
                                    $this.jqGrid("getLocalRow", id) :
                                                                    {
                                                                        ReleaseSprintId: $this.jqGrid("getCell", id, "ReleaseSprintId"),
                                                                        TaskId: $this.jqGrid("getCell", id, "TaskId"),
                                                                        TaskName: $this.jqGrid("getCell", id, "TaskName")
                                                                    };
                            // one ca call setRowData below with two properties
                            // only which are required for
                            $this.jqGrid("setRowData", id, {
                                ReleaseSprintId: $this.jqGrid("getCell", id, "ReleaseSprintId"),
                                TaskId: $this.jqGrid("getCell", id, "TaskId"),
                                TaskName: $this.jqGrid("getCell", id, "TaskName")
                            });
                            data.push(rowObject);
                            if ($('#info_dialog').length > 0) {

                            }
                            else {
                                saveTask(data);
                            }
                        }
                    });
                },
                // Customizations
                height: 150,
                // scroll: true,
                // recordtext: "{2} Records", // overrides default set in grid.locale-en.js
                viewrecords: true, // controls visibility of recordtext
                rowNum: 10,

                rowList: [10, 50, 100]




            });

            $("#JQGridTask").jqGrid('inlineNav', '#JQGridTask_pager', {
                edit: true,
                editicon: "ui-icon-pencil",
                //  editicon: "../Images/Edit-icon.png",
                add: true,
                addicon: "../Images/Create.png",
                save: true,
                saveicon: "../Images/save.png",
                cancel: true,
                cancelicon: "../Images/button_cancel.png"
            });
        }

Что я уже пробовал:

Я попытался скрыть info_dialog и использовал пользовательскую проверку, здесь всплывающее окно jqgrid не видно, но я не могу добавить или сохранить новую строку или ту же строку (недавно добавленную) в следующий раз после проверки

function validate_task(value, colname) {
               debugger;
               if (value == '') {
                   $(".notify").notify(colname + " is required", { position: "right", className: "error", arrowShow: false });
                   $(document).on("focus", "#info_dialog", function () {

                       $("#info_dialog").hide();

                   });
                   return [false, "Please enter value between 0 and 20"];
               }
               else
                   return [true, ""];
           }

---