Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
JqGrid in a JqModal causes incorrect edit/delete/alertmod modal position
27/02/2010
07:50
Avatar
yial2
Member
Members
Forum Posts: 14
Member Since:
24/02/2010
sp_UserOfflineSmall 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?Cool

<html xmlns="http://www.w3.org/1999/xhtml&quot; >
<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>

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

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.

<html xmlns="http://www.w3.org/1999/xhtml&quot; >
<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

27/02/2010
19:57
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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.

28/02/2010
08:51
Avatar
yial2
Member
Members
Forum Posts: 14
Member Since:
24/02/2010
sp_UserOfflineSmall 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/jqueryUI/css/ui-lightness/jquery-ui-1.7.2.custom.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>

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/jqueryUI/css/ui-lightness/jquery-ui-1.7.2.custom.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/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??Yell .....Help....

(note: alertmod message => The message you get when you click on delete icon on navgrid without selecting any records)

05/03/2010
12:11
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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.

10/03/2010
07:54
Avatar
yial2
Member
Members
Forum Posts: 14
Member Since:
24/02/2010
sp_UserOfflineSmall 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.Confused

11/03/2010
14:58
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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.

11/03/2010
23:29
Avatar
yial2
Member
Members
Forum Posts: 14
Member Since:
24/02/2010
sp_UserOfflineSmall 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!Cool

13/03/2010
19:54
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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.

14/03/2010
07:41
Avatar
yial2
Member
Members
Forum Posts: 14
Member Since:
24/02/2010
sp_UserOfflineSmall 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?
JqGrid in UI DialogImage Enlarger

18/03/2010
11:04
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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.

03/04/2010
21:35
Avatar
timbrown
Member
Members
Forum Posts: 4
Member Since:
03/04/2010
sp_UserOfflineSmall 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

03/04/2010
21:42
Avatar
timbrown
Member
Members
Forum Posts: 4
Member Since:
03/04/2010
sp_UserOfflineSmall 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.

06/04/2010
02:55
Avatar
timbrown
Member
Members
Forum Posts: 4
Member Since:
03/04/2010
sp_UserOfflineSmall 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

06/04/2010
10:17
Avatar
yial2
Member
Members
Forum Posts: 14
Member Since:
24/02/2010
sp_UserOfflineSmall 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.

11/08/2010
00:41
Avatar
vchekan
Member
Members
Forum Posts: 10
Member Since:
07/06/2010
sp_UserOfflineSmall 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.

11/08/2010
02:10
Avatar
vchekan
Member
Members
Forum Posts: 10
Member Since:
07/06/2010
sp_UserOfflineSmall Offline

Ok, I think I have it fixed here:

http://github.com/vchekan/jqGr.....2578c22cc2

11/08/2010
10:20
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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.

22/05/2012
11:44
Avatar
magister
France
New Member
Members
Forum Posts: 1
Member Since:
22/05/2012
sp_UserOfflineSmall 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 Cool

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

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
67 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.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information