StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First of all I find your question very interesting, so +1 from me.</p> <p>One thing from the picture, which you posted and which is not directly the part of your question, seems me a little strange: the Column Chooser dialog has no resizable part at the right bottom corner of the dialog. It could be some additional settings which you use. I personally find better to have the dialog resizable.</p> <p>Now back to your main question. To change the default texts 'items selected', 'Add all' and 'Remove all' you can use the following code:</p> <pre><code>$.extend($.ui.multiselect, { locale: { addAll: 'Make all visible', removeAll: 'Hidde All', itemsCount: 'Avlialble Columns' } }); </code></pre> <p>Additionally you can consider to change the width of the Column Chooser dialog and the proportions between the left and the right panel with</p> <pre><code>$.extend(true, $.jgrid.col, { width: 500, msel_opts: {dividerLocation: 0.5} }); </code></pre> <p>or set the same parameters in the call of the <code>columnChooser</code>:</p> <pre><code>$grid.jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "Choose columns", onClickButton: function () { $(this).jqGrid('columnChooser', {width: 500, msel_opts: {dividerLocation: 0.5}}); } }); </code></pre> <p>As the results you will have the dialog like</p> <p><img src="https://i.stack.imgur.com/vFhF2.png" alt="enter image description here"></p> <p>see <a href="http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser4.htm" rel="nofollow noreferrer">the demo</a>.</p> <p>You can additionally consider to disable the searchable field of the column chooser if you don't plan to use it. It will save the width in the dialog:</p> <pre><code>$.extend(true, $.ui.multiselect, { defaults: { searchable: false }, locale: { addAll: 'Make all visible', removeAll: 'Hidde All', itemsCount: 'Avlialble Columns' } }); </code></pre> <p><strong>UPDATED</strong>: If you need some additional customization in the Column Chooser dialog you can do the changes manually<em>after</em> the dialog is created. For example the results of the code</p> <pre><code>$(this).jqGrid('columnChooser', {width: 550, msel_opts: {dividerLocation: 0.5}}); $("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions') .prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Search:</label>'); </code></pre> <p>will be the following:</p> <p><img src="https://i.stack.imgur.com/hlnoR.png" alt="enter image description here"></p> <p>see the corresponding demo <a href="http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser5.htm" rel="nofollow noreferrer">here</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload