[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1949
  • Last Modified:

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
0
Khopkins32
Asked:
Khopkins32
  • 5
  • 4
1 Solution
 
Julian HansenCommented:
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

0
 
Khopkins32Author Commented:
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
0
 
Julian HansenCommented:
Is there a site we can look at - difficult to accurately visualise the problem.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

horizontal scrolling issue
0
 
Khopkins32Author Commented:
I have solved this issue. I simply executed the following statement:

$.blockUI.defaults.overlayCSS.opacity = .2;
$.blockUI.defaults.overlayCSS.cursor = "auto";
$('.ui-jqgrid-btable').block({message: null});
0
 
Julian HansenCommented:
Ok, but interested to know why this does not work see attached.

Works forme.
t125.html
0
 
Khopkins32Author Commented:
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.
0
 
Julian HansenCommented:
Ok without seeing your code I cannot argue but still don't see why it won't work.
0
 
Khopkins32Author Commented:
After experimenting a bit, I stumbled on the answer. This will be a good reference for someone that happens to have the same issue.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now