Disabling entire jqGrid (jQuery Grid Plugin) using jquery.BlockUI plugin

Question

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?

Answer 1

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

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: