libre-jqgrid 4.17.2 → 4.17.4

package/dist/modules/grid.jqueryui.js

@@ -0,0 +1,965 @@
+/**
+ * jqGrid addons using jQuery UI
+ * Author: Mark Williams
+ * Changed by Oleg Kiriljuk, oleg.kiriljuk@ok-soft-gmbh.com
+ * Maintained by rany2, ranygh@riseup.net
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ * depends on jQuery UI
+**/
+
+/*jshint evil:true, eqeqeq:false, eqnull:true, devel:true */
+/*global jQuery, define, exports, module, require */
+/*jslint browser: true, devel: true, eqeq: true, nomen: true, plusplus: true, unparam: true, vars: true, white: true */
+(function (global, factory) {
+	"use strict";
+	if (typeof define === "function" && define.amd) {
+		// AMD. Register as an anonymous module.
+		define([
+			"jquery",
+			"./grid.base",
+			//"../plugins/ui.multiselect",
+			"free-jqgrid-plugins/ui.multiselect",
+			"jquery-ui/dialog",
+			"jquery-ui/draggable",
+			"jquery-ui/droppable",
+			"jquery-ui/resizable",
+			"jquery-ui/sortable"
+		], function ($) {
+			return factory($, global, global.document);
+		});
+	} else if (typeof module === "object" && module.exports) {
+		// Node/CommonJS
+		module.exports = function (root, $) {
+			if (!root) {
+				root = window;
+			}
+			if ($ === undefined) {
+				// require("jquery") returns a factory that requires window to
+				// build a jQuery instance, we normalize how we use modules
+				// that require this pattern but the window provided is a noop
+				// if it's defined (how jquery works)
+				$ = typeof window !== "undefined" ?
+						require("jquery") :
+						require("jquery")(root);
+			}
+			require("./grid.base");
+			//require("../plugins/ui.multiselect");
+			require("free-jqgrid-plugins/ui.multiselect");
+			require("jquery-ui/dialog");
+			require("jquery-ui/draggable");
+			require("jquery-ui/droppable");
+			require("jquery-ui/resizable");
+			require("jquery-ui/sortable");
+			factory($, root, root.document);
+			return $;
+		};
+	} else {
+		// Browser globals
+		factory(jQuery, global, global.document);
+	}
+}(typeof window !== "undefined" ? window : this, function ($, window, document) {
+	"use strict";
+	var jgrid = $.jgrid, jqID = jgrid.jqID;
+	// begin module grid.jqueryui
+	var $UiMultiselect = $.ui != null ? $.ui.multiselect : null,
+		reorderSelectedColumns = function (iColItem) {
+			/* Background information:
+			 *
+			 * Multiselect contains the list of selected items this.selectedList,
+			 * which is jQuery wrapper of <ul> element. The items of this.selectedList
+			 * are <li> elements, which represent visible (hidden:false) and movable
+			 * (hidedlg:false) columns of the grid.
+			 *
+			 * Additionally there are exist hidden <select multiple="multiple">.
+			 * Every <option> of the <select> corresponds the column of the grid.
+			 * The visible columns (hidden:false) are selected. The value of the <option>
+			 * contains the column index (iCol) in colModel. <li> elements of
+			 * this.selectedLis have data with the "optionLink" pointed to the corresponding
+			 * option of the hidden select.
+			 *
+			 * this.grid is the DOM of the grid and this.newColOrder is the array with
+			 * ALL column names in the order, which should be applied after reordering
+			 * the grid. Additionally this.gh contains the COPY of p.groupHeader.groupHeaders.
+			 * It's important that startColumnName property of elements of
+			 * p.groupHeader.groupHeaders could be changed during reordering of the columns.
+			 * On the other side the user can't click Cancel button of columnChooser for
+			 * breaking reordering. Because of that this.gh contains the COPY of
+			 * p.groupHeader.groupHeaders and the original p.groupHeader.groupHeaders will be
+			 * not changed in the reorderSelectedColumns function.
+			 *
+			 * An important implementation problem: reorderSelectedColumns function will be
+			 * called after ONE reordering of the columns. On the other side, the user can
+			 * reorder the columns MULTIPLE TIMES before saving the new order. Thus, one
+			 * have to take in consideration not only the original order of columns in
+			 * colModel, but THE CURRENT order of the columns saved only internally in
+			 * the dialog in this.newColOrder.
+			 */
+			if (this.grid != null && this.grid.p != null) {
+				var that = this, p = this.grid.p, iCol, j, iGrp, ghItem,
+					gh = this.gh, selectedList = this.selectedList, inGroup = this.inGroup,
+					items = selectedList.find("li"), optionLink,
+					indexOfAddedItem = items.length - 1,
+					enumSelected = function (callback, startIndex, reverse) {
+						var i, opt, items = selectedList.find("li");
+						if (startIndex === undefined) {
+							startIndex = reverse ? items.length - 1 : 0;
+						}
+						for (i = startIndex; !reverse ? i < items.length : i >= 0; !reverse ? i++ : i--) {
+							opt = $(items[i]).data("optionLink");
+							if (opt && callback.call(items[i], parseInt(opt.val(), 10), i)) {
+								return i;
+							}
+						}
+					},
+					updateNewColOrder = function () {
+						// !!! the function set additionally indexOfAddedItem and update items
+
+						// remove iColItem from this.newColOrder
+						j = $.inArray(p.colModel[iColItem].name, that.newColOrder);
+						if (j >= 0) {
+							that.newColOrder.splice(j, 1);
+						}
+
+						// refill items
+						items = selectedList.find("li");
+
+						// iCol will be the index in newColOrder. The order of columns in items
+						// should be mostly THE SAME like in selectedList, but newColOrder
+						// contains additional elements (hidden and hidedlg). The array items
+						// on the other side contains just inserted iColItem element.
+
+						// we need find indexOfAddedItem - the index of <li> with iColItem
+						// in the list of this.selectedList.find("li") elements
+						iCol = 0;
+						enumSelected(
+							function (iColOld, index) {
+								if (iColOld === iColItem) {
+									indexOfAddedItem = index;
+									// if iColItem is in the same header group as p.colModel[iCol] or
+									// both belongs no header group then the column could be NOT in
+									// selectedList. I find better to insert the item AFTER the hidden
+									// or non-movable columns (like "rn", "subgrid" column or other)
+									while (iCol >= 0 && iCol < p.colModel.length && iCol !== iColItem &&
+											(p.colModel[iCol].hidden || p.colModel[iCol].hidedlg) &&
+											(inGroup == null ||
+											//inGroup[iCol] !== undefined && inGroup[iColItem] !== undefined &&
+											inGroup[iCol] === inGroup[iColItem])) {
+										iCol++;
+									}
+									that.newColOrder.splice(iCol, 0, p.colModel[iColItem].name);
+									return true; // stop enumeration
+								}
+								// selectedList contains SUBSET of columns from colModel, but newColOrder
+								// contains ALL columns. It's important that all columns from selectedList
+								// exist in newColOrder IN THE SAME order. Thus iCol will be the current
+								// index in newColOrder array with p.colModel[iColOld].name column name.
+								iCol = $.inArray(p.colModel[iColOld].name, that.newColOrder, iCol);
+								if (iCol < 0) {
+									// to be sure that the code works in case of some errors too
+									iCol = $.inArray(p.colModel[iColOld].name, that.newColOrder);
+								}
+								iCol++;
+							}
+						);
+					},
+					enumPreviousAndInsertAfter = function (iCol) {
+						if (inGroup[iCol] === inGroup[iColItem]) {
+							$(this).after(items[indexOfAddedItem]);
+							updateNewColOrder();
+							return true; // stop enumeration
+						}
+					},
+					enumNextAndInsertBefore = function (iCol) {
+						if (inGroup[iCol] === inGroup[iColItem]) {
+							$(this).before(items[indexOfAddedItem]);
+							updateNewColOrder();
+							return true; // stop enumeration
+						}
+					},
+					updateStartColumn = function (iCol) {
+						if (inGroup[iCol] === inGroup[iColItem] && inGroup[iCol] !== undefined) {
+							gh[inGroup[iCol]].startColumnName = p.colModel[iCol].name;
+							return true; // stop enumeration
+						}
+					};
+
+				// Fix potition of added/moved item iColItem in that.newColOrder array.
+				// We syncronize only the initial state of newColOrder. The position of
+				// iColItem item can be changed later in both selectedList and newColOrder
+				updateNewColOrder();
+
+				if (gh && gh[inGroup[iColItem]] !== undefined) {
+					// the item belong to some group
+					ghItem = gh[inGroup[iColItem]];
+					for (j = 0; j < ghItem.numberOfColumns; j++) {
+						iCol = p.iColByName[ghItem.startColumnName] + j;
+						if (!p.colModel[iCol].hidden && !p.colModel[iCol].hidedlg) {
+							// the columns are displayed in the selectedList
+
+							// We need to enumerate items in reverse order and to find the index of the item
+							// in the array items comparing the items by $(items[j]).data("optionLink").val()
+							// If the item is found then append prevously found item AFTER this one.
+							// We can use j variable bacause the outer loop will be exit (see break below)
+							enumSelected(
+								enumPreviousAndInsertAfter,
+								indexOfAddedItem - 1,
+								true // enum in reverse order
+							);
+							// If step 2 didn't find the group then we need examin NEXT items and find
+							// the items from the same group. We should test the items in sequential order
+							// after the item found. If the item is found then apend prevously found
+							// item BEFORE this one.
+							enumSelected(
+								enumNextAndInsertBefore,
+								indexOfAddedItem + 1
+							);
+							// fix the name of the first column in the group
+							enumSelected(updateStartColumn);
+							break; // !!!
+						}
+					}
+				} else if (gh) {
+					// The item from no group is added/moved.
+					// We have to verify that the item is not dropped inside of some header group
+					// find the index of added/moved element in this.selectedList.find("li")
+					items = selectedList.find("li");
+					j = enumSelected(function (iCol) {
+						if (iCol === iColItem) {
+							return true;
+						}
+					});
+					if (j + 1 >= items.length || j < 0) {
+						return;
+					}
+					optionLink = $(items[j + 1]).data("optionLink");
+					if (optionLink) {
+						iGrp = inGroup[parseInt(optionLink.val(), 10)];
+						if (iGrp !== undefined) {
+							optionLink = $(items[j - 1]).data("optionLink");
+							if (optionLink && inGroup[parseInt(optionLink.val(), 10)] === iGrp) {
+								// The next and the previous items are in the same group, but
+								// the added/moved item in NOT in the group.
+								// We have to move the item items[j] AFTER the last item of the group.
+								var iColNotInTheGroup = enumSelected(
+									function (iCol) {
+										if (inGroup[iCol] !== iGrp) {
+											return true; // stop enumeration
+										}
+									},
+									j + 1 // start enumeration with the index
+								);
+								$(items[iColNotInTheGroup === undefined || iColNotInTheGroup >= items.length ? items.length - 1 : iColNotInTheGroup - 1])
+									.after(items[indexOfAddedItem]);
+								updateNewColOrder();
+							}
+						}
+					}
+				}
+			}
+		};
+	if (jgrid.msie && jgrid.msiever() === 8) {
+		$.expr[":"].hidden = function (elem) {
+			return elem.offsetWidth === 0 || elem.offsetHeight === 0 ||
+				elem.style.display === "none";
+		};
+	}
+	// requiere load multiselect before grid
+	jgrid._multiselect = false;
+	if ($UiMultiselect) {
+		if ($UiMultiselect.prototype._setSelected) {
+			var setSelected = $UiMultiselect.prototype._setSelected;
+			$UiMultiselect.prototype._setSelected = function (item, selected) {
+				// the method will be called if the user clicks "+" button on the item of "available" list
+				// or if the user clicks "-" button on the item of "selected" list.
+				// The parameter "selected" is equal true on click on the item of "selected" list
+				// and false on click on the item of "available" list.
+				var ret = setSelected.call(this, item, selected), elt = this.element,
+					iColItem = parseInt(item.data("optionLink").val(), 10);
+				if (selected && this.selectedList) {
+					// reorder items of selectedList
+					// all items of selectedList from one group have to be together
+					// all items of availableList from one group have to be together
+					reorderSelectedColumns.call(this, iColItem);
+
+					// apply the new sort order to the original selectbox
+					this.selectedList.find("li").each(function () {
+						if ($(this).data("optionLink")) {
+							$(this).data("optionLink").remove().appendTo(elt);
+						}
+					});
+				}
+				return ret;
+			};
+		}
+		if ($UiMultiselect.prototype.destroy) {
+			$UiMultiselect.prototype.destroy = function () {
+				var self = this;
+				self.element.show();
+				self.container.remove();
+				if ($.Widget === undefined) {
+					$.widget.prototype.destroy.apply(self, arguments);
+				} else {
+					$.Widget.prototype.destroy.apply(self, arguments);
+				}
+			};
+		}
+		jgrid._multiselect = true;
+	}
+
+	jgrid.extend({
+		sortableColumns: function (tblrow) {
+			return this.each(function () {
+				var ts = this, p = ts.p, tid = jqID(p.id);
+				if (!p || !p.sortable || !$.jgrid.isFunction($.fn.sortable)) { return; }
+				function start() { p.disableClick = true; }
+				var sortableOpts = {
+					tolerance: "pointer",
+					axis: "x",
+					scrollSensitivity: "1",
+					items: ">th:not(:has(#jqgh_" + tid + "_cb" + ",#jqgh_" + tid + "_rn" + ",#jqgh_" + tid + "_subgrid),:hidden)",
+					placeholder: {
+						element: function (item) {
+							var el = $(document.createElement(item[0].nodeName))
+									.addClass(item[0].className + " ui-sortable-placeholder ui-state-highlight")
+									.removeClass("ui-sortable-helper")[0];
+							return el;
+						},
+						update: function (self, o) {
+							o.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css("paddingTop") || 0, 10) - parseInt(self.currentItem.css("paddingBottom") || 0, 10));
+							o.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css("paddingLeft") || 0, 10) - parseInt(self.currentItem.css("paddingRight") || 0, 10));
+						}
+					},
+					start: function () {
+						ts.grid.hDiv.scrollLeft = ts.grid.bDiv.scrollLeft;
+					},
+					update: function (event, ui) {
+						var th = $(">th", $(ui.item).parent()), tid1 = p.id + "_", permutation = [];
+						th.each(function () {
+							var id = $(">div", this).get(0).id.replace(/^jqgh_/, "").replace(tid1, ""),
+								iCol = p.iColByName[id];
+							if (iCol !== undefined) {
+								permutation.push(iCol);
+							}
+						});
+
+						$(ts).jqGrid("remapColumns", permutation, true, true);
+						if ($.jgrid.isFunction(p.sortable.update)) {
+							p.sortable.update(permutation);
+						}
+						setTimeout(function () { p.disableClick = false; }, 50);
+					}
+				};
+				if (p.sortable.options) {
+					$.extend(sortableOpts, p.sortable.options);
+				} else if ($.jgrid.isFunction(p.sortable)) {
+					p.sortable = { "update": p.sortable };
+				}
+				if (sortableOpts.start) {
+					var s = sortableOpts.start;
+					sortableOpts.start = function (e, ui) {
+						start();
+						s.call(this, e, ui);
+					};
+				} else {
+					sortableOpts.start = start;
+				}
+				if (p.sortable.exclude) {
+					sortableOpts.items += ":not(" + p.sortable.exclude + ")";
+				}
+				var $e = tblrow.sortable(sortableOpts), dataObj = $e.data("sortable") || $e.data("uiSortable") || $e.data("ui-sortable");
+				if (dataObj != null) {
+					dataObj.floating = true;
+				}
+			});
+		},
+		columnChooser: function (opts) {
+			var $self = this, self = $self[0], p = self.p, selector, select, dopts, mopts,
+				$dialogContent, multiselectData, listHeight,
+				colModel = p.colModel, nCol = colModel.length, colNames = p.colNames,
+				getMultiselectWidgetData = function ($elem) {
+					return ($UiMultiselect && $UiMultiselect.prototype && $elem.data($UiMultiselect.prototype.widgetFullName || $UiMultiselect.prototype.widgetName)) ||
+						$elem.data("ui-multiselect") || $elem.data("multiselect");
+				};
+
+			if ($("#colchooser_" + jqID(p.id)).length) { return; }
+			selector = $('<div id="colchooser_' + p.id + '" style="position:relative;overflow:hidden"><div><select multiple="multiple"></select></div></div>');
+			select = $("select", selector);
+
+			function call(fn, obj) {
+				if (!fn) { return; }
+				if (typeof fn === "string") {
+					if ($.fn[fn]) {
+						$.fn[fn].apply(obj, $.makeArray(arguments).slice(2));
+					}
+				} else if ($.jgrid.isFunction(fn)) {
+					fn.apply(obj, $.makeArray(arguments).slice(2));
+				}
+			}
+
+			opts = $.extend({
+				width: 400,
+				height: 240,
+				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: 470,
+					dialogClass: "ui-jqdialog"
+				},
+				/* dlog_opts is either an option object to be passed
+				   to "dlog", or (more likely) a function that creates
+				   the options object.
+				   The default produces a suitable options object for
+				   ui.dialog */
+				dlog_opts: function (options) {
+					var buttons = {};
+					buttons[options.bSubmit] = function () {
+						options.apply_perm();
+						options.cleanup(false);
+					};
+					buttons[options.bCancel] = function () {
+						options.cleanup(true);
+					};
+					return $.extend(true, {
+						buttons: buttons,
+						close: function () {
+							options.cleanup(true);
+						},
+						modal: options.modal || false,
+						resizable: options.resizable || true,
+						width: options.width + 70,
+						resize: function () {
+							var widgetData = getMultiselectWidgetData(select),
+								$thisDialogContent = widgetData.container.closest(".ui-dialog-content");
+
+							if ($thisDialogContent.length > 0 && typeof $thisDialogContent[0].style === "object") {
+								$thisDialogContent[0].style.width = "";
+							} else {
+								$thisDialogContent.css("width", ""); // or just remove width style
+							}
+
+							widgetData.selectedList.height(Math.max(widgetData.selectedContainer.height() - widgetData.selectedActions.outerHeight() - 1, 1));
+							widgetData.availableList.height(Math.max(widgetData.availableContainer.height() - widgetData.availableActions.outerHeight() - 1, 1));
+						}
+					}, options.dialog_opts || {});
+				},
+				/* Function to get the permutation array, and pass it to the
+				   "done" function */
+				apply_perm: function () {
+					var perm = new Array(p.colModel.length), i, gHead,
+						showHideColOptions = {
+							notSkipFrozen: opts.notSkipFrozen === undefined ? false : opts.notSkipFrozen,
+							skipSetGridWidth: true,
+							skipSetGroupHeaders: true
+						};
+
+					// we can use remapColumnsByName instead of remapColumns in general,
+					// but we try to hold the compatibility with old version. Thus we
+					// fill perm based on multiselectData.newColOrder
+					for (i = 0; i < p.colModel.length; i++) {
+						perm[i] = p.iColByName[multiselectData.newColOrder[i]];
+					}
+
+					$("option", select).each(function () {
+						if ($(this).is(":selected")) {
+							$self.jqGrid("showCol", colModel[this.value].name, showHideColOptions);
+						} else {
+							$self.jqGrid("hideCol", colModel[this.value].name, showHideColOptions);
+						}
+					});
+
+					if (opts.done) {
+						opts.done.call($self, perm);
+					}
+					if (p.groupHeader && (typeof p.groupHeader === "object" || $.jgrid.isFunction(p.groupHeader))) {
+						$self.jqGrid("destroyGroupHeader", false);
+						p.groupHeader.groupHeaders = multiselectData.gh; // use modified groupHeader
+						if (p.pivotOptions != null && p.pivotOptions.colHeaders != null && p.pivotOptions.colHeaders.length > 1) {
+							gHead = p.pivotOptions.colHeaders;
+							for (i = 0; i < gHead.length; i++) {
+								// Multiple calls of setGroupHeaders for one grid are wrong,
+								// but there are produces good results in case of usage
+								// useColSpanStyle: false option. The rowspan values
+								// needed be increased in case of usage useColSpanStyle: true
+								if (gHead[i] && gHead[i].groupHeaders.length) {
+									$self.jqGrid("setGroupHeaders", gHead[i]);
+								}
+							}
+						} else {
+							$self.jqGrid("setGroupHeaders", p.groupHeader);
+						}
+					}
+					var newWidth = !p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%") ? p.tblwidth : p.width;
+					if (newWidth !== p.width) {
+						$self.jqGrid("setGridWidth", newWidth, p.shrinkToFit);
+					}
+				},
+				/* Function to cleanup the dialog, and select. Also calls the
+				   done function with no permutation (to indicate that the
+				   columnChooser was aborted */
+				cleanup: function (calldone) {
+					call(opts.dlog, selector, "destroy");
+					call(opts.msel, select, "destroy");
+					selector.remove();
+					if (calldone && opts.done) {
+						opts.done.call($self);
+					}
+				},
+				msel_opts: {}
+			},
+			$self.jqGrid("getGridRes", "col"),
+			jgrid.col, opts || {});
+			if ($.ui) {
+				if ($UiMultiselect && $UiMultiselect.defaults) {
+					if (!jgrid._multiselect) {
+						// should be in language file
+						(jgrid.defaults != null && $.jgrid.isFunction(jgrid.defaults.fatalError) ? jgrid.defaults.fatalError : alert)("Multiselect plugin loaded after jqGrid. Please load the plugin before the jqGrid!");
+						return;
+					}
+					// ??? the next line uses $.ui.multiselect.defaults which will be typically undefined
+					opts.msel_opts = $.extend($UiMultiselect.defaults, opts.msel_opts);
+				}
+			}
+			if (opts.caption) {
+				selector.attr("title", opts.caption);
+			}
+			if (opts.classname) {
+				selector.addClass(opts.classname);
+				select.addClass(opts.classname);
+			}
+			if (opts.width) {
+				$(">div", selector).css({ width: opts.width, margin: "0 auto" });
+				select.css("width", opts.width);
+			}
+			if (opts.height) {
+				$(">div", selector).css("height", opts.height);
+				select.css("height", opts.height - 10);
+			}
+
+			select.empty();
+			var gh = p.groupHeader != null ? p.groupHeader.groupHeaders : 0,
+				colHeader = {}, k, j, iCol, ghItem;
+			// fill colHeader for columns which have column header
+			if (gh) {
+				for (k = 0; k < gh.length; k++) {
+					ghItem = gh[k];
+					for (j = 0; j < ghItem.numberOfColumns; j++) {
+						iCol = p.iColByName[ghItem.startColumnName] + j;
+						colHeader[iCol] = $.jgrid.isFunction(opts.buildItemText) ?
+								opts.buildItemText.call($self[0], {
+									iCol: iCol,
+									cm: colModel[iCol],
+									cmName: colModel[iCol].name,
+									colName: colNames[iCol],
+									groupTitleText: ghItem.titleText
+								}) :
+								$.jgrid.stripHtml(ghItem.titleText) + ": " +
+									$.jgrid.stripHtml(colNames[iCol] === "" ? colModel[iCol].name : colNames[iCol]);
+					}
+				}
+			}
+			// fill colHeader for all other columns
+			for (iCol = 0; iCol < nCol; iCol++) {
+				if (colHeader[iCol] === undefined) {
+					colHeader[iCol] = $.jgrid.isFunction(opts.buildItemText) ?
+							opts.buildItemText.call($self[0], {
+								iCol: iCol,
+								cm: colModel[iCol],
+								cmName: colModel[iCol].name,
+								colName: colNames[iCol],
+								groupTitleText: null
+							}) :
+							$.jgrid.stripHtml(colNames[iCol]);
+				}
+			}
+			$.each(colModel, function (i) {
+				if (!this.hidedlg) {
+					select.append("<option value='" + i + "'" +
+						(p.headertitles || this.headerTitle ? (" title='" + jgrid.stripHtml(typeof this.headerTitle === "string" ? this.headerTitle : colHeader[i]) + "'") : "") +
+						(this.hidden ? "" : " selected='selected'") + ">" + colHeader[i] + "</option>");
+				}
+			});
+
+			dopts = $.jgrid.isFunction(opts.dlog_opts) ? opts.dlog_opts.call($self, opts) : opts.dlog_opts;
+			call(opts.dlog, selector, dopts);
+			mopts = $.jgrid.isFunction(opts.msel_opts) ? opts.msel_opts.call($self, opts) : opts.msel_opts;
+			call(opts.msel, select, mopts);
+
+			// fix height of elements of the multiselect widget
+			$dialogContent = $("#colchooser_" + jqID(p.id));
+
+			$dialogContent.css({ margin: "auto" });
+			$dialogContent.find(">div").css({ width: "100%", height: "100%", margin: "auto" });
+
+			multiselectData = getMultiselectWidgetData(select);
+			if (multiselectData) {
+				// grid property will be used to access the grid inside of _setSelected
+				multiselectData.grid = self;
+				if (gh) {
+					// make deep copy of groupHeaders to be able to hold changes of startColumnName,
+					// but to apply the changes only after the user click OK button (not Cancel)
+					multiselectData.gh = $.extend(true, [], gh);
+
+					// filling the helper array inGroup. It contains
+					// an item for every column. The value is undefined if the column
+					// not belongs to a header group and it is 0-based index of the
+					// header group (the index in gh array) if the column belongs to
+					// a header group. The array inGroup helps us to detect whether
+					// two columns belong to the same group or not.
+					multiselectData.inGroup = new Array(p.colModel.length); // allocate array with undefined values
+
+					var iGrp, headerItem;
+					for (iGrp = 0; iGrp < gh.length; iGrp++) {
+						headerItem = gh[iGrp];
+						for (iCol = 0; iCol < headerItem.numberOfColumns; iCol++) {
+							multiselectData.inGroup[p.iColByName[headerItem.startColumnName] + iCol] = iGrp;
+						}
+					}
+				}
+				multiselectData.newColOrder = $.map(colModel, function (cm) { return cm.name; });
+				multiselectData.container.css({ width: "100%", height: "100%", margin: "auto" });
+
+				multiselectData.selectedContainer.css({ width: multiselectData.options.dividerLocation * 100 + "%", height: "100%", margin: "auto", boxSizing: "border-box" });
+				multiselectData.availableContainer.css({ width: (100 - multiselectData.options.dividerLocation * 100) + "%", height: "100%", margin: "auto", boxSizing: "border-box" });
+
+				// set height for both selectedList and availableList
+				multiselectData.selectedList.css("height", "auto");
+				multiselectData.availableList.css("height", "auto");
+				listHeight = Math.max(multiselectData.selectedList.height(), multiselectData.availableList.height());
+				listHeight = Math.min(listHeight, $(window).height());
+				multiselectData.selectedList.css("height", listHeight);
+				multiselectData.availableList.css("height", listHeight);
+				if (multiselectData.options != null && multiselectData.options.sortable) {
+					multiselectData.selectedList.on("sortupdate", function (e, ui) {
+						// remove fixed inline style values of width and height
+						// added during gragging
+						reorderSelectedColumns.call(
+							multiselectData,
+							parseInt(ui.item.data("optionLink").val(), 10)
+						);
+						ui.item.css({ width: "", height: "" });
+						if ($.jgrid.isFunction(opts.sortUpdate)) {
+							opts.sortUpdate.call(self, e, ui);
+						}
+					});
+				}
+				if ($.jgrid.isFunction(opts.init)) {
+					opts.init.call(self, multiselectData);
+				}
+			}
+		},
+		sortableRows: function (opts) {
+			// Can accept all sortable options and events
+			return this.each(function () {
+				var $t = this, grid = $t.grid, p = $t.p;
+				if (!grid) { return; }
+				// Currently we disable a treeGrid sortable
+				if (p.treeGrid) { return; }
+				if ($.fn.sortable) {
+					opts = $.extend({
+						cursor: "move",
+						axis: "y",
+						items: ">tbody>.jqgrow"
+					},
+					opts || {});
+					if (opts.start && $.jgrid.isFunction(opts.start)) {
+						opts._start_ = opts.start;
+						delete opts.start;
+					} else { opts._start_ = false; }
+					if (opts.update && $.jgrid.isFunction(opts.update)) {
+						opts._update_ = opts.update;
+						delete opts.update;
+					} else { opts._update_ = false; }
+					opts.start = function (ev, ui) {
+						$(ui.item).css("border-width", "0");
+						$("td", ui.item).each(function (i) {
+							this.style.width = grid.cols[i].style.width;
+						});
+						if (p.subGrid) {
+							var subgid = $(ui.item).attr("id");
+							try {
+								$($t).jqGrid("collapseSubGridRow", subgid);
+							} catch (ignore) { }
+						}
+						if (opts._start_) {
+							opts._start_.apply(this, [ev, ui]);
+						}
+					};
+					opts.update = function (ev, ui) {
+						$(ui.item).css("border-width", "");
+						if (p.rownumbers === true) {
+							$("td.jqgrid-rownum", $t.rows).each(function (i) {
+								$(this).html(i + 1 + (parseInt(p.page, 10) - 1) * parseInt(p.rowNum, 10));
+							});
+						}
+						if (opts._update_) {
+							opts._update_.apply(this, [ev, ui]);
+						}
+					};
+					$($t).sortable(opts);
+					/*if ($.jgrid.isFunction($.fn.disableSelection)) {
+						// The method disableSelection exists starting with jQuery UI 1.6,
+						// but it's declared as deprecated since jQuery UI 1.9
+						// see http://jqueryui.com/upgrade-guide/1.9/#deprecated-disableselection-and-enableselection
+						// so we use disableSelection only if it exists
+						var jQueryUiVersion = $.ui != null && typeof $.ui.version === "string" ?
+								$.ui.version.match(/(\d+)\.(\d+).(\d+)/) : [];
+						// jQuery UI version is: jQueryUiVersion[1].jQueryUiVersion[2].jQueryUiVersion[3]
+						if (jQueryUiVersion.length === 4 && jQueryUiVersion[1] === "1" &&
+							jQueryUiVersion[2] > 5 && jQueryUiVersion[2] < 9) {
+							// disable selection only for old jQuery UI
+							$($t.tBodies[0]).children("tr.jqgrow").disableSelection();
+						}
+					}*/
+				}
+			});
+		},
+		gridDnD: function (opts) {
+			return this.each(function () {
+				var $t = this, j, cn;
+				if (!$t.grid) { return; }
+				// Currently we disable a treeGrid drag and drop
+				if ($t.p.treeGrid) { return; }
+				if (!$.fn.draggable || !$.fn.droppable) { return; }
+				function updateDnD() {
+					var datadnd = $.data($t, "dnd");
+					$("tr.jqgrow:not(.ui-draggable)", $t).draggable($.jgrid.isFunction(datadnd.drag) ? datadnd.drag.call($($t), datadnd) : datadnd.drag);
+				}
+				var appender = "<table id='jqgrid_dnd' class='ui-jqgrid-dnd'></table>";
+				if ($("#jqgrid_dnd")[0] === undefined) {
+					$("body").append(appender);
+				}
+
+				if (typeof opts === "string" && opts === "updateDnD" && $t.p.jqgdnd === true) {
+					updateDnD();
+					return;
+				}
+				opts = $.extend({
+					drag: function (opts1) {
+						return $.extend({
+							start: function (ev, ui) {
+								var i, subgid;
+								// if we are in subgrid mode try to collapse the node
+								if ($t.p.subGrid) {
+									subgid = $(ui.helper).attr("id");
+									try {
+										$($t).jqGrid("collapseSubGridRow", subgid);
+									} catch (ignore) { }
+								}
+								// hack
+								// drag and drop does not insert tr in table, when the table has no rows
+								// we try to insert new empty row on the target(s)
+								for (i = 0; i < $.data($t, "dnd").connectWith.length; i++) {
+									if ($($.data($t, "dnd").connectWith[i]).jqGrid("getGridParam", "reccount") === 0) {
+										$($.data($t, "dnd").connectWith[i]).jqGrid("addRowData", "jqg_empty_row", {});
+									}
+								}
+								ui.helper.addClass("ui-state-highlight");
+								$("td", ui.helper).each(function (iCol) {
+									this.style.width = $t.grid.headers[iCol].width + "px";
+								});
+								if (opts1.onstart && $.jgrid.isFunction(opts1.onstart)) { opts1.onstart.call($($t), ev, ui); }
+							},
+							stop: function (ev, ui) {
+								var i, ids;
+								if (ui.helper.dropped && !opts1.dragcopy) {
+									ids = $(ui.helper).attr("id");
+									if (ids === undefined) { ids = $(this).attr("id"); }
+									$($t).jqGrid("delRowData", ids);
+								}
+								// if we have a empty row inserted from start event try to delete it
+								for (i = 0; i < $.data($t, "dnd").connectWith.length; i++) {
+									$($.data($t, "dnd").connectWith[i]).jqGrid("delRowData", "jqg_empty_row");
+								}
+								if (opts1.onstop && $.jgrid.isFunction(opts1.onstop)) { opts1.onstop.call($($t), ev, ui); }
+							}
+						}, opts1.drag_opts || {});
+					},
+					drop: function (opts1) {
+						return $.extend({
+							accept: function (d) {
+								if (!$(d).hasClass("jqgrow")) { return d; }
+								var tid = $(d).closest("table.ui-jqgrid-btable");
+								if (tid.length > 0 && $.data(tid[0], "dnd") !== undefined) {
+									var cn1 = $.data(tid[0], "dnd").connectWith;
+									return $.inArray("#" + jqID(this.id), cn1) !== -1 ? true : false;
+								}
+								return false;
+							},
+							drop: function (ev, ui) {
+								if (!$(ui.draggable).hasClass("jqgrow")) { return; }
+								var rowid = $(ui.draggable).attr("id"),
+									$srcGrid = ui.draggable.parent().parent(),
+									getdata = $srcGrid.jqGrid("getRowData", rowid);
+								if (!opts1.dropbyname) {
+									var tmpdata = {}, iSrc, iDest, srcName, destName,
+										srcColModel = $srcGrid.jqGrid("getGridParam", "colModel"),
+										destColModel = $("#" + jqID(this.id)).jqGrid("getGridParam", "colModel");
+									try {
+										for (iSrc = 0, iDest = 0; iSrc < srcColModel.length && iDest < destColModel.length; iSrc++) {
+											srcName = srcColModel[iSrc].name;
+											if (!(srcName === "cb" || srcName === "rn" || srcName === "subgrid")) {
+												// src column found, which need be copied
+												for (; iDest < destColModel.length; iDest++) {
+													destName = destColModel[iDest].name;
+													if (!(destName === "cb" || destName === "rn" || destName === "subgrid")) {
+														tmpdata[destName] = getdata[srcName];
+														break;
+													}
+												}
+												iDest++;
+											}
+										}
+										getdata = tmpdata;
+									} catch (ignore) { }
+								}
+								ui.helper.dropped = true;
+								if (opts1.beforedrop && $.jgrid.isFunction(opts1.beforedrop)) {
+									//parameters to this callback - event, element, data to be inserted, sender, reciever
+									// should return object which will be inserted into the reciever
+									var datatoinsert = opts1.beforedrop.call(this, ev, ui, getdata, $("#" + jqID($t.p.id)), $(this));
+									if (datatoinsert !== undefined && datatoinsert !== null && typeof datatoinsert === "object") { getdata = datatoinsert; }
+								}
+								if (ui.helper.dropped) {
+									var grid;
+									if (opts1.autoid) {
+										if ($.jgrid.isFunction(opts1.autoid)) {
+											grid = opts1.autoid.call(this, getdata, {
+												rowid: rowid,
+												ev: ev,
+												ui: ui
+											});
+										} else {
+											grid = Math.ceil(Math.random() * 1000);
+											grid = opts1.autoidprefix + grid;
+										}
+									}
+									// NULL is interpreted as undefined while null as object
+									$("#" + jqID(this.id)).jqGrid("addRowData", grid, getdata, opts1.droppos);
+									getdata[$t.p.localReader.id] = grid;
+								}
+								if (opts1.ondrop && $.jgrid.isFunction(opts1.ondrop)) { opts1.ondrop.call(this, ev, ui, getdata); }
+							}
+						}, opts1.drop_opts || {});
+					},
+					onstart: null,
+					onstop: null,
+					beforedrop: null,
+					ondrop: null,
+					drop_opts: {
+						//activeClass: "ui-state-active",
+						//hoverClass: "ui-state-hover"
+					},
+					drag_opts: {
+						revert: "invalid",
+						helper: "clone",
+						cursor: "move",
+						appendTo: "#jqgrid_dnd",
+						zIndex: 5000
+					},
+					dragcopy: false,
+					dropbyname: false,
+					droppos: "first",
+					autoid: true,
+					autoidprefix: "dnd_"
+				}, opts || {});
+
+				if (!opts.connectWith) { return; }
+				opts.connectWith = opts.connectWith.split(",");
+				opts.connectWith = $.map(opts.connectWith, function (n) { return $.jgrid.trim(n); });
+				$.data($t, "dnd", opts);
+
+				if ($t.p.reccount !== 0 && !$t.p.jqgdnd) {
+					updateDnD();
+				}
+				$t.p.jqgdnd = true;
+				for (j = 0; j < opts.connectWith.length; j++) {
+					cn = opts.connectWith[j];
+					$(cn).droppable($.jgrid.isFunction(opts.drop) ? opts.drop.call($($t), opts) : opts.drop);
+				}
+			});
+		},
+		gridResize: function (opts) {
+			return this.each(function () {
+				var $t = this, grid = $t.grid, p = $t.p, bdivSelector = p.gView + ">.ui-jqgrid-bdiv", onlyHorizontal = false, sel, gridHeight = p.height;
+				if (!grid || !$.fn.resizable) { return; }
+				opts = $.extend({}, opts || {});
+				if (opts.alsoResize) {
+					opts._alsoResize_ = opts.alsoResize;
+					delete opts.alsoResize;
+				} else {
+					opts._alsoResize_ = false;
+				}
+				if (opts.stop && $.jgrid.isFunction(opts.stop)) {
+					opts._stop_ = opts.stop;
+					delete opts.stop;
+				} else {
+					opts._stop_ = false;
+				}
+				opts.stop = function (ev, ui) {
+					$($t).jqGrid("setGridWidth", ui.size.width, opts.shrinkToFit);
+					$(p.gView + ">.ui-jqgrid-titlebar").css("width", "");
+					if (!onlyHorizontal) {
+						$($t).jqGrid("setGridParam", { height: $(bdivSelector).height() });
+					} else {
+						$(sel).each(function () {
+							$(this).css("height", "");
+						});
+						if (gridHeight === "auto" || gridHeight === "100%") {
+							$(grid.bDiv).css("height", gridHeight);
+						}
+					}
+					if ($t.fixScrollOffsetAndhBoxPadding) {
+						$t.fixScrollOffsetAndhBoxPadding();
+					}
+					if (opts._stop_) { opts._stop_.call($t, ev, ui); }
+				};
+				sel = bdivSelector;
+				if ((gridHeight === "auto" || gridHeight === "100%") && opts.handles === undefined) {
+					opts.handles = "e,w";
+				}
+				if (opts.handles) {
+					// test for "e, w"
+					var ar = $.map(String(opts.handles).split(","), function (item) {
+						return $.jgrid.trim(item);
+					});
+					if (ar.length === 2 && ((ar[0] === "e" && ar[1] === "w") || (ar[1] === "e" && ar[1] === "w"))) {
+						sel = p.gView + ">div:not(.frozen-div)";
+						onlyHorizontal = true;
+						if (p.pager) {
+							sel += "," + p.pager;
+						}
+					}
+				}
+				if (opts._alsoResize_) {
+					opts.alsoResize = sel + "," + opts._alsoResize_;
+				} else {
+					opts.alsoResize = sel;
+				}
+				delete opts._alsoResize_;
+				$(p.gBox).resizable(opts);
+			});
+		}
+	});
+	// end module grid.jqueryui
+}));