製品版のみの機能

グリッド - カスタム モーダル ダイアログ

サンプルは、グリッドのデフォルト モーダル ダイアログをカスタム モーダル ダイアログで置き換えます。
表示:
レコード
会社生涯セールス市場の潜在能力現金資産売掛金勘定国
Sportan40882580.184210805124.61264714.7163084.44VU
Bugsall29231147.892505447478.96370690.3969242.24FM
Hydrocom35628528.184930069033.99403038.6456183.05KE
Eclipto20178683.422488740024.16237368.7650048.48TZ
Paprikut25575955.421923959087.58235064.5774596.25LR
Unia13462122.231679474693.72498174.192476.88DZ
Isologix38448387.274696918929383266.9376247.35JO
Deepends13730298.024825809829.87416146.0862282.5NO
Quantasis19875841.193489758844.49415699.2654628.5ID
Playce45960329.032740892152.3447054.4969204.65VI

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。

カスタム モーダル ダイアログは、完了やキャンセル ボタン、あるいはキーボードの Enter と ESC キーでダイアログを閉じて変更を適用します。グリッドとのインタラクションがブロックされず、ダイアログが開いている間にユーザーは編集モードの行を変更できます。

コード ビュー

クリップボードへコピー 
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
	<!--Sample JSON Data-->
	<script src="/data-files/company-data.js"></script>
	<style>
		button
		{
			margin:0.5em 0 0.5em 0.4em;
		}
	</style>
</head>
<body>
	<table id="grid"></table>

	<script>
		$.widget("ui.SplitterDialog", $.ui.igGridModalDialog, {
			_create: function () {
				var d = this.element, self = this, gc, header, footer, $buttonSet, $buttonOK, $buttonCancel, o = this.options, self = this,
				outerContianer;
				// get the grid's container
				gc = d.closest(".ui-iggrid");

				d.detach();
				
				outerContianer = "<div id='customContainerDiv'></div>";

				gc.wrap(outerContianer).wrap("<div></div>");
				
				gc.parent().parent().append(d);

				this._customSplitterContainer = $("#customContainerDiv");
				
				this._customSplitterContainer.igSplitter(
					{
						width: "100%",
						height: "400px",
						panels: [
							{ size: "60%" },
							{ size: "40%" }
						]
					}
					);

				// adding the header
				header = $("<div></div>")
					.addClass("ui-widget-header")
					.css("padding", "4px")
					.text(this.options.modalDialogCaptionText)
					.appendTo(d);

				//adding footer
				footer = $("<div></div>")
				//.addClass(this.css.modalDialogFooter)
				.attr("id", this._id("footer"))
				.appendTo(d);
				$buttonSet = $("<div></div>")
					.appendTo(footer);

				$buttonOK = $("<button></button>")
					.attr("id", this._id("footer_buttonok"))
					.appendTo($buttonSet);
				$buttonOK.igButton({
					labelText: o.buttonApplyText,
					title: o.buttonApplyTitle,
					disabled: o.buttonApplyDisabled,
					click: function(){
						self.closeModalDialog(true, true);
					}
				});
				$buttonCancel = $("<button></button>")
					.attr("id", this._id("footer_buttoncancel"))
					.appendTo($buttonSet);
				$buttonCancel.igButton({
					labelText: o.buttonCancelText,
					title: o.buttonCancelTitle,
					click: function () {
						self.closeModalDialog(false, true);
					}
				});

				// adding the content
				$("<div></div>")
					.css({
						"overflow": "auto",
						"height": gc.outerHeight() - header.outerHeight() - footer.outerHeight()
					})
					.attr("id", this.element.attr("id") + "_content")
					.insertAfter(header);

				$buttonSet.css("float", "right");
				// dialog css
				d.css({
					"width": this.options.modalDialogWidth,
					"height": gc.outerHeight(),
					"background-color": "#FFFFFF"
				});
				// grid's container need to hide the sliding dialog
				gc.css("overflow", "hidden");
				gc.find("tbody").on({
					mousedown: function (evt) {
						var table = gc.find(".ui-iggrid-table"),
							rowID = $(evt.target).closest("tr").attr("data-id");
						if (table.igGridUpdating("isEditing")) {
							if (table.igGridUpdating("endEdit", true)) {
								table.igGridUpdating("startEdit", rowID);
							}
						}
						evt.stopPropagation();
					},
					pointerdown: function (evt) { evt.stopPropagation(); },
					touchstart: function (evt) { evt.stopPropagation(); }
				}, "td");
				d.bind({
					// bind to keydown so that the dialog can be closed on ENTER and ESC keypresses,
					// also handles the TAB sequence to wrap around the elements of the dialog
					keydown: function (e) {
						var tabElems, first, last;
						if (e.keyCode === $.ui.keyCode.ESCAPE) {
							self.closeModalDialog(false, true);
							return;
						}
						if (e.keyCode === $.ui.keyCode.ENTER &&
							self.options.closeModalDialogOnEnter &&
							!self.options.buttonApplyDisabled) {
							self.closeModalDialog(true, true);
							return;
						}
						if (e.keyCode !== $.ui.keyCode.TAB) {
							return;
						}
						tabElems = $(":tabbable", this);
						first = tabElems.first();
						last = tabElems.last();
						if (e.target === last[0] && !e.shiftKey) {
							first.focus(1);
							return false;
						}
						if (e.target === first[0] && e.shiftKey) {
							last.focus(1);
							return false;
						}
					}
				});
			},
			openModalDialog: function () {
				var d = this.element, noCancel;
				if (this._modalDialogOpened) {
					return;
				}
				noCancel = this._trigger(
					this.events.modalDialogOpening,
					null,
					{
						modalDialog: d, owner: this
					}
				);
				if (noCancel) {
					this._trigger(
						this.events.modalDialogOpened,
						null,
						{
							modalDialogElement: d, owner: this, shouldFocus: true
						}
					);
					this._modalDialogOpened = true;
					d.show();
					d.prev().show();
					this._customSplitterContainer.igSplitter("setFirstPanelSize", "60%");
				}
			},
			closeModalDialog: function (accepted, fromUI) {
				var d = this.element, noCancel = true, self = this;
				if (!this._modalDialogOpened) {
					return;
				}
				noCancel = this._trigger(
					this.events.modalDialogClosing,
					null,
					{
						modalDialog: d,
						owner: this,
						accepted: !!accepted,
						raiseEvents: fromUI
					});
				if (noCancel) {
					this._modalDialogOpened = false;
					d.hide();
					d.prev().hide();

					this._customSplitterContainer.igSplitter("setFirstPanelSize", "100%");
				}

			}
		});

		$(function () {
			$("#grid").igGrid({
				dataSource: data,
				autoCommit: true,
				height: "400px",
				autoGenerateColumns: false,
				primaryKey: "company",
				columns: [
					{ headerText: "会社", key: "company", dataType: "string" },
					{ headerText: "生涯セールス", key: "sales_lifetimeSales", dataType: "number" },
					{ headerText: "市場の潜在能力", key: "sales_marketPotential", dataType: "number"},
					{ headerText: "現金資産", key: "assets_cash", dataType: "number", rowIndex: 0},
					{ headerText: "売掛金勘定", key: "assets_accRec", dataType: "number"},
					{ headerText: "国", key: "country", dataType: "string"},
				],
				autofitLastColumn: false,
				features: [
					{
						name: "Paging",
						pageSize: 10
					},
					{
						name: "Updating",
						dialogWidget: "SplitterDialog",
						editMode: "dialog",
						enableAddRow: false,
						enableDeleteRow: false,
						columnSettings: [
							{ columnKey: "company", readOnly: true }
						],
						rowEditDialogOptions: {
							showReadonlyEditors: false
						}
					}
				]
			});
		});
	</script>
</body>
</html>