CODEWITHSUNDEEP
jqgrid
luckyMohan
luckyMohan

Reputation: 148

Jqgrid ColumnChooser column order change is not working

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.

  1. When I add {"msel_opts": $.ui.multiselect.defaults} as an option, I am getting ui undefined JS error.
  2. When I tried to include grid.jqueryui.js, got object or method not supported.

I am stuck @ this. Would somebody help please?

Upvotes: 3

Views: 5015

Answers (2)

luckyMohan
luckyMohan

Reputation: 148

For others who are in the same requirement, you may consider my columnchooser implementation. My Dialog Form Declaration. (Dialog box which will be shown when columnchooser button is clicked.

All required fields will not be allowed to remove.

Creating the ColumnChooser Button for my Grid.

jq("#grid").jqGrid('navButtonAdd','#pager',{
            caption: "Columns",
            title: "Customize Columns",
            onClickButton : function (){
            /*jq("#grid").jqGrid('columnChooser',{
                height:columnChooserHt
                });*/
                createDialogDiv();
                jq( "#dialog-form" ).dialog('open');
            }
        });

Adding Save(OK) and Cancel Buttons to my Div.

jq(function(){
    jq( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "OK": function() {
                changeColView();
                jq( "#dialog-form" ).dialog('close');
            },
            Cancel: function() {
                jq( "#dialog-form" ).dialog('close');
            }
        },
        close: function() {
        }
    }); 
});

Function which inserts the column names with the select boxes which needed to be displayed on the ColumnChooser Dialog Box.

function createDialogDiv(){
    var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel');
    var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames');
    //alert(JSON.stringify(colModelDiv));
    //alert(JSON.stringify(colNameDiv));
    var container = document.getElementById('dialog-form');
    //alert(colNamesDiv.length);
    var chckBox="";
    for(i=0;i<colNamesDiv.length;i++){
        if(colModelDiv[i].hidden && colModelDiv[i].hidden == true ){
            chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"'>"+colNamesDiv[i]+"</input><br/>";
        }else{
            if(colModelDiv[i].editrules && colModelDiv[i].editrules.required){
                chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' disabled>"+colNamesDiv[i]+"</input><br/>";
            }
            else
                chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' checked>"+colNamesDiv[i]+"</input><br/>";
        }

    }   
    container.innerHTML=chckBox;
}

Finally the actual method which changes the Columns chosen from Columnchooser.

function changeColView(){
    var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel');
    var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames');
    for(i=0;i<colNamesDiv.length;i++){
        var chckBox=document.getElementById(colNamesDiv[i]);
        if(chckBox && chckBox.value && (!(chckBox.checked || chckBox.disabled))){
            jq("#grid").jqGrid('hideCol',chckBox.value);
        }
        if(chckBox && chckBox.checked){
            jq("#grid").jqGrid('showCol',chckBox.value);
        }
    }
    jq("#grid").trigger('reloadGrid');
}

Plz let me know your thoughts on this one.

Upvotes: 1

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 3

Related Questions