I am trying to display the jqgrid in a bootstrap modal popup.But during validation the jqgrid validation popup is showing below the modal popup which is not recognising by the user.If the user cancel the boostrap modal popup then only he can able to see the jqgrid validation.
So my requirement is to show the jqgrid validation popup on the bootstrap modal or any other solution for validation
<div id="addTaskModal" class="modal fade">
<div class="modal-dialog modal-lg">
<!--
<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>
here is the code for jqgrid
function getAllTasksJqGrid(releasesprintid) {
debugger;
var lastsel;
document.getElementById('submitTask').style.pointerEvents = 'none';
$("#JQGridTask").GridUnload();
$("#JQGridTask").jqGrid({
url: "/Project/GetAllTaskJqGrid",
mtype: "GET",
datatype: "json",
shrinkToFit: false,
loadonce: true,
postData: { "releasesprintid": releasesprintid },
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
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",
pager: "#JQGridTask_pager",
onSelectRow: function (id) {
debugger;
},
ondblClickRow: function (id) {
document.getElementById('submitTask').style.pointerEvents = 'auto';
var $self = $(this);
var rowObject;
var data = []
$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")
};
$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);
}
}
});
},
height: 150,
viewrecords: true,
rowNum: 10,
rowList: [10, 50, 100]
});
$("#JQGridTask").jqGrid('inlineNav', '#JQGridTask_pager', {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon: "../Images/Create.png",
save: true,
saveicon: "../Images/save.png",
cancel: true,
cancelicon: "../Images/button_cancel.png"
});
}
What I have tried:
I have tried to hide the info_dialog and used custom validation, here the jqgrid pop up is not visible but i am unable to add or save a new row or the same row(newly added) for next time after validation
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, ""];
}