asked on

JQuery BlockUI and horizontal Scrolling with jqGrid

I have a web application that uses jqGrid on some of the pages. The pages have the ability to switch to readonly mode based on entitlements. I am using JQuery Block UI for my grids so that the end user cannot edit the grid contents. The problem that I have is that blockui only blocks the visible portion of my div (where jqGrid resides). If the end user scrolls to the right, a portion of the grid becomes unblocked and is editable. Ideally I want the grid to be blocked regardless of scrolling. Is there some kind of workaround that will allow me to block the grid while using horizontal scrolling?

Regards,

-K

Julian Hansen

The usual practice is to set the width of the covering object to the width of the document forexample if the container is called jqBlock then

$(function() {
  $('#jqBlock').width($(document).width());
  $('#jqBlock').height($(document).height());
});

Open in new window

Khopkins32

ASKER

unfortunately this will not work since I am rendering grid with jquery ui tabs. When I get the document width it skews the ui where the width overlaps the content within the tab. I also tried using the .scroll() api call to create a custom event that would fire when the user scrolls either left or right. Ideally I would like to move the blockui overlay as the end user scrolls although I am not sure of the best way to achieve this. I am open to suggestions.

Regards,

-K

Julian Hansen

Is there a site we can look at - difficult to accurately visualise the problem.

Khopkins32

ASKER

Below is the issue that I am currently experiencing when scrolling to the right:

ASKER CERTIFIED SOLUTION

Khopkins32

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Ok, but interested to know why this does not work see attached.

Works forme.
t125.html

Khopkins32

ASKER

The above doesn't work because with jqGrid spans across the page where a scrollbar is needed. JQuery BlockUI plugin will only block out the viewable area. As you scroll to the right you will see the grid being exposed and clickable as shown above. There for you have to use the JQuery BlockUI on the table element of the grid which works fine.

Julian Hansen

Ok without seeing your code I cannot argue but still don't see why it won't work.

Khopkins32

ASKER

After experimenting a bit, I stumbled on the answer. This will be a good reference for someone that happens to have the same issue.