JQGrid - multi-function multi selector

Question

Is there a way to toggle the multiselect grid option?

Changing the multiselect parameter of a grid and multiselect a reboot has the side effect of leaving a header when the header is turned off or off if multiselect not TRUE when creating the grid.

The closest I came by setting multiselect to TRUE when creating the grid and using showCol and hideCol before toggle: $('#grid').showCol("cb").trigger('reloadGrid');

This has the side effect of changing the width of the grid when switching. It seems the width of the cb column is reserved if it is not hidden.

Basically, I am trying to create a grid with the "edit / cancel" button to switch multiselect - very similar to how the iPhone / iPad handles the deletion of multiple text messages.

Thanks in advance.

Answer 1

I completely agree with Justin that jqGrid does not support the dynamic inclusion of the multiselect parameter. So +1 to his answer anyway. I agree that the simplest and only supported way to switch the multiselect parameter will be to re-initialize (recreate) the grid.

So, if you need to change the multiselect jqGrid parameter multiselect , you need to first change the multiselect parameter with respect to setGridParam , and then re-create the grid with respect to GridUnload . See demo from.

However, I find your question very interesting (+1 for you too). It is a small sporting task, at least to try to realize the behavior.

Some notes for understanding the complexity of the problem. When filling the body of the grid, the jqGrid code calculates the positions of the cells based on the value of the multiselect parameter (see the gi parameter value here and later to use here ). Therefore, if you hide the "cb" column in which the checkboxes are set, the cell position will not be calculated correctly. The grid will be filled correctly only if the "cb" column does not exist at all or you have multiselect: true . Thus, you must set multiselect: true before searching or sorting the grid if the "cb" column exists in the grid. Even for the hidden cb column, you need to set multiselect to true . On the other hand, you must set the multiselect value corresponding to the actual behavior that you need immediately after filling the grid (for example, in loadComplete ).

I hope I express my clear impression of my poor English. To be sure that everyone will understand me correctly, I repeat the same thing again. If you want to try dynamically switching multiselect , you need to do the following:

• create a grid in any way with multiselect: true to have a column "cb"
• set multiselect: false and hide the "cb" column in loadComplete if you want to have one select action
• set multiselect: true always before updating the grid: before searching, sorting, filtering, reloading, etc.

I created a demo that seems to work. It has a button that can be used to switch the multiselect parameter:

In the demo, I used a trick with a subclass (rewriting the original event descriptor) of the reloadGrid event, which I described the old answer .

You will find the most important parts of the code from the demo 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 . If using jQuery in version 1.8 or higher, you need to change the line events = $grid.data("events"); on events = $._data($grid[0], "events"); . Here you can find the modified demo.

Answer 2

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

Not. see howto

It would be nice if there was a link or additional information about this HOWTO. Anyway, this is probably why you come across strange behavior. Perhaps you can get around it if you try hard enough - if so, please consider posting your solution here.

Alternatively, maybe you could reinitialize the grid in place and change it from / to the grid with multiple choices? Not an ideal solution, because the user will have to wait longer until the grid is set up, but this is probably the fastest solution.

Answer 3

Simple answer:

 <input type="button" value="Multiselect" onclick="toggle_multiselect()"> <script> function toggle_multiselect() { if ($('#list1 .cbox:visible').length > 0) { $('#list1').jqGrid('hideCol', 'cb'); jQuery('.jqgrow').click(function(){ jQuery('#list1').jqGrid('resetSelection'); this.checked = true; }); } else { $('#list1').jqGrid('showCol', 'cb'); jQuery('.jqgrow').unbind('click'); } } </script> Where list1 is from <table id="list1"></table>.