How to show/hide column with jqgrid (Repost)

The explanation?

Check their blog’s article about column Chooser. You should not use setColumn in jqgrid above version 4.0.

How to make it works?

Look at the old example from the answer. The example is mostly about another subject, but in the navigator bar you can see the “column chooser” button. Clicking on the button display column chooser dialog. You can drag any column name from the dialog and drop it on another location to change the column order. You can click on “-” to hide the column and drag any column from the list of hidden columns and drop it on in the list of visible columns.

To reproduce the behavior you should first be sure that during jqGrid downloading you have “jQuiery UI addons” (grid.jqueryui.js) selected. Then you should follows the steps:

  1. include ui.multiselect.css from the plugins subdirectory of jqGrid 4.0 source.
  2. include jQuery UI jquery-ui.min.js (not only jquery-ui.css needed typically for jqGrid)
  3. include ui.multiselect.js after the jquery-ui.min.js
  4. add new button which call the column chooser

The code can be like the following

var grid = $('#list');
grid.jqGrid ('navButtonAdd', '#pager',
             { caption: "", buttonicon: "ui-icon-calculator",
               title: "Choose Columns",
               onClickButton: function() {
                    grid.jqGrid('columnChooser');
               }
             });

Repost from here.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s