Question

i am using jquery version 4.x and i have implemented column chooser on my jqgrid

Now when i click on “Remove All” link button or “Add All” link button then in throws following error in console :

“$(“ul.selected”).sortable is not a function“

Now when i click on (-) button to remove field from list, it throws following error :

“$(this).parent().draggable is not a function“

i have implemented jqgrid in following .js file :

function partygrid()
{
        $("#partylist").jqGrid({
            url: sitepath + 'party/grid',
            datatype: 'json',
            mtype: 'POST',
            height:'220',
            colNames:["party_name","party_type_name","status","action"],
            colModel :[ 
                          {name:'party_name', index:'party_name',width:120,editable:false,editoptions:{size:20},editrules:{required:true,number:false,maxlength:10}},
                          {name:'party_type', index:'party_type',width:120,editable:false,editoptions:{size:20},editrules:{required:true,number:false,maxlength:10}},
                          {name:'is_active', index:'is_active',search:false},
                          {name:'act', index:'act',width:50,search:false}
                       ],
            pager: '#partytoolbar',
            rowNum:10,
            rowList:[10,20,30],
            sortname: 'party_id',
            sortorder: 'desc',
            viewrecords: true,
            rownumbers: true,
            gridview: true,
            multiselect: true,
            autoresize:true,
            autowidth: true,
            editurl: sitepath + 'party/grid',
            toolbar: [true,"top"],
            gridComplete: function () 
            {
                 var grid = jQuery("#partylist");
                 var ids = grid.jqGrid('getDataIDs');
                 for (var i = 0; i < ids.length; i++) 
                 {  

                 }
            },
            caption: 'Party List'
         });
         jQuery("#partylist").jqGrid('navGrid','#partytoolbar',{view:false,edit:false,add:false,del:false,search: false});
         jQuery("#partylist").jqGrid('navButtonAdd','#partytoolbar',
                 { 
                     caption: "Columns", 
                     title: "Reorder Columns", 
                     onClickButton : function ()
                     { 
                        jQuery("#partylist").jqGrid('columnChooser'); 
                     } 
                 });
}    

I have implemented column chooser in above snippet.

but facing above mentioned two errors.

Any suggestions will be appreciated.

Thnx in advance

Answer 1

First of all you should look in the answer and verify that you included all CSS and JavaScript files in correct order and from the correct source. It seems to me that you don’t included jQuery UI jquery-ui.min.js which is not required for the base jqGrid, but is do requited for ui.multiselect.js and the columnChooser.

Additionally I would recommend you to use modified version of columnCooser like I described it in the answer. I hope that my suggestions will be included in the next release of jqGrid.