Skip to content
Browse files

Controlling the position and dimensions of the alert modal dialog

  • Loading branch information...
1 parent 9368303 commit d2648c048a04571677eb86132ea3ddd0899afb15 @tonytomov committed Sep 8, 2011
Showing with 18 additions and 12 deletions.
  1. +18 −12 js/grid.formedit.js
30 js/grid.formedit.js
@@ -1612,25 +1612,31 @@ $.jgrid.extend({
closeOnEscape : true,
beforeRefresh : null,
afterRefresh : null,
- cloneToTop : false
+ cloneToTop : false,
+ alertwidth : 200,
+ alertheight : 'auto',
+ alerttop: null,
+ alertleft: null
}, $.jgrid.nav, o ||{});
return this.each(function() {
if(this.nav) { return; }
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'},
- $t = this, vwidth, vheight, twd, tdw;
+ $t = this, twd, tdw;
if(!$t.grid || typeof elem != 'string') { return; }
if ($("#"+alertIDs.themodal).html() === null) {
- if (typeof window.innerWidth != 'undefined') {
- vwidth = window.innerWidth;
- vheight = window.innerHeight;
- } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0) {
- vwidth = document.documentElement.clientWidth;
- vheight = document.documentElement.clientHeight;
- } else {
- vwidth=1024;
- vheight=768;
+ if(!o.alerttop && !o.alertleft) {
+ if (typeof window.innerWidth != 'undefined') {
+ o.alertleft = window.innerWidth;
+ o.alerttop = window.innerHeight;
+ } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0) {
+ o.alertleft = document.documentElement.clientWidth;
+ o.alerttop = document.documentElement.clientHeight;
+ } else {
+ o.alertleft=1024;
+ o.alerttop=768;
+ }
- $.jgrid.createModal(alertIDs,"<div>"+o.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",{gbox:"#gbox_"+$,jqModal:true,drag:true,resize:true,caption:o.alertcap,top:vheight/2-25,left:vwidth/2-100,width:200,height:'auto',closeOnEscape:o.closeOnEscape},"","",true);
+ $.jgrid.createModal(alertIDs,"<div>"+o.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",{gbox:"#gbox_"+$,jqModal:true,drag:true,resize:true,caption:o.alertcap,top:o.alerttop/2-25,left:o.alertleft/2-100,width:o.alertwidth,height: o.alertheight,closeOnEscape:o.closeOnEscape},"","",true);
var clone = 1;
if(o.cloneToTop && $t.p.toppager) { clone = 2; }

19 comments on commit d2648c0

OlegKi commented on d2648c0 Sep 8, 2011

Very good idea!

Probably you can also add zIndex parameter to the info_dialog? (see here and here.

By the way one more suggestion about another problem which I described here could be also very interesting for you. I wanted to write you more about the suggestion tomorrow.

Best regards


Thanks. I have made some additional fixes.
Your solution for multiple headers seems good, but as you know there are a lot of other things that we should care. I will definitely consider your solution instead of the limitations.

Thanks again for all

OlegKi commented on d2648c0 Sep 10, 2011

Hi Tony,

I see my demo with multiple headers only like the first step to solve the problem. The main current problem which I see is the wrong width calculation inside of column headers in the grid. If we take the simple grid as an example and then only remove the "width" attribute from the "table.ui-jqgrid-htable" we will see the problem. In case of multiline headers example it looks like here. The last demo can already have different widths in the second column (see here). So in any way one need first fix the problem with the width calculation in the table headers.

Best regards


I solved the problem with wrong width calculation in my project. You can resize columns with no limitations.

The example is here:

Only russian language for now - sorry ;)
Ask me, if you have any questions.


Hello wildrad,
Thanks for the code. Seem clean. I will test it.
One more thing - when we sort the sorting icon does not appear at the right column, but maybe this should be fixed in the base code.
Also important thing here is when we show/hide column and/or when we use columnChooser ( not tested from me)

OlegKi commented on d2648c0 Sep 10, 2011

Hello wildraid!

It's very good job! I find the idea to use hidden (height:0) in the first column headers very good. The Russian language, how you can guess, is not a problem for me :-)

Nevertheless you should make some modification in your code, The first problem is the usage of jQuery.clone method which have many bugs in different version of jQuery. Moreover if you do use jQuery.clone you should always change the ids of all child element (if any exist with ids). In you current code from your demo page there are many id duplicates which are not permitted in all versions of HTML/XHTML. For example you have two <th> elements with the id="jqMiscGroupHeader_id", two <th> elements with the id="jqMiscGroupHeader_book_name" and so on. The problem can be easy fixed.

Another problem is that the sorting icons, which are displayed on the right from the column headers, appears only in the "ID" column, but ever the icons will be not changed during sorting. The above problems not exist in my examples this and this described here.

One more thing. I personally find the usage of rowspan="2" (see my demos) very useful. Probably it's a matter of taste. So I think it would be good to have an option which could be used by users. So that the user can decide whether rowspan should be used.

In any way many thanks for your demos. I am sure, that one can combine both of described approaches to create a perfect multi-header solution for jqGrid.

I will try somethings and write you about the results.

Best regards

OlegKi commented on d2648c0 Sep 10, 2011

One more small remark. We should not forget to increase (the height and the width) the resizing div. In demos from the answer where exists also headers with large height. I think it can be helpful. See additionally the discussion in comments to the answer. The discussion is not finished. I had no time for more experiments, but I am sure that the usage on resizing dives having absolute position and having increased width, and which are placed over the right column border can be very helpful.


OlegKi commented on d2648c0 Sep 10, 2011

Hello wildraid!

By the way, the bug fixes (or the changes) to jqGrid which I described here solve the problem with sorting icons in your extGroupHeader extension method too. See this or this (with some minimal modifications) demos.

Best regards


Sorry for delay. These holidays are really busy.

Duplicate ID's are fixed.

Problem with sorting icons is best to be fixed in the base code. It's true. We need too much work-around code to handle this in the external function. I hope something similar to OlegKi code will be commited to the master soon. :)

Rowspan looks really cool, but it makes things even more complex. I'll think about the effective way to implement it.
Column hiding and reordering is possible. We just have to remove group rows and re-render them each time user changes the colModel.

Actually, i have a lot of custom functions for jqGrid, but all of them are used in totally controlled environment. They are not so bullet-proof and compatible with all other features as original functions are. That's why i am not trying to bother you and commit them to the main repository. :)

I'm mainly the PHP programmer, not JS ;)

OlegKi commented on d2648c0 Sep 11, 2011

Hello Tony,
Hello wildraid,

I works a little more abut reducing restrictions in my multicolumn approach which use rowSpan to increase the height of the columns. Here is my current intermediate result: the new demo. The new demo work already very good in Internet Explorer 9/8, Firefox and Opera. In Webkit-based browsers (Google Chrome and Safari) it has still the above listed restriction (column headers which has multiple rows have to have the same size to be correct displayed and be not resizable). The demo which work OK in webkit-based web browsers is here.

Nevertheless you can see progress in the sort time. I hope shortly we will have a good solution with minimal number of restrictions.

The most interesting for me now is to finding a clear way how to implement multirows column headers using rowSpan in Webkit-based browsers (Google Chrome and Safari). Probably you will find a solution way? It's the main reason why I decide to share this still not completed results with you.

Best regards


Hello wildraid,
Hello Oleg,

Thanks for the code and fixes.
To be a honest I like the implementation of wildraid - it is clean and simple and not much code.
Oleg thanks for the fix for the id.

Now I plan to implement this method, but if there is a better way everything is welcome.
Next step is:

  1. Make a method headerDestroy in order to get back to original header.
  2. rewrite showCol hideCol procedures in order to support dynamically show/hide of columns in this case
  3. rewrite sortableColumn (i.e columnChooser)

I think that the 1. and 2. are with higher priority - 3. can be fixed later.

Lets go



Ok, i have an idea how to implement 1 and 2 with a few lines of code.
I'll commit the code and update example in the evening.



You can resize, show\hide columns and change their order.
I've rewritten the code to make it possible. I also made my methods chainable and look like other jqGrid functions.

Added grid option groupHeader which holds settings for header groups.
The only available setting is label, but we can add class, height, rowspan later without losing backward compatibility.

Added column option hgroup. It associate column with particular header group.

The new grid methods are: updateGroupHeader and destroyGridHeader.

updateGroupHeader must be called after initial grid render and after each operation affecting colModel.
It removes the previous header groups markup (if nescessary) and re-creates it from scratch.

We also need the code of OlegKi to make sorting icons work properly with header groups.

P.S. I have no idea why example grid shrinks after hiding columns.
I dont have enough time to deal with it today.
Just reload the example page if grid becomes too small. ;)

OlegKi commented on d2648c0 Sep 14, 2011

It looks very good!

I will examine the code and write you more.

Small remark: to have standard look of the columnChooser you should include another plugin and CSS in the demo. See here detailed description or look at the demo from the another answer.

Best regards
P.S. I hope that Tony make soon the changes in the code for sorting icons.


Thank you very much. Seems very good.
I'm little busy these days, but tomorrow I will merge the changes again with the fix from Oleg


OlegKi commented on d2648c0 Sep 26, 2011

Hello Tony,
Hello Wildraid

I made some changes in my previous demo. Now the new demo has the following improvements:
1) it supports hidden columns. One can easy rewrite the code to use inside of the done callback of columnChooser, but I think it would be better to make some changes in the code of showHideCol. One should first of all define the names of the classes used in the first column header row (like "jqg-first-row-header" in my demo) and in the additional column group headers (like "ui-jqgrid-labels" in my demo). If you want I can made the corresponding changes in the code of jqGrid.
2) it supports many header groups (like in the Wildraid's demo)
3) tooltips on the column group headers in case of headertitles: true will be set
4) with respect of boolean useColSpanStyle parameter one defines whether colspan should be used or not. The same demo as above, but just with useColSpanStyle=false produce the following results. It is the same as in the Wildraid's demo.

What do you think about the demo? Should I post the corresponding suggestion to the grid.base.js code?

Best rgeards


Hello Oleg,
Thanks for the work. Currently I'm little busy. I will work at this during the weekends, so I can see your work better.
I think yes maybe we can mix both approaches..., but let me first see.
I plan to realise a new version after a 7-10 days.
Kind Regards


Hello Oleg,
As promised with little delay.
I think that useColSpanStyl eis very good in your work and maybe a better solution.
What I want to change is:

  1. make this function standard jqGrid method
  2. Parameters passed to method should be only one parameter - a object with the appropriate properties - like { useColSpanStyle: false, groupHeader : [...] ,...}
  3. setting the width in resizeStop is wrong, since it does not take care of shrinkToFit option.
  4. If you like you can made the changes in base in order to hide/show column, untill I make the chnges to the method.
  5. There are a smal fixes in CSS and some code optimazations.

Will work today on this


OlegKi commented on d2648c0 Oct 3, 2011

Hello Tony,

I imagined the final solution also as one object parameter { useColSpanStyle: false, groupHeader : [...] ,...} or like some extension of colModel or new colHeaders (where colModel have references to colHeaders items). So I absolutely agree with you here. I think also that the final solution should be integrated in the standard jqGrid code.

I made my demo specially as function in the demo and not as add-on or any modification of jqGrid base code to allow you to do this yourself. If I see something which I need I used to rewrite it a little if I include it in my code. So I though you will also rewrite the code during including it in jqGrid.

I can write my suggestions how to change the code of showHideCol to support hide/show column of multiheader grids. I need only to know the names of classes which you chosen for the different rows of the header (like ui-th-column-header or jqg-first-row-header in my code). So I suggest that you submit on github your current implementation of multiline headers and I will use your names of the classes.

About resizeStop I think you are right, but I think the changes should be made of cause in the original implementation of dragEnd.

Moreover the adjustment of the grid width on the column resizing I find very usefull (see my code inside of resizeStop). I think that to make the feature good working in any situation one can save the original value of the width parameter in the orgWidth parameter. Then one can test inside of dragEnd whether the grid was created with no width or with the width like 'auto' or '100%'. In the case one can increase the grid width like I do in my demo. One can reduce the code and make it good working with any combination of other parameters (inclusive shrinkToFit option) if one would call setGridWidth inside of dragEnd.

I think that one can move the part of dragEnd code in the new method setColumnWidth which can be used by many other users.

In any way it would be interesting to see your current implementation of multiline headers. How the structure of groupHeader looks like? There are many options how one can implement there. It would be good to find the representation which is easy in use and simple enough for understanding. Moreover one should be good error correction if the user will try to define overlapped headers.

Best regards

Please sign in to comment.
Something went wrong with that request. Please try again.