I am new to jQuery & jgrid. I am trying to use columnchooser to both to let user remove columns and change column order. Removing and adding columns are working fine. But changing the column order is not working. Below is what I have in the code.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jqgrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/edi/standard.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jquery/ui-multiselect/ui.multiselect.css" />
<script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-ui-1.8.6.custom.min.js"></script>
<!-- <script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-ui-1.8.11.custom.js"></script>-->
<script type="text/javascript" src="/xxxx/resources/js/jqgrid/grid.locale-en.js"></script>
<script type="text/javascript" src="/xxxx/resources/js/jquery/ui.multiselect.js"></script>
<script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq.jgrid.no_legacy_api = false;
</script>
<script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.jqGrid.min.js"></script> <!-- 3.8.2 version-->
<!--<script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.searchFilter.js"></script>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXXX</title>
</head>
ui.multiselect.js file contains the suggested fix already.
$.widget("ui.multiselect", {
options: {
sortable: true,
searchable: true,
doubleClickable: 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);
}
}},
destroy: function() {
this.element.show();
this.container.remove();
// Modified to work with jquery.ui.1.8
if ($.Widget === undefined)
$.widget.prototype.destroy.apply(this, arguments);
else {
$.Widget.prototype.destroy.apply(this, arguments);
return this;
}}
And I am using the columnchooser as below.
jq("#grid").jqGrid('navButtonAdd','#pager',
{ caption: "Columns",
title: "Reorder Columns",
onClickButton : function (perm){
jq("#grid").jqGrid('columnChooser');
}
});
Below is what I have tried so far.
- When I add
{"msel_opts": $.ui.multiselect.defaults}as an option, I am getting ui undefined JS error. - When I tried to include grid.jqueryui.js, got object or method not supported.
I am stuck @ this. Would somebody help please?
It is difficult to find the error in your code, because you posted only one code fragment. Probably you try to add the button in the navigator toolbar with respect of ‘navButtonAdd’ before you created the navigator toolbar with respect of ‘navGrid’.
In any way one small working example here could help you to find your error.