Forum
Log In
Home
Topic RSS
17:50
10/03/2010
Offline
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>
<table id="tab"></table>
<div id="pager"></div>
</body>
</html>
main.js
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
22:26
10/08/2009
Offline
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();
to
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
14:51
Moderators
30/10/2007
Offline
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
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
17:35
10/08/2009
Offline
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
10:57
10/03/2010
Offline
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;
}
}
By
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
11:11
10/03/2010
Offline
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 ?
15:58
10/08/2009
Offline
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
Most Users Ever Online: 715
Currently Online:
27 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
