0

is there a way to positioning the dialog message "Please select row" in the corner left top of the selected grid?

I just want the same behavior in alert warning, just like the edit and delete form..

This topic solution dont work for me.. JQGrid position of the AlertMod warning message

i have 3 grids in same page and if you click in one row of last grid, the message of warning appears in top of the page and its not perceptible for the user...

can anyone help me?

thanks in advance

Solution:

var orgViewModal = $.jgrid.viewModal;

$.extend($.jgrid, {
    viewModal: function (selector, o) {
        if (selector === '#alertmod') {
            var $gbox = $(o.gbox), $selector = $(selector);
            var of = $gbox.offset(), w = $gbox.width(), h = $gbox.height(); 
            var w1 = $selector.width(), h1 = $selector.height();
            $selector.css({
                'top': of.top + ((h-h1)/2),
                'left': of.left + ((w-w1)/2)
            });
        }
        orgViewModal.call(this, selector, o);
    }
});

To other interested persons, this solution works for me. Only changes the position of the alert box and keep everything else equal.

Community
  • 1
  • 1
Paulo Pinto
  • 194
  • 1
  • 8
  • it doesn't work for me, even if i write only $selector.css({top: 100,left: 100}); I've got only default positioning. The height of my table is more than the height of the window but, as I understand, initialization of the alert window is done before gridComplete and data loaded, so its position at the center of the window without scrolling in mind. I still searching for solution. – Alex Oct 10 '13 at 13:46

3 Answers3

0

look at this answer

http://www.ok-soft-gmbh.com/jqGrid/CenterEditForm.htm

you need to change your beforeShowForm event

or you can implement this function on afterShowform event 

function centerForm ($form) {
                    $form.closest('div.ui-jqdialog').position({
                        my: "center",
                        of: $('#grid').closest('div.ui-jqgrid')
                    });
                    }

Piyush Sardana
  • 1,748
  • 4
  • 19
  • 33
  • i think this wont work, because i wanna modify the position of warning message when i dont have selected rows.. and my events beforeShowForm, afterShowform only fires when i have a selected row. – Paulo Pinto Jul 30 '12 at 16:43
  • open the link and click on edit without selecting any row, you will know what i'm saying – Piyush Sardana Jul 30 '12 at 16:46
  • i just trie that, but dont work.. only work on open the edit form, but if i dont select a row, the warning message stay in same position. – Paulo Pinto Jul 30 '12 at 17:34
  • those links are with a row selected, and with no row selected... this solution worked for me is the behavior of the alert message was the same as the edit form .. – Paulo Pinto Jul 30 '12 at 17:38
0

If I understand correct your question you can use alerttop and alertleft options of navGrid. The parameters could be included in parameters option of navGrid. The answer describes one more non-documented options of navGrid.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I realized that this solution allows you to configure the position of the alert box, but I can not get the position dynamically for each grid. If I have 4 or 5 grids on the same page I have to set up with fixed positions for each grid and have no way to do this dynamic as it appears the edit forms. right? the only thing I want is that the warning message to appear in the same place that the edit forms. (sorry for my bad english) – Paulo Pinto Jul 30 '12 at 17:44
  • @PauloPinto: You are right. The values of `alerttop` and `alertleft` are static and can't be good set if you use grids with `height: "auto"` for example. In the case I see two main ways to solve the problem: 1) to use `navButtonAdd` to add your custom buttons which looks like the original buttons. In the case you can get `selrow` or `selarrrow` parameters to verify whether any row is selected and display your custom message. 2) You can overwrite (subclass) the original `$.jgrid.viewModal` method and set your own implementation which change the position only and call the original method. – Oleg Jul 30 '12 at 19:39
  • @PauloPinto: Look at [the answer](http://stackoverflow.com/a/8518501/315935) for an example how to subclass jqGrid method. You can use `$.extend($.jgrid,{viewModal: : function (selector,o){...}});` to subclass the `$.jgrid.viewModal` method. – Oleg Jul 30 '12 at 19:55
  • Thank you. The second solution is just what i need.. But i still have one problem, i cant call correctly the default behaviour after i change the position of modal. $.extend($.jgrid,{ viewModal: function (selector,o){ var p = jQuery(o.gbox).position(); $(selector).css({ 'top':p.top, 'left':p.left }); //Continue as default, if in this line i write a // $(selector).show() //the dialog warnig show in the position i want... } }); – Paulo Pinto Jul 31 '12 at 09:46
  • @PauloPinto: You should first save the original implementation of `$.jgrid.viewModal` in a variable: `var orgViewModal = $.jgrid.viewModal;`. Then you can use `orgViewModal.call(this, selector, o);` at the end of your implementation of `viewModal`. – Oleg Jul 31 '12 at 09:56
  • Thank you. i've tried "var orgViewModal = $.fn.jqGrid.viewModal;" instead of "$.jgrid.viewModal"... im so noob.. Thank you.. worked perfectly.. Thank You! – Paulo Pinto Jul 31 '12 at 10:10
  • @PauloPinto: You are welcome! I'm glad, that I could help you. – Oleg Jul 31 '12 at 10:21
  • to other interested persons, this solution works for me. Only changes the position of the alert box and keep everything else equal.##var orgViewModal = $.jgrid.viewModal;$.extend($.jgrid,{viewModal:function(selector,o){if(selector == '#alertmod'){var of = jQuery(o.gbox).offset();var w = jQuery(o.gbox).width(); var h = jQuery(o.gbox).height();var w1 = $(selector).width();var h1 = (selector).height(); $(selector).css({ 'top':of.top+((h-h1)/2), 'left':of.left+((w-w1)/2) }); } orgViewModal.call(this, selector, o); } });##thanks to @Oleg – Paulo Pinto Jul 31 '12 at 10:33
  • @PauloPinto: It's better if you *append* the text of your question with words like "Solution" and would add the code at the end of the text of your question. The code in comment is more difficult to read and it will be not found during searching. – Oleg Jul 31 '12 at 10:38
0

As I wrote upper in a comment I have a long table and I need alert window always to be at the center of viewport. So I need dynamic positioning of the alert window. I need to set position after user scroll page down and click "edit" or "delete".

As I understand Nav does not have events like "beforeShowForm" or "beforeShowSearch" for the alert modal window. Also I can't catch clicks on the pager.

Solution provided by Oleg and Paulo Pinto does not work for me. I don't know why. I even don't understand how it works :)

So I found my own straight and ... not nice way.

loadComplete: function(){
    $(window).scroll(function() {
        $('#alert_window_id').center();
    });
}

where "center()" is

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

After loadComplete the alert div seems already exist and grid has its full height so window scroll exists too. Because I have no events of clicking "edit" button or alert dialog shown - i am repositioning alert dialog after every scroll event.

Alex
  • 414
  • 4
  • 10