jQuery Grid Plugin - jqGrid - Topic: Column Chooser doesn't work

OlegK on Column Chooser doesn't work

Fri, 12 Mar 2010 15:58:13 +0200

Hallo dorian53!

To make columnChooser working with jQuery UI 1.8 you have to do 2 things:

initialize options of ui.multiselect, because $.ui.multiselect.defaults will be read from jQuery UI 1.7, but not from jQuery UI 1.8
change destroy function of ui.multiselect corresponds new jQuery UI 1.8 requirements

In initialize options of ui.multiselect you can do ONE from the following

add {"msel_opts": $.ui.multiselect.defaults} parameter of columnChooser. With this way you don't change defaults of ui.multiselect, but give all options which one needs directly in the columnChooser call.
add options inside of "ui.multiselect".

To change destroy function of ui.multiselect or to add options inside of "ui.multiselect" you can use ONE from the following technics:

First technic:

modify ui.multiselect.js by inserting block with options definition (marked bold below):

$.widget("ui.multiselect", {

options: {

sortable: true,

searchable: true,

animated: 'fast',

show: 'slideDown',

hide: 'slideUp',

dividerLocation: 0.6,

nodeComparator: function(node1, node2) {

var text1 = node1.text(),

text2 = node2.text();

return text1 == text2 ? 0 : (text1 < text2 ? -1 : 1);

}

_init: function() {

And modify destroy function to the following:

destroy: function() {

this.element.show();

this.container.remove();

if ($.Widget === undefined)

$.widget.prototype.destroy.apply(this, arguments);

else {

$.Widget.prototype.destroy.apply(this, arguments);

return this;

}

After such modifications ui.multiselect will be works both with jQuery UI 1.7 and jQuery UI 1.8 and you can use last version of jqGrid.

Second technic to change destroy function of ui.multiselect or to add options inside of "ui.multiselect" is following: you needs not modify any code of ui.multiselect.js, but override “ui.multiselect” class (overwrite $.ui.multiselect.prototype) inside of grid.jqueryui.js. How to do this read suggestion of Tony in /blog/?page_id=393/bugs/small-bug-in-grid-jqueryui-js-and-ui-multiselect-js/.

Best regards
Oleg

dorian53 on Column Chooser doesn't work

Fri, 12 Mar 2010 11:11:01 +0200

I use jQuery('#tab').jqGrid('columnChooser', {"msel_opts": $.ui.multiselect.defaults});

And i replaced destroyed in ui.multiselect like in last OlegK answer.

It's OK even if the modal inputs buttons are very bigs.

In short :

1. use jQuery('#tab').jqGrid('columnChooser', {"msel_opts": $.ui.multiselect.defaults});

2. change destroy ui.multiselect

3. change code grid.jquery.ui as in my answer 5

I've forgotten anything ?

dorian53 on Column Chooser doesn't work

Fri, 12 Mar 2010 10:57:01 +0200

Thanks a lot.

jQuery("#list").columnChooser(); is a mistake when i copied my source code in this reply.

I don't understand this topic http://www.trirand.com/blog/?p.....select-js/

There are, how many steps ?

I 've just followed the last tony answer.

in grid.jquery.ui, I've replaced

if ($.ui && $.ui.multiselect && $.ui.multiselect.prototype._setSelected) {
    var setSelected = $.ui.multiselect.prototype._setSelected;
    $.ui.multiselect.prototype._setSelected = function(item,selected) {
        var ret = setSelected.call(this,item,selected);
        if (selected && this.selectedList) {
            var elt = this.element;
            this.selectedList.find('li').each(function() {
                if ($(this).data('optionLink'))
                    $(this).data('optionLink').remove().appendTo(elt);
            });
        }
        return ret;
    }
}

if ($.ui && $.ui.multiselect) {

if($.ui.multiselect.prototype._setSelected) {
    var setSelected = $.ui.multiselect.prototype._setSelected;
    $.ui.multiselect.prototype._setSelected = function(item,selected) {
        var ret = setSelected.call(this,item,selected);
        if (selected && this.selectedList) {
            var elt = this.element;
            this.selectedList.find('li').each(function() {
                if ($(this).data('optionLink'))
                    $(this).data('optionLink').remove().appendTo(elt);
            });
        }
        return ret;
    }

}

if($.ui.multiselect.prototype.destroy) {

// your code here

}
}

Do I do something else ?

Thanks

OlegK on Column Chooser doesn't work

Thu, 11 Mar 2010 17:35:04 +0200

You are right Tony! I didn't read the code carfully enough. Neverthless the problem with jQuery UI 1.8 and Multiselect widget stay. At least in IE the columnChooser don't work at all with jQuery UI 1.8. One sees only an almost empty window. So either ui.multiselect.js or grid.jquery.ui.js should be changed early or later. In my version I changed ui.multiselect.js to be able quickly update jqGrid loaded directly from GitHub, so I almost forget about the problem.

Best regards
Oleg

tony on Column Chooser doesn't work

Thu, 11 Mar 2010 14:51:00 +0200

Hello,

Thank Oleg, but IMHO the problem is "trivial"

Also

Replace this code:

jQuery("#list").columnChooser();

with this

jQuery("#tab").columnChooser();

and you will be happy

Regards

Tony

OlegK on Column Chooser doesn't work

Wed, 10 Mar 2010 22:26:39 +0200

Hello dorian53!

Bonjour!

You use jqGrid together with jQuery UI 1.8 (RC3), but Multiselect widget (jQuery UI plugin) is not compatible with jQuery UI 1.8 und must be a little modified. One have to modify/overwrite "destroy" function from ui.multiselect.js and set default option of multiselect with a little another way (corresponds to new jQuery UI 1.8 standards). In

/blog/?page_id=393/bugs/small-bug-in-grid-jqueryui-js-and-ui-multiselect-js/ you'll find two ways to do this.

If you at least modify your code from

jQuery("#list").columnChooser();

jQuery('#list').jqGrid('columnChooser', {"msel_opts": $.ui.multiselect.defaults}});

your code starts working, but to works more clear you have to modify "destroy". If you makes small modifications of grid.jquery.ui.js or ui.multiselect.js, you can use an old short form of columnChooser usage.

Tony, jQuery UI 1.8 is really actual for a lot of persons used jqGrid. Could you please either modify ui.multiselect.js distributed together with jqGrid or modify grid.jquery.ui.js to solve known problems with using jQuery UI 1.8. It seems to me you torget to do this.

Best regards,

Oleg

dorian53 on Column Chooser doesn't work

Wed, 10 Mar 2010 17:50:33 +0200

Hello,

(i'm french, excuse me for my english)

Column Chooser plugin doesn't work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<html xmlns="http://www.w3.org/1999/xhtml&q.....t;>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Exemple</title>
    <link rel="stylesheet" type="text/css" media="screen" href="_css/redmond/jquery-ui-1.8rc3.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="_css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="_css/ui.multiselect.css" />

    <script src="_js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="_js/jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
    <script src="_js/grid.locale-fr.js" type="text/javascript"></script>
    <script src="_js/grid.jqueryui.js" type="text/javascript"></script>
    <script src="_js/ui.multiselect.js" type="text/javascript"></script>
    <script src="_js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="_js/main.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

main.js

jQuery(document).ready(function(){
jQuery("#tab").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'POST',
    colNames:['Inv No','Date', 'Amount','Tax','Total'],
    colModel :[
      {name:'invid', index:'invid', sortable: true},
      {name:'invdate', index:'invdate', sortable: true},
      {name:'amount', index:'amount', align:'right'},
      {name:'tax', index:'tax', align:'right'},
      {name:'note', index:'note', sortable:false},
    ],
    pager: '#pager',
    rowNum:500,
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,

    caption: 'Reporting',
    altRows: true,
    loadui: 'block'
});
jQuery("#tab").jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:false,refresh:false});
    jQuery("#tab").jqGrid('navButtonAdd','#pager',{
        caption: "Colonnes",
        title: "Organiser les colonnes",
        onClickButton : function (){
            alert('ok');
            jQuery("#list").columnChooser();
            return false;
        }
    });
});

I juste have the 'OK' alert.

Thanks