Forum
Log In
Home
Topic RSS
07:50
24/02/2010
Offline
I place JqGrid inside a JqModal, but when I click on "add" icon on navgrid to bring up the edit form popup, the form's position in not relative to JqGrid top left corner.
Also, the "alertmod" does NOT seem to show in the correct position whe you click on delete without selecting any rows. This is problem for me in my UI design.
I have placed "divTallBlock1″ and "divTallBlock2″ in the HTML just to make it easier to see edit/delete/alertmod show in different places.
(The z-index in JqModal is modified from 3000 to 800 in order for the edit form to show on top of the grid.) I have been struggling days for this problem. Any possible work around hacks?
<head runat="server">
<title>Test3</title>
<style type="text/css">
.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -350px;
width: 700px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
</style>
<link href="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/themes/ui-lightness/ui.all.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("~/Scripts/jqGrid/css/ui.jqgrid.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#list2").jqGrid({
url: '/Home/Test3Data/',
datatype: 'json',
mtype: 'GET',
colNames: ['Name'],
colModel: [{ name: 'Name', index: 'Name', width: 680, align: 'left', editable: true, editrules: { required: true}}],
pager: '#pager2',
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'Name',
sortorder: "desc",
viewrecords: true,
imgpath: '<%= Url.Content("~/Scripts/jqueryUI/css/ui-lightness/images") %>',
caption: 'My first grid'
});
$("#list2").navGrid('#pager2',{add: true, del: true, edit:false, refresh: false, search: false, view: false}, {}, {modal: true}, {}, {}, {});
$("#divModal").jqm({overlay: 20});
$("#btnPopUp").click(function() {
$("#divModal").jqmShow();
});
});
</script>
</head>
<body>
<div id="divModal" class="jqmWindow">
<table id="list2" cellpadding="0" cellspacing="0"></table>
<div id="pager2"></div>
</div>
<div id="divTallBlock1" style="width: 200px; height: 2000px; background-color: Red"></div>
<div id="divTallBlock2" style="width: 600px; height: 2000px; background-color: Green"></div>
<input type="button" id="btnPopUp" value="PopUp" />
</body>
</html>
.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -350px;
width: 700px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
</style>
<link href="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/themes/ui-lightness/ui.all.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("~/Scripts/jqGrid/css/ui.jqgrid.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#list2″).jqGrid({
url: '/Home/Test3Data/',
datatype: 'json',
mtype: 'GET',
colNames: ['Name'],
colModel: [
{ name: 'Name', index: 'Name', width: 680, align: 'left', editable: true, editrules: { required: true}}],
pager: '#pager2',
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'Name',
sortorder: "desc",
viewrecords: true,
imgpath: '<%= Url.Content("~/Scripts/jqueryUI/css/ui-lightness/images") %>',
caption: 'My first grid'
});
$("#list2″).navGrid('#pager2',{add: true, del: true, edit:false, refresh: false, search: false, view: false}, {}, {modal: true}, {}, {}, {});
$("#divModal").jqm({overlay: 20});
$("#btnPopUp").click(function() {
$("#divModal").jqmShow();
});
});
</script>
So…after sever days trial and efforts, I decide to try to have a JqGrid inside a UI Dialog. To my suprise, the position of edit form is position correctly, but "alertmod" is still showing incorrect position(JqGrid is at the bottom of the html while alertmod is all the way on the top).
However, a bigger new problem is encountered. Text input on the edit form is disabled! (Please see last two post of this link). I know it will get rid of the text input problem if I set dialog modal:false, but modal behavior is really a desired one. Following is the code with UI dialog.
<head id="Head1" runat="server">
<title>Test4</title>
<link href="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/themes/ui-lightness/ui.all.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("~/Scripts/jqGrid/css/ui.jqgrid.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.core.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.draggable.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.resizable.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.dialog.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#list2").jqGrid({
url: '/Home/Test3Data/',
datatype: 'json',
mtype: 'GET',
colNames: ['Name'],
colModel: [
{ name: 'Name', index: 'Name', width: 680, align: 'left', editable: true, editrules: { required: true}}],
pager: '#pager2',
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'Name',
sortorder: "desc",
viewrecords: true,
imgpath: '<%= Url.Content("~/Scripts/jqueryUI/css/ui-lightness/images") %>',
caption: 'My first grid'
});
$("#list2").navGrid('#pager2',{add: true, del: true, edit:false, refresh: false, search: false, view: false}, {}, {modal: true}, {}, {}, {});
$("#divModal").dialog({
autoOpen: false,
width: 700,
modal: true,
zIndex: 800,
title: "testing modal"
});
$("#btnPopUp").click(function() {
$("#divModal").dialog('open');
});
});
</script>
</head>
<body>
<div id="divModal">
<table id="list2" cellpadding="0" cellspacing="0"></table>
<div id="pager2"></div>
</div>
<div id="divTallBlock1" style="width: 200px; height: 2000px; background-color: Red"></div>
<div id="divTallBlock2" style="width: 600px; height: 2000px; background-color: Green"></div>
<input type="button" id="btnPopUp" value="PopUp" />
</body>
</html>
I really hope someone can shed some light for using JqGrid in a JqModal or UI Dialog. Beside the problems, JqGrid is really great fun to work with. Good work Tony, Thank You!
Allen
19:57
Moderators
30/10/2007
Offline
Hello,
Yo have installatin problem, maybe you use the development CSS file - you should use the one NOT from src directory
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
08:51
24/02/2010
Offline
Hi Tony,
Thank you for your suggestion. I have included the correct files. I did make sure I do NOT use any files from the src folder, but the exact problems are still showing.
For JqGrid in a JqModal, I change the included files to the following....
<link href="<%= Url.Content("~/Scripts/jqGrid/css/ui.jqgrid.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
The edit/delete form and alertmod message are still showing in the incorrect position.
For JqGrid in an ui dialog, I change the included file files setting to the following....
<link href="<%= Url.Content("~/Scripts/jqGrid/css/ui.jqgrid.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/js/jquery-ui-1.7.2.custom.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
I know it is fairly common to use a JqGrid inside an UI Dialog, am I the only one encountering the problems of "disabled" text input on the edit form popup and incorrect alertmod message position??
.....Help....
(note: alertmod message => The message you get when you click on delete icon on navgrid without selecting any records)
12:11
Moderators
30/10/2007
Offline
Hello,
I do not think so. Please clear your cache and in firebug see if you have the proper files loaded.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
07:54
24/02/2010
Offline
Hey Tony,
Thank you for your suggestion. I tried but still without any success. I finally got around to put up a test site for you, I hope it will be easier for you to check if you get a chance.
Test for jqgrid inside dialog(scroll all the way to bottom to click on popup)
Test for jqgrid inside JqModal
If you click on "delete" in navgrid without selecting any row, you can see the alert message's position is not aligned with JqGrid. Most importantly, when you try to add in "jqgrid in dialog", the keyboard and mouse is disable in form editing modal.
14:58
Moderators
30/10/2007
Offline
Hello,
In the exmple I see that the first modal whare the grid is is 3000, while the grid add dialog has a z-index 950
Please correct this to see the problem correct
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
23:29
24/02/2010
Offline
Hi Tony,
There are actually two differenct examples.
In example one, JqGrid inside UI Dialog
The z-index of the "dialog" that contains the grid is 802, and the grid add dialog z-index is 950. They are ok in this case, but you can NOT type/input anything in the grid add dialog.
In example two, JqGrid inside JqModal
Yes, you were right. The z-index of the "jqModal" that contains the grid is 3000, while the grid add dialog z-index is 950. I changed the default jqModal z-index to 800 to bring the grid add dialog to front. This is done but the grid add dialog is always poping up in the top of the page instead of poping up in a positon relative to the grid.
Both examples, when you click on delete without selecting any rows, have the same problem of incorrect alertmod position .
Do you have any insights to these two separate example's problems? Thanks!
19:54
Moderators
30/10/2007
Offline
Hello,
Thanks. The problem is in first modal, and not in jqGrid.
If the first modal has a position : absolute with the appropriate top and left values evrething will work as in first example.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
07:41
24/02/2010
Offline
Hi Tony,
Thank You! This example, JqGrid inside JqModal, is working now after I set first modal's position: absolute, but the "alertmod" modal is still always showing on the top – for example, the warning message you get when you click on delete without selecting any rows. Any thought?
As for this example, JqGrid inside UI Dialog, the disabled add modal probelm is still haunting me. Please see picture below. I know from your blog, you decided not to use/support UI dialog with JqGrid, and JqModal was applied instead. Could this be the reason that they don't work so well together?
11:04
Moderators
30/10/2007
Offline
Hello,
I see this and I could not tell you currently which is the reason.
Please live the link for a couple of days.
Thank you.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
21:35
03/04/2010
Offline
Any Update on a work around for this issue. I also have been having trouble getting the add/edit/warning no row selected modals to show up above my ui dialog that has a jqgrid load into it. THey appear behind. I've set the z-index of the ui dialog to 700 and still shows up in front of the add/edit dialogs. any insight into a work around would be appreciated.
thanks.
tim
21:42
03/04/2010
Offline
@yial2 @tony
in firebug it logs the warning of @yial2 testing example
'The 'charCode' property of a keydown event should not be used. The value is meaningless.' when you type into the add field. Not sure if this helps towards a resolution.
02:55
03/04/2010
Offline
@yial2
The isssue with the add fields being disabled has to do with the modal:true setting on the UI Dialog. Even though you have overridden the z-index for the dialog modal setting i believe disables all interaction with elements that are not children of the UI dialog. Therefore show up as enabled but are really disabled. I changed my outer dialog to modal:false and it works for adding and editing. Still not sure about the alertMsg positioning however.
tim
10:17
24/02/2010
Offline
timbrown said:
@yial2
The isssue with the add fields being disabled has to do with the modal:true setting on the UI Dialog. Even though you have overridden the z-index for the dialog modal setting i believe disables all interaction with elements that are not children of the UI dialog. Therefore show up as enabled but are really disabled. I changed my outer dialog to modal:false and it works for adding and editing. Still not sure about the alertMsg positioning however.
tim
Yes Tim,
Thank you for sharing your finding, but I need to prevent user from doing anything else when UI dialog pop up, so modal:true is not an option for me. I have a hard time getting the mechanism between UI dialog and JqGrid's own JqModal to work smoothly toghether....they work great most of time....but unfortunately not in this scenario.
00:41
07/06/2010
Offline
I'm having this problem too :((
I have a jqgrid, which pops an edit form with one of the fields being another jqgrid. When I Add/Delete rows in the top-level grid, all dialogs are under and aren't even visible unless you move the grid out of the way.
02:10
07/06/2010
Offline
Ok, I think I have it fixed here:
10:20
Moderators
30/10/2007
Offline
Hello,
Thanks. Will be fixed.
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
11:44
22/05/2012
Offline
tony said:
Hello,
Thanks. Will be fixed.
Tony
Hi Tony
I dont know if it's the same problem, but i have an issue when i want to resize my columns after moving the parent window of the jqGrid 
My grid is into a window type : jWindow plugin
(It works normal on Firefox but not on IE9 (new lines under the grid), Chrome, Safari (no resize of my columns))
Thanks for your help, because i really want to use your plugin seems great, otherwise
What we can do ?
Exactly, it's dropping at the end of the resize : i forgot to say it'works well with Firefox, but not on others browsers See my code : dl.dropbox.com/u/28167627/grid_start.js
This is the simpliest full example that i can give you It provide a Window + a DataGrid inside You can resize when the window hasn't moved (after load) afterwards move this black window : the column resize of the datagrid is totally bugging : launch into your browser : /simple/CliT_jqm/test_win.html all sources are here :dl.dropbox.com/u/28167627/simple.rar
Most Users Ever Online: 715
Currently Online:
49 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
