Disable entire jqGrid

Question

I have been looking for methods on how to disable a jqGrid and I found some:

1. Using BlockUI plugin: http://jquery.malsup.com/block/
2. Using jqGrid options: loadui and set it to 'block'

First option is a great solution (I have not tried yet) and it is clearer maybe but I want to avoid using plugins if I can whenever I can do it by setting object properties so I am trying the second option but it is not working for me, jqGrid continues enabled.

My jqgrid in my asp.net mvc 4 view:

<div id="jqGrid">
    @Html.Partial("../Grids/_PartialGrid")
</div>

and _PartialGrid:

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

so in the view, in script section I perform below on document ready and depending on the status of a property in my model (I disable it if id>0, otherwise I enable it on page reload):

@section scripts
{
    @Content.Script("/Grids/CompGrid.js", Url) // Content is a helper javascript loader (see end of this post)
}

<script type="text/javascript">
$(document).ready(function () {

    showGrid();
    var disableCompGrid = @Html.Raw(Json.Encode(Model.ItemCompViewModel));
    setStatusCompGrid(disableCompGrid.id > 0);

}
</script>

CompGrid.js is:

function showGrid() {
    $('#_compGrid').jqGrid({
        caption: paramFromView.Caption,
        colNames: ....
}

function setStatusCompGrid(disabled) {
           $('#_compGrid').jqGrid({
                loadui: 'block',
                loadtext: 'Processing...'
           });
}

In the code above, also I have tried to pass as parameter disabled to showGrid function and depending on if it is true or false to set a variable to 'block' or 'enable' respectively and then setting loadui property with this variable but it is not working.

Content.cshtml:

@using System.Web.Mvc;

@helper Script(string scriptName, UrlHelper url)
{
    <script src="@url.Content(string.Format("~/Scripts/{0}", scriptName))" type="text/javascript"></script>
}

Any ideas?

Answer 1

It's important to understand that the call $('#_compGrid').jqGrid({...}); converts initial empty <table id="_compGrid"></table> element to relatively complex structure of dives and tables. So you can do such call only once. Such call creates and initialize the grid. In other words the function showGrid has bad name. The function can be called only once. The second call of it will test that the grid already exist and it will do nothing. If you need to change some parameters of existing grid you can use setGridParam method.

In the case you can use absolutely another solution to block the grid. After the call $('#_compGrid').jqGrid({...}); the DOM element of the initial table get some expandos - new property or method. For example $('#_compGrid')[0] will contains grid property which contains beginReq and endReq methods. So you can first create the grid (in the showGrid function) and include options loadui: 'block' and loadtext: 'Processing...' in the list of options which you use. Then if you need to block the grid later you can use

$('#_compGrid')[0].grid.beginReq();

and the code

$('#_compGrid')[0].grid.endReq();

to remove blocking. See the demo which demonstrates this. Alternatively you can show overlays created by jqGrid manually like I described in the answer. The code will be simple enough:

var gridId = "_compGrid"; // id of the grid
...
$("#lui_" + gridId).show();
$("#load_" + gridId).text("Processing...").show();

to show the overlay and

$("#lui_" + gridId).hide();
$("#load_" + gridId).hide();

to hide the overlay. See another demo which works exactly like the first one.

Answer 2

you don't need any plugin. Just add/remove css:

.disabled {
  pointer-events: none;
  //optional
  opacity: 0.4;
}

DEMO