1

I have below jqGrid:

<table id="_myGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_myPager" style="text-align: center;">
</div>

Trying to disable the entire jqGrid by performing below is not working:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">

   $(document).ready(function () {
     $('#_myGrid').closest('.ui-jqgrid').blockUI({ 
        message: '<h1>Being processed...</h1>', 
        css: { border: '3px solid #a00' } 
     });
   });

</script>

The error thrown is: "Object does not support/accept this property or method 'blockUI'"

and the same error is thrown.

Also I have tried:

 $('#_myGrid').blockUI({ ...

What am I doing wrong?

Willy
  • 9,848
  • 22
  • 141
  • 284

1 Answers1

3

You made small error in the usage of blockUI. Correct usage will be

$("#_myGrid").closest(".ui-jqgrid").block({
    message: "<h1>Being processed...</h1>",
    css: { border: "3px solid #a00" }
});

for blocking and

$("#_myGrid").closest(".ui-jqgrid").unblock();

for unblocking. The demo demonstrates the blocking. It displays

enter image description here

I would recommend you additionally to use theme: true option and replace css option to themedCSS. To allow you to reduce the number of CSS option which you use and to make the look which is more harmonically with the jQuery UI Theme which you use. For example the code

$("#_myGrid").closest(".ui-jqgrid").block({
    message: "<h1>Being processed...</h1>",
    theme: true,
    themedCSS: {
        width: "35%",
        left: "30%",
        border: "3px solid #a00"
    }
});

which I used in the demo produces together with the Redmond jQuery UI Theme the following results:

enter image description here

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Many thanks! It works perfectly. My problem was when including the jquery.blockUI. It was not being included correctly despite I had included it in the page. I had to include it in the master page. Great explanation and great example!again a lot of thanks to spend a bit of your time helping me. – Willy Nov 06 '13 at 17:59