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_TopicIcon
Resizing ColumnChooser dialog
10/07/2014
22:52
Avatar
mdo77
New Member
Members
Forum Posts: 1
Member Since:
10/07/2014
sp_UserOfflineSmall Offline

You cannot make the ColumnChooser dialog non-resizable.

In the dlog_opts section, the "resizable" option gets set as "opts.resizable || true" meaning sending a false will not do anything.

13/07/2014
17:36
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

I posted before the suggestion (see the answer too) which describe how to make columnChooser resizable. The code still work. You can just include the code starting with $.jgrid.extend({columnChooser :function(opts){... from the answer and include the code fragment after jquery.jqGrid.min.js. In the way you will replace the original code of columnChooser with resazable version of it.

@Tony: probably one could do modify the original code of columnChooser  in the way? I use the code in all my grids more as two years and I didn't found any problem with the modified code which I suggested.

Best regards
Oleg

18/07/2014
17:29
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

@Oleg I will try to see the patch, but IMHO the source code is too much for this.
As always thank you for the support and invaluable experience with jqGrid.

Best Regards
Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

23/09/2014
01:32
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

Hello Tony,

I uploaded here the current version of columnChooser which I use. It is based on the current version of columnChooser on jqGrid. The changes are following

  • variables are defined at the beginning of the functions
  • functions are declared before there will be used (for example function call)
  • function insert always return a value: return perm; is inserted at the end of the function
  • unneeded quotes are removed from all object properties in the code. For example the code opts = $.extend({"width" : 420,...}); are replaced to opts = $.extend({width : 420,...});
  • testing for if($.ui) {if ($.ui.multiselect ) {...}} are simplified. Unneeded test for opts.msel === "multiselect" are removed because the same name of multiselect pluging can have another name opts.msel. For example to solve problem with the same name of both jQuery UI Multiselect Widget and another from http://www.erichynds.com/blog/.....ect-widget one have to use $.widget.bridge and in the case one need use opts.msel with the name other as "multiselect".
  • parameter opts of the function dlog_opts are renamed to options. The variable opts are already used in outer scope. The usage of two different variables having the same name in the same code fragment make the code more complex to read.
  • some additional code are added at the end of columnChooser and as resize callback of the function dlog_opts. The code implements resizing of multiselect lists of dialog (from the content of the dialog) on resizing of the main Column Chooser dialog.

Short comment to the resizing code. The original structure of content of the Column Chooser dialog looks like on the picture

divsImage Enlarger

If we start from the .ui-dialog-content then

  • >div>select - internal hidden select list with the attribute multiple="multiple". It will be used internally. It's hidden and don't need be resized
  • >div>div.ui-multiselect - the div with main information
  • >div>div.ui-multiselect>div.selected - the left part of the dialog with the header and the list of visible columns
  • >div>div.ui-multiselect>div.available - the right part of the dialog with the header and the list of hidden columns
  • >div>div.ui-multiselect>div.selected>div.actions - the header of the list of visible columns
  • >div>div.ui-multiselect>div.selected>ul.selected - the list of visible columns
  • >div>div.ui-multiselect>div.available>div.actions - the header of the list of hidden columns
  • >div>div.ui-multiselect>div.available>ul.available - the list of hidden columns

The code which I added in columnCooser at the end of the method changes CSS inline settings of the most above dives so that there have height: 100%; width: 100%; margin: auto. CSS of the right and the left pains (>div>.ui-multiselect>.selected and >div>.ui-multiselect>.available) will be set to width: 50%; box-sizing: border-box (width value will be calculated based on dividerLocation). After that the most elements of the dialog will be resized automatically correctly. One will just adjust the hight of ul elements (>div>div.ui-multiselect>div.selected>ul.selected and >div>div.ui-multiselect>div.available>ul.available). I did it inside of resize callback of the function dlog_opts.

The demo uses the code of new column chooser. Additionally is demonstrates usage of setColWidth method (see the answer and here). Tony you can include the method in the main code of jqGrid if you want. Additionally the demo demonstrates autosizeColumns function which works slowly, but it allows to set column widths based on the width of maximal content in the column and the column header. The requirement will be frequently asked. Probably the code could help other people.

Best regards
Oleg

P.S. I don't tested the resizing code in old versions of web browsers. If the tests will show some problems in the browsers I would suggest to add if(old browser) return to skip resizing code. In the way one will have correct resizing in new web browsers and one will have old (non-resizable) Column Chooser dialog in old browsers.

03/10/2014
11:38
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello Oleg,

 

I have put your code for columnChooser in the official release. 

Many thanks for this.

I have not minclude the other code for auto resizing columns I

 

My Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

10/12/2014
20:10
Avatar
davgino
Member
Members
Forum Posts: 31
Member Since:
20/03/2010
sp_UserOfflineSmall Offline

Hello Oleg,

Please explain how use new columnChooser from ver. 4.7.0

Thank you.

11/12/2014
14:07
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

Hi davgino,

you can use columnChooser exactly like before. The difference you will see if you resize the dialog. You will see that the elements of the dialog will be resized too.

Best regards
Oleg

11/12/2014
15:53
Avatar
davgino
Member
Members
Forum Posts: 31
Member Since:
20/03/2010
sp_UserOfflineSmall Offline

I have next code :

$grid.jqGrid('columnChooser', {
              msel_opts: {dividerLocation: 0.5},
              width:550,
              height:300,  for ver. 4.7.0 not work
              done : function (perm) {
                    if (perm) { // ok button
                        this.jqGrid("remapColumns", perm, true);
                        $grid.setGridWidth(wscreen-2, true);
                     }
                    else { // cancel button

               }
}

 

height:300,  for ver. 4.7.0 not work

$grid.setGridWidth(wscreen-2, true); for ver <4.7.0 work ok

but in ver 4.7.0 , if scrool vertical is present  , I   modified with $grid.setGridWidth(wscreen+16, true); 

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
37 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