Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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

HTML
<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>



here is the code for jqgrid
JavaScript
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"
            });
        }


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


C#
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, ""];
           }
Posted
Updated 25-Nov-16 2:54am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900