I am using jqgrid 4.6.0. Unable to get the available column/Add Column on columnchooser

I want the column chooser like: I have tried in fiddle, couldnt complete. new to fiddle.

http://www.ok-soft-gmbh.com/jqGrid/WorkingColumnChooser.htm

Please help.

http://jsfiddle.net/nagarajputhiyavan/yNw3C/13180/

Answers


Looking at the example on ok-soft, you need to initialize the grid pager before you can add your button to it.

Add the following code before you add your column chooser button.

$("#grid").jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

Note that you are also loading the javascript files in an incorrect order. The mutli select file should be loaded before jqGrid.


  • include jquery-ui.min.js
  • include ui.multiselect.js
  • include ui.multiselect.css
  • include jquery-ui.css

add new button which calls the column chooser

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

Did few workarounds in your sample fiddle, now it's working fine - Sample. I'm loading local data directly since you haven't explained your constraints.

  • Make sure your json data looks like following local data.
  • As well multiselect plugin loads first before jqgrid.

Following is modified code of grid,

var data = [{ id: "111",  thingy: "Test", blank: "N/A", number: "100",  status: "active"},
            { id: "112",  thingy: "Testing 123", blank: "N/A", number: "20",  status: "Inactive"},
            { id: "200",  thingy: "My data", blank: "N/A", number: "80",  status: "Inactive"}];

$("#grid").jqGrid({
    datatype: "local",
    data: data,
    height: 250,
    pager: '#pager',
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60 },
    {
        name: 'thingy',
        index: 'thingy',
        width: 90 },
    {
        name: 'blank',
        index: 'blank',
        width: 50},
    {
        name: 'number',
        index: 'number',
        width: 80 },
    {
        name: 'status',
        index: 'status',
        width: 80 }
    ],
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

$("#grid").jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
$("#grid").jqGrid("navButtonAdd", "#pager", {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose Columns",
      onClickButton: function () {
        $(this).jqGrid("columnChooser");
      }
});

Your grid and column chooser looks like below,


Need Your Help

Catching errors from new T()

c# generics xamarin.ios

I normally use this pattern for lazy loading from a base screen class:

Update ListView without clearing and blinking

java android multithreading listview

I need refresh my listview without clearing and blinking, just show new items. But I can't do that at once, because I getting items async during a few seconds. This code doesn't work correctly by the