Make JqGrid Column Chooser Pop-Up Draggable

Question

I am trying to make jqgrid column chooser pop-up draggable anywhere in the screen.

Hence I tried to change the jquery.jqgrid.js as:

columnChooser: function (opts) {
    var self = this;
    if ($("#colchooser_" + $.jgrid.jqID(self[0].p.id)).length) { return; }
    var selector = $('<div id="colchooser_' + self[0].p.id + '" style="position:relative;overflow:hidden"><div><select multiple="multiple"></select></div></div>');
    var select = $('select', selector);

    function insert(perm, i, v) {
        if (i >= 0) {
            var a = perm.slice();
            var b = a.splice(i, Math.max(perm.length - i, i));
            if (i > perm.length) { i = perm.length; }
            a[i] = v;
            return a.concat(b);
        }
    }
    opts = $.extend({
        "width": 'auto',
        "height": 260,
        "classname": null,
        "done": function (perm) { if (perm) { self.jqGrid("remapColumns", perm, true); } },
        /* msel is either the name of a ui widget class that
        extends a multiselect, or a function that supports
        creating a multiselect object (with no argument,
        or when passed an object), and destroying it (when
        passed the string "destroy"). */
        "msel": "multiselect",
        /* "msel_opts" : {}, */

        /* dlog is either the name of a ui widget class that 
        behaves in a dialog-like way, or a function, that
        supports creating a dialog (when passed dlog_opts)
        or destroying a dialog (when passed the string
        "destroy")
        */
        "dlog": "dialog",
        "dialog_opts": {
            "minWidth": 550
        },
        "draggable": function (IsDraggable) {
            if (IsDraggable) {
                this.draggable();
            }

        },

       ....
       ....
       ....
       ....
       ....
}

My code is at the last property draggable of the above function. i.e. I created a draggable property which is like the below:

"draggable": function (IsDraggable) {
    if (IsDraggable) {
        this.draggable();
}

But my pop-up of my column chooser doesnot becomes draggable.

I am struck here. I want to move my column chooser in jqgrid anywhere in the screen.

Answer 1

First of all you should never ever to modify the code of jquery.jqgrid.js or jquery.jqgrid.src.js. Instead of that you can always use $.jgrid.extend(...); to replace jqGrid method columnChooser, for example, to new implementation. See my old answer as an example.

I suppose that the origin of your problem is missing JavaScript or CSS file which you have to include. It's important to understand that columnChooser uses Multiselect plugin ui.multiselect.js and ui.multiselect.css, which is implemented as jQuery UI widget. Thus one have to include jquery-ui.min.js too and not just jquery-ui.min.css. See the demo as an example of CSS and JS files which you should included or more simple demo, created for the answer.

Answer 2

I got the solution. What the problem is, I have fixed the top and left property in CSS and marked it as !important. So, when I drag the pop-up, the top and left position changes the value(which we can see through the browser's console window), but it never moves due to the !important I have set.

Now I resolved the problem by not setting the top and left property as !important.

Wrong one:

.ui-dialog{
    top: 10px !important;
    left 10px !important;
 }

The above is wrong. We should not the set the top and left.

Corrected as:

 .ui-dialog{
    top: 10px;
    left 10px;
 }