Available in the Full Version

Data Grid - Custom Modal Dialog

This sample demonstrates the ability to replace the grid’s default modal dialog with a custom modal dialog.
Show
records
CompanyLifetime SalesMarket PotentialAssets CashAccounts ReceivableCountry
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

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The custom modal dialog allows closing and applying the changes via either the on-screen Done and Cancel buttons or the keyboard Enter and ESC keys. The interaction with the grid is not blocked, and the end user can change the row in edit mode while the dialog is opened.

Code View

Copy to Clipboard 
<!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: "Company", key: "company", dataType: "string" },
					{ headerText: "Lifetime Sales", key: "sales_lifetimeSales", dataType: "number" },
					{ headerText: "Market Potential", key: "sales_marketPotential", dataType: "number"},
					{ headerText: "Assets Cash", key: "assets_cash", dataType: "number", rowIndex: 0},
					{ headerText: "Accounts Receivable", key: "assets_accRec", dataType: "number"},
					{ headerText: "Country", 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>