CODEWITHSUNDEEP
jqueryjqgrid
Yasser Shaikh
Yasser Shaikh

Reputation: 47804

How to disable / freeze out jqgrid?

I am working on jqgrid.

I have a requirement where in one of the columns in the jqgrid I have a button, and on click of the button some update will take place.

Now what I want is that when that button is clicked and till the time that update operation (ajax call) is going on, I want to disabled / freeze out the entire jqgrid.

I want to disbale jqgrid, i.e user should not be able to select anything on jqgrid, including the other buttons, the pager box, pager button, sort button etc...

I have prepared a jsfiddle here : http://jsfiddle.net/yrshaikh/9WhdS/ please use it if you find it useful while answering this question.

jQuery("#list47").jqGrid({
    data: mydata,
    datatype: "local",
    height: 150,
    rowNum: 999999,
    scroll: true,
    colNames: ['Inv No','Notes'],
    colModel: [
        {
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'note',
        formatter: function(){
            return "<input type='button' value='update something' class='btn'/>";
        }}
    ],
    pager: "#plist47",
    viewrecords: true,
    multiselect: true,
    caption: "how to freeze out jqgrid ?",
    beforeSelectRow: function(rowid, e)
    {
        jQuery("#list47").jqGrid('resetSelection');
        return(true);
    }

});

Is there any in built function to do so ? Please help me out on this.

Upvotes: 0

Views: 3443

Answers (2)

Utukku
Utukku

Reputation: 1375

Try using $("#lui_" + myGridId).show().

The grid has created this overlay internally an uses it as one part of the loader message. You can just show it or hide it and it will disable/enable the grid for you.

It doesn't look very good but it can be customized.

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

I dont think there is native function in jqGrid to do what you want to achieve. I will go for to use BlockUi plugin: http://jquery.malsup.com/block

DEMO HERE

$(".btn").click(function(){
    $("#list47").closest('.ui-jqgrid').block({ 
                message: '<h1>Processing</h1>', 
                css: { border: '3px solid #a00' } 
            });
});

Then call this piece of code when your ajax request is completed:

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

Upvotes: 1

Related Questions