JQgrid Multiselect Conflict with eric hynds multiselect

2
votes

In my below mention demo it shows conflict between jqgrid used multiselect plug in and eric hynds multiselect plugin. What i want is to have eric hynds plug in combo box out side the jqgrid, and jqgrid multiselect should be as it is. But as the demo shows jqgrid multiselect get overridden and in column chooser also eric hynds multiselect is there.

enter code here
    <html>

<head>

<link rel="stylesheet" type="text/css" media="screen" href="css/cyberoam.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jquery-ui-1.8.22.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jqgrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jquery.ui.datepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/ui.multiselect.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery/jquery-ui-timepicker-addon.css" />

<script src="javascript/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="javascript/jquery/jquery.ui.widget.js" type="text/javascript"></script>
<script src="javascript/jquery/jqgrid/ui.multiselect.js" type="text/javascript"></script>
<script src="javascript/jquery/grid.locale-en.js" type="text/javascript"></script>
<script src="javascript/jquery/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="javascript/jquery/jquery.ui.datepicker.js" type="text/javascript"></script>
<script src="javascript/jquery/jquery-ui-1.8.21.custom.min.js" language="javascript"></script>
<script src="javascript/jquery/jqgrid/jqgrid.general.js" type="text/javascript"></script>
<script src="javascript/jquery/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="javascript/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/common.css" type="text/css" />


<link rel="stylesheet" type="text/css" href="css/jquery/jquery.multiselect.css" />
    <script type="text/javascript" src="javascript/jquery/jquery.multiselect.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery/jquery.multiselect.filter.css" />
    <script type="text/javascript" src="javascript/jquery/jquery.multiselect.filter.js"></script>


</head>
<script type="text/javascript">
jQuery(function(){

  //jQuery.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
            jQuery(".multiselect").multiselect({selectedList:10});
            //jQuery('#switcher').themeswitcher();
});
 jQuery(document).ready(function() {


var myData = [
                    { orderID: "10", orderDate: "2010-09-18", shipmentDate: "2010-09-20", orderStatus: "2" },
                    { orderID: "15", orderDate: "2010-09-20", shipmentDate: "2010-09-24", orderStatus: "3" },
                    { orderID: "30", orderDate: "2010-08-28", shipmentDate: "2010-09-01", orderStatus: "4" },
                    { orderID: "20", orderDate: "2010-10-16", shipmentDate: "2010-10-17", orderStatus: "1" }
                ], i, l, myRow, orderStatus;


            var grid = jQuery('#list');
            grid.jqGrid({
                data: myData,
                datatype: 'local',
                caption: 'Order Details',
                height: 'auto',
                gridview: true,
                headertitles: true,
                viewrecords: true,
                pager: '#pager',

                rownumbers: true,
                colNames: ['Order ID', 'Order', 'Shipment', 'Pending', 'Processing', 'Delivered', 'Order Status'],
                colModel: [
                    { name: 'orderID', index: 'orderID', key:true, width: 120, sorttype: 'int' },
                    { name: 'orderDate', index: 'orderDate', width: 180,
                      sorttype: 'date', formatter: 'date' },
                    { name: 'shipmentDate', index: 'shipmentDate', width: 180,
                      sorttype: 'date', formatter: 'date' },
                    { name: 'pending', width: 21, index: 'pending', formatter: 'checkbox', align: 'center',
                      stype: "select", searchoptions: { value: "1:Yes;0:No" } },
                    { name: 'processing', width: 21, index: 'processing', formatter: 'checkbox', align: 'center',
                      stype: "select", searchoptions: { value: "1:Yes;0:No" } },
                    { name: 'delivered', width: 21, index: 'delivered', formatter: 'checkbox', align: 'center',
                      stype: 'select', searchoptions: { value: "1:Yes;0:No" } },
                    { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true }
                ]
            }).jqGrid ('navGrid', '#pager', { edit: false, add: false, del: false, refresh: true, view: false },
                        {},{},{},{multipleSearch:true,recreateFilter:true})
              .jqGrid ('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
                  onClickButton: function() {
                      grid.jqGrid('columnChooser');
                  }
              });
});
</script>
<body>
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
  <option value="AFG">Afghanistan</option>
  <option value="ALB">Albania</option>
  <option value="DZA">Algeria</option>
  <option value="AND">Andorra</option>
  <option value="ARG">Argentina</option>
  <option value="ARM">Armenia</option>
  <option value="ABW">Aruba</option>
  <option value="AUS">Australia</option>
  <option value="AUT" selected="selected">Austria</option>

</select>

<div style="float:left">
        <table id="list"><tbody><tr><td/></tr></tbody></table>
        <div id="pager"></div>
    </div>

</body>
</html>
2
jqueryjqgridmulti-select

2 Answers

0
votes

So maybe jqGrid is using the multiselect class -- if so then just change your code to use a different class. Something like this:

jQuery(".ericmultiselect").multiselect({selectedList:10});

<select id="countries" class="ericmultiselect" multiple="multiple" name="countries[]">
....

Then it won't conflict with whatever jqGrid is using.

0
votes

This is really late but in case someone googles this.

You want to go into jquery.multiselect.js

Find this line:

$.widget("ech.multiselect", {

and change the widget/plugin name to something like

$.widget("ech.multiselectdifferentname", {

Now you have to find where multiselect is being called in your code. For the above example it would be

jQuery(".multiselect").multiselect({selectedList:10});

So you change this to

jQuery(".multiselect").multiselectdifferentname({selectedList:10});

The reason for this is because you are already using ui.multiselect.js which is the jquery.ui multiselect. This is what controls the columnChooser selectboxes. This is clashing with Eric Hynds multiselect plugin which uses the same name.