jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

making columnChooser really resizable

Tags: columnchooser resizable

27/01/2012
15:41

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

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

fedorz

Member

Members

Forum Posts: 4

Member Since:
08/11/2012

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
30 Guest(s)

Currently Browsing this Page:
1 Guest(s)