JQGrid - toggling multiselect

Question

Is there a way to toggle the multiselect option of a grid?

Changing the multiselect parameter of the grid and calling for a reload has the side-effect of leaving the header behind when disabling or not creating the header column if multiselect was not TRUE upon the grid creation.

The closest I have come is setting multiselect to TRUE upon grid creation and using showCol and hideCol to toggle: $('#grid').showCol("cb").trigger('reloadGrid');

This has a side effect of changing the grid width when toggled. It appears the cb column width is reserved when it is not hidden.

Basically I'm attempting to create a grid with an "edit/cancel" button to toggle the multiselect -- very similar to how the iPhone/iPad handles deleting multiple mail or text messages.

Thank you in advance.

Answer 1

I full agree with Justin that jqGrid don't support toggling of multiselect parameter dynamically. So +1 to his answer in any way. I agree, that the simplest and the only supported way to toggle multiselect parameter will be connected with re-initialize (re-creating) the grid.

So if you need to change the value of multiselect parameter of jqGrid you need first change multiselect parameter with respect of respect setGridParam and then re-creating the grid with respect of GridUnload method for example. See the demo from the answer.

Nevertheless I find your question very interesting (+1 for you too). It's a little sport task at least to try to implement the behavior.

Some remarks for the understanding the complexity of the problem. During filling of the body of the grid jqGrid code calculate positions of the cells based on the value of multiselect parameter (see setting of gi value here and usage it later, here for example). So if you will hide the column 'cb', which hold the checkboxes, the cell position will be calculated wrong. The grid will be filled correctly only if either the column 'cb' not exists at all or if you have multiselect: true. So you have to set multiselect: true before paging or sorting of the grid if the column 'cb' exist in the grid. Even for hidden column 'cb' you have to set multiselect to true. On the other side you have to set multiselect to the value which corresponds the real behavior which you need directly after filling of the grid (for example in the loadComplete).

I hope I express me clear inspite of my bad English. To be sure that all understand me correctly I repeat the same one more time. If you want try to toggle multiselect dynamically you have to do the following steps:

• create grid in any way with multiselect: true to have 'cb' column
• set multiselect: false and hide 'cb' column in the loadComplete if you want to have single select behavior
• set multiselect: true always before refreshing the grid: before paging, sorting, filtering, reloading and so on.

I created the demo which seems to work. It has the button which can be used to toggle multiselect parameter:

In the demo I used the trick with subclassing (overwriting of the original event handle) of reloadGrid event which I described the old answer.

The most important parts of the code from the demo you will find below:

var events, originalReloadGrid, $grid = $("#list"), multiselect = false,
    enableMultiselect = function (isEnable) {
        $(this).jqGrid('setGridParam', {multiselect: (isEnable ? true : false)});
    };

$grid.jqGrid({
    // ... some parameters
    multiselect: true,
    onPaging: function () {
        enableMultiselect.call(this, true);
    },
    onSortCol: function () {
        enableMultiselect.call(this, true);
    },
    loadComplete: function () {
        if (!multiselect) {
            $(this).jqGrid('hideCol', 'cb');
        } else {
            $(this).jqGrid('showCol', 'cb');
        }
        enableMultiselect.call(this, multiselect);
    }
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
    {multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true, closeAfterSearch: true});

events = $grid.data("events"); // read all events bound to
// Verify that one reloadGrid event hanler is set. It should be set
if (events && events.reloadGrid && events.reloadGrid.length === 1) {
    originalReloadGrid = events.reloadGrid[0].handler; // save old
    $grid.unbind('reloadGrid');
    $grid.bind('reloadGrid', function (e, opts) {
        enableMultiselect.call(this, true);
        originalReloadGrid.call(this, e, opts);
    });
}

$("#multi").button().click(function () {
    var $this = $(this);
    multiselect = $this.is(":checked");
    $this.button("option", "label", multiselect ?
                "To use single select click here" :
                "To use multiselect click here");
    enableMultiselect.call($grid[0], true);
    $grid.trigger("reloadGrid");
});

UPDATED: In case of usage jQuery in version 1.8 or higher one have to change the line events = $grid.data("events"); to events = $._data($grid[0], "events");. One can find the modified demo here.

Answer 2

I really like what you are trying to do here, and think it would be a great enhancement for jqGrid, but unfortunately this is not officially supported. In the jqGrid documentation under Documentation | Options | multiselect you can see the Can be changed? column for multiselect reads:

No. see HOWTO

It would be nice if there was a link or more information about that HOWTO. Anyway, this is probably why you are running into all of the weird behavior. You may be able to work around it if you try hard enough - if so, please consider posting your solution here.

Alternatively, perhaps you could re-initialize the grid in place and change it from/to a multi-select grid? Not an ideal solution because the user will have to wait longer for the grid to be set up, but this is probably the quickest solution.