Alert Dialog No rows selected or please select a row wrongly positionned

[neothoms]

Hi, I have a grid in a quite long page with inputs.

My JqGrid is not visible without using the vertical srollbar. The issue is that when the users click on the edit button a modal popup dialog is displayed in the position 100 / 100 but since the vertical scroller is used, the modal dialog is not visible at all.

For the edit / delete modal dialog the position are good.

You can see On these 2 print screen the position of the grid in the #1 and the position of the dialog #2

Could you please fix the issue and set the alert no rows selected the same as the edit / delete dialog.

Thank you

[OlegKi]

@neothoms Sorry, for the later answer. I'm not sure that I understand correctly the scenario, which you use. The message "Veuillez sélectionner une ligne", seems to be alerttext from the French locale. It should be shown if one clicks on "Edit"/"Delete" button with no row selected. Your screenshots show edit form, which typically blocks the interaction with the page outside of the edit form. Thus one should never see the alerttext. It's helpful to know, which combination of jqGrid options you use.

Another common recommendations. Form editing supports dataheight option, which can be used to reduce the height of edit form. One will see the vertical scroll bars inside of the edit form and the user will always see "Submit" and "Cancel" buttons.

Additionally, navGrid supports some options, which names start with alert: alerttop, alertleft, alertwidth, alertheight, alertzIndex. One can, for example, specify alerttop: 150, alertleft: 150 to display the alert on the position 150 x 150. It could solve the problem, which you describe.

I could try to improve default behavior of free jqGrid, but I need to have the demo, which reproduces the problem and the description of the test case. If the problem is common, then I could try to fix the problem by changing the code of free jqGrid.

[neothoms]

Hi, Here are the JqGrid configuration that I use. Example.txt

Yes, this is the alerttext message it yes it is shown when one clicks on "Edit"/"Delete" button with no row selected. The problem is that I have a lot of inputs and text before the jqgrid so the position of the jqgrid is something like 2000px or more from the top. But the position of the alerttext is 150 px so it is not visible when the user click on the edit button. The user has to scroll up two or three screens to see the popup and click the button but he must guess that there is a modal popup that has been displayed and where it is displayed.

When a line is selected, the popup position is correct. It is the grid position so the user see it without scrolling.

I think you have to fix it by sending the same position to the alerttext popup than to the edit / delete form. Thank you by advance.

[OlegKi]

Hi,

The Example.txt shows that you use not free jqGrid, which I develop, but commercial Guriddo jqGrid JS. Both products are based on jqGrid 4.7, but there implemented different features since the end of 2014. There are exist many common option, but there are a lot of new/different options. For example, styleUI: 'Bootstrap' option of Guriddo jqGrid JS corresponds to guiStyle: "bootstrap" (or guiStyle: "bootstrap4") option of free jqGrid. See here for the code example.

You should understand, that I could help you only with free jqGrid not not for the alternative fork Guriddo jqGrid JS. You can send questions about Guriddo in the Guriddo forum.

Regards Oleg

[neothoms]

Hi,

I am on free JqGrid, even though some parameters may have been wrong because I switch from Guriddo to free JqGrid .

[OlegKi]

OK, then some additional advices. You can improve your code using the features existing in free jqGrid.

First of all I'd recommend you to remove virtual scrolling (the option scroll: 1) and to use the standard peger/toppager or both. Virtual scrolling has many disadvantages and I don't recommend anyone use it in any version of jqGrid. On the other side you can consider to use loadonce: true scenario, which works good with no so large number of rows in the grid, for example <1000 or <10000 rows. Try the performance of local sorting, paging and filtering on [the demo] (https://www.ok-soft-gmbh.com/jqGrid/OK/performane-13-5000-25-free-jqgrid.htm), which has 5000 rows and 13 columns displayed in 25 rows per page.

The last remark. I'm not sure whether your problem is solved or not. You didn't close the issue. Is the problem with the position of alert fixed now?

[neothoms]

Hi, my problem is not closed. The solution to set the alert positions can't work because this is exactly the problem.

Here is a working example : https://jsfiddle.net/neothoms/gdh0watt/3/

If you click on the edit button without rows selected the alert text will be at the wrong place.

I don't have the time to make the example working with popup edit dialog but you woud see that they are at the grid position by default

[OlegKi]

Thank you for the demo and the test case. I posted the fix. Retry the demo https://jsfiddle.net/neothoms/gdh0watt/3/. It display alert in another position now.

[neothoms]

Thank you very much.

[kevindqc]

Hi,

This breaks on IE11 if w.scrollX is undefined. I tested the same page on Chrome, and w.scrollX is 0 instead of undefined.

[OlegKi]

@kevindqc Thank you! What about the usage of (w.scrollX || 0) or (w.scrollX || w.pageXOffset || 0)? Could it be a workaround?

[kevindqc]

Hi,

The first option wouldn't center on IE11 since scrollX/scrollY is always undefined, but at least it wouldn't return NaN.

So your second option is better as it addresses #366 for IE11, but it could be simplified.

This page says the following:

The pageXOffset property is an alias for the scrollX property:

and

For cross-browser compatibility, use window.pageXOffset instead of window.scrollX.

There's some additional info about earlier versions than IE9, but I assume you're not bothering to support these older browsers.

so I would use: (w.pageXOffset || 0) and (w.pageYOffset || 0)

Could probably also use jquery's scrollTop()/scrollLeft()

[OlegKi]

@kevindqc Thank you! I committed the corresponding bug fix to GitHub. I don't test free jqGrid in old version of IE, but still try to hold maximal compatibility as soon as it possible.