Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_Related Related Topics sp_TopicIcon
making columnChooser really resizable
27/01/2012
15:41
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

Hello Tony,

some recent questions which I answered pushed me to analyse the code of columnChooser and makes some bug fixes and improvements. The mosts benifit of the changes: the columnChooser will be really resizable.

I suggest to make the following changes in grid.jqueryui.js:

1) To fix the line

if($("#colchooser_"+self[0].p.id).length ) { return; }

to the following

if($("#colchooser_"+$.jgrid.jqID(self[0].p.id)).length ) { return; }

2) The current option dlog_opts of the columnChooser has an important disadvantage. One can't add new option of the jQuery UI dialog without ovewriting of the whole dlog_opts functions which has many internal implementation details like call of opts.cleanup for example. I suggest to add new option dialog_opts which will be merged with the results of dlog_opts.

In the way one will be able to use jQuery UI dialog in very easy way. For example like the following

dialog_opts: {
    minWidth: 470,
    show: 'blind',
    hide: 'explode'
}

3) Make some additional changes to make the Column Chooser dialog really resizable. To do this I suggest the following additional changes:

- replaces the lines

return {
    "buttons": buttons,
    "close": function() {
        opts.cleanup(true);
    },
    "modal" : opts.modal ? opts.modal : false,
    "resizable": opts.resizable ? opts.resizable : true,
    "width": opts.width+20
};

to the following

return $.extend(true, {
    "buttons": buttons,
    "close": function() {
        opts.cleanup(true);
    },
    "modal" : opts.modal ? opts.modal : false,
    "resizable": opts.resizable ? opts.resizable : true,
    "width": opts.width+20,
    resize: function (e, ui) {
        var $container = $(this).find('>div>div.ui-multiselect'),
            containerWidth = $container.width(),
            containerHeight = $container.height(),
            $selectedContainer = $container.find('>div.selected'),
            $availableContainer = $container.find('>div.available'),
            $selectedActions = $selectedContainer.find('>div.actions'),
            $availableActions = $availableContainer.find('>div.actions'),
            $selectedList = $selectedContainer.find('>ul.connected-list'),
            $availableList = $availableContainer.find('>ul.connected-list'),
            dividerLocation = opts.msel_opts.dividerLocation || $.ui.multiselect.defaults.dividerLocation;

        $container.width(containerWidth); // to fix width like 398.96px
        $availableContainer.width(Math.floor(containerWidth*(1-dividerLocation)));
        $selectedContainer.width(containerWidth - $availableContainer.outerWidth() - ($.browser.webkit ? 1: 0));

        $availableContainer.height(containerHeight);
        $selectedContainer.height(containerHeight);
        $selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
        $availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));


    }
}, opts.dialog_opts || {})

- add some additional lines at the end of the columnChooser function:

// fix height of elements of the multiselect widget
var resizeSel = "#colchooser_"+$.jgrid.jqID(self[0].p.id),
    $container = $(resizeSel + '>div>div.ui-multiselect'),
    $selectedContainer = $(resizeSel + '>div>div.ui-multiselect>div.selected'),
    $availableContainer = $(resizeSel + '>div>div.ui-multiselect>div.available'),
    containerHeight = $container.height(),
    $selectedActions = $selectedContainer.find('>div.actions'),
    $availableActions = $availableContainer.find('>div.actions'),
    $selectedList = $selectedContainer.find('>ul.connected-list'),
    $availableList = $availableContainer.find('>ul.connected-list');
$container.height($container.parent().height()); // increase the container height
containerHeight = $container.height();
$selectedContainer.height(containerHeight);
$availableContainer.height(containerHeight);
$selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
$availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
// extend the list of components which will be also-resized
selector.data('dialog').uiDialog.resizable("option", "alsoResize",
    resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect'); 

One can see on the demo live the results of the changes.

Best regards
Oleg 

08/11/2012
00:42
Avatar
fedorz
Member
Members
Forum Posts: 4
Member Since:
08/11/2012
sp_UserOfflineSmall Offline

Thanks Oleg,

This is really great, specially #3 allowing the real resizing of the ColumnChoose, which is important when there are many columns.

Tony,

Could this (#3) be added to one of the upcoming official releases? I hate to modify the code just to redo it everytime when there is a new version coming out.

Thanks,

Zoltan

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
26 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com, swathi

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information