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.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>
var data = [
{
"_id": "56c2ee0991a4474f9ae631de",
"company": "Sportan",
"address": "Rapelye Street",
"city": "Oceola",
"country": "VU",
"sales_lifetimeSales": 40882580.18,
"sales_quarterlySales": 430845.78,
"sales_yearlySales": 1197420.17,
"sales_marketPotential": 4210805124.61,
"assets_cash": 264714.71,
"assets_accRec": 63084.44,
"assets_books": 7534.74
},
{
"_id": "56c2ee09577c39def103f509",
"company": "Bugsall",
"address": "Hoyt Street",
"city": "Rosine",
"country": "FM",
"sales_lifetimeSales": 29231147.89,
"sales_quarterlySales": 227299.97,
"sales_yearlySales": 1486467.06,
"sales_marketPotential": 2505447478.96,
"assets_cash": 370690.39,
"assets_accRec": 69242.24,
"assets_books": 12507.92
},
{
"_id": "56c2ee0924d0092051d8d45e",
"company": "Hydrocom",
"address": "Sunnyside Court",
"city": "Cornfields",
"country": "KE",
"sales_lifetimeSales": 35628528.18,
"sales_quarterlySales": 226007.91,
"sales_yearlySales": 1092555.78,
"sales_marketPotential": 4930069033.99,
"assets_cash": 403038.64,
"assets_accRec": 56183.05,
"assets_books": 8113.52
},
{
"_id": "56c2ee09115c6a228f3c8ae0",
"company": "Eclipto",
"address": "Remsen Avenue",
"city": "Orin",
"country": "TZ",
"sales_lifetimeSales": 20178683.42,
"sales_quarterlySales": 319645.81,
"sales_yearlySales": 1249194.57,
"sales_marketPotential": 2488740024.16,
"assets_cash": 237368.76,
"assets_accRec": 50048.48,
"assets_books": 13100.31
},
{
"_id": "56c2ee092ffa293f8ba4acd4",
"company": "Paprikut",
"address": "Bay Parkway",
"city": "Motley",
"country": "LR",
"sales_lifetimeSales": 25575955.42,
"sales_quarterlySales": 347046.85,
"sales_yearlySales": 1611555.66,
"sales_marketPotential": 1923959087.58,
"assets_cash": 235064.57,
"assets_accRec": 74596.25,
"assets_books": 17057.85
},
{
"_id": "56c2ee094e10ebac49bb3445",
"company": "Unia",
"address": "Richards Street",
"city": "Herlong",
"country": "DZ",
"sales_lifetimeSales": 13462122.23,
"sales_quarterlySales": 368636.73,
"sales_yearlySales": 489642.54,
"sales_marketPotential": 1679474693.72,
"assets_cash": 498174.1,
"assets_accRec": 92476.88,
"assets_books": 6961.9
},
{
"_id": "56c2ee09cf079a741a75fd81",
"company": "Isologix",
"address": "Williams Court",
"city": "Marysville",
"country": "JO",
"sales_lifetimeSales": 38448387.27,
"sales_quarterlySales": 298248.71,
"sales_yearlySales": 1904695.32,
"sales_marketPotential": 4696918929,
"assets_cash": 383266.93,
"assets_accRec": 76247.35,
"assets_books": 6818.03
},
{
"_id": "56c2ee091e9883c0d1f77f99",
"company": "Deepends",
"address": "Independence Avenue",
"city": "Riegelwood",
"country": "NO",
"sales_lifetimeSales": 13730298.02,
"sales_quarterlySales": 323612.72,
"sales_yearlySales": 953860.54,
"sales_marketPotential": 4825809829.87,
"assets_cash": 416146.08,
"assets_accRec": 62282.5,
"assets_books": 13686.42
},
{
"_id": "56c2ee098c5bd0d8806720c1",
"company": "Quantasis",
"address": "Berriman Street",
"city": "Unionville",
"country": "ID",
"sales_lifetimeSales": 19875841.19,
"sales_quarterlySales": 468274.38,
"sales_yearlySales": 1569184.18,
"sales_marketPotential": 3489758844.49,
"assets_cash": 415699.26,
"assets_accRec": 54628.5,
"assets_books": 19321.38
},
{
"_id": "56c2ee0913724154a512e5ee",
"company": "Playce",
"address": "India Street",
"city": "Joppa",
"country": "VI",
"sales_lifetimeSales": 45960329.03,
"sales_quarterlySales": 448358.99,
"sales_yearlySales": 1855678.13,
"sales_marketPotential": 2740892152.3,
"assets_cash": 447054.49,
"assets_accRec": 69204.65,
"assets_books": 23522.18
},
{
"_id": "56c2ee0978ab727bc193509a",
"company": "Ezent",
"address": "Decatur Street",
"city": "Lithium",
"country": "CV",
"sales_lifetimeSales": 43613913.07,
"sales_quarterlySales": 140288.25,
"sales_yearlySales": 594517.52,
"sales_marketPotential": 1419141218.99,
"assets_cash": 324254.03,
"assets_accRec": 78826.89,
"assets_books": 20581.79
},
{
"_id": "56c2ee097125fd1d983d9cf9",
"company": "Corepan",
"address": "Jefferson Street",
"city": "Roland",
"country": "CA",
"sales_lifetimeSales": 19334236.7,
"sales_quarterlySales": 413597.57,
"sales_yearlySales": 1871048.41,
"sales_marketPotential": 3524818686.77,
"assets_cash": 464374.02,
"assets_accRec": 68634.68,
"assets_books": 16572.39
},
{
"_id": "56c2ee09acab49d850a7d3f6",
"company": "Quonata",
"address": "Bristol Street",
"city": "Belgreen",
"country": "ER",
"sales_lifetimeSales": 21467135.56,
"sales_quarterlySales": 224717.89,
"sales_yearlySales": 657562.96,
"sales_marketPotential": 3686684834.77,
"assets_cash": 345941.49,
"assets_accRec": 51842.73,
"assets_books": 12948.79
},
{
"_id": "56c2ee099a657c6397d619bd",
"company": "Empirica",
"address": "Eaton Court",
"city": "Hampstead",
"country": "LY",
"sales_lifetimeSales": 21711544.57,
"sales_quarterlySales": 290740.22,
"sales_yearlySales": 1202336.44,
"sales_marketPotential": 2343942535.11,
"assets_cash": 331479.28,
"assets_accRec": 61027.27,
"assets_books": 6199.99
},
{
"_id": "56c2ee09cf6d97f31dd4b625",
"company": "Eventix",
"address": "Gain Court",
"city": "Dowling",
"country": "NG",
"sales_lifetimeSales": 27108803.74,
"sales_quarterlySales": 322969.25,
"sales_yearlySales": 951465.66,
"sales_marketPotential": 4841022751.3,
"assets_cash": 287818.89,
"assets_accRec": 79152.96,
"assets_books": 9047.59
},
{
"_id": "56c2ee094f28ff8ab6f86dde",
"company": "Dogspa",
"address": "Quay Street",
"city": "Marne",
"country": "TW",
"sales_lifetimeSales": 15372014.44,
"sales_quarterlySales": 376294.9,
"sales_yearlySales": 978453.71,
"sales_marketPotential": 1275418042.2,
"assets_cash": 374628.65,
"assets_accRec": 84888.29,
"assets_books": 20578.59
},
{
"_id": "56c2ee0997dfe157acaa78bb",
"company": "Jumpstack",
"address": "Quincy Street",
"city": "Hobucken",
"country": "CF",
"sales_lifetimeSales": 38882346.28,
"sales_quarterlySales": 140607.23,
"sales_yearlySales": 1197166.82,
"sales_marketPotential": 4820347822.28,
"assets_cash": 231516.29,
"assets_accRec": 87415.74,
"assets_books": 12896.54
},
{
"_id": "56c2ee0972c9c1187bb0d97d",
"company": "Sybixtex",
"address": "Ryder Street",
"city": "Alderpoint",
"country": "IO",
"sales_lifetimeSales": 21445732.45,
"sales_quarterlySales": 369036.23,
"sales_yearlySales": 499606.34,
"sales_marketPotential": 2807389991.36,
"assets_cash": 408474.47,
"assets_accRec": 65344.38,
"assets_books": 8862.63
},
{
"_id": "56c2ee098a4166f0a5a19993",
"company": "Dognosis",
"address": "Wolcott Street",
"city": "Edgewater",
"country": "GL",
"sales_lifetimeSales": 41661881.98,
"sales_quarterlySales": 141108.09,
"sales_yearlySales": 522969.48,
"sales_marketPotential": 4374478218.15,
"assets_cash": 225730.61,
"assets_accRec": 72839.21,
"assets_books": 8728.07
},
{
"_id": "56c2ee091384f263dc9b8c25",
"company": "Twiggery",
"address": "Irwin Street",
"city": "Blackgum",
"country": "ZM",
"sales_lifetimeSales": 36017506.06,
"sales_quarterlySales": 354562.4,
"sales_yearlySales": 1449893.92,
"sales_marketPotential": 1948021644.72,
"assets_cash": 376383.08,
"assets_accRec": 62385.03,
"assets_books": 14270.75
},
{
"_id": "56c2ee097fe9366d90a9066e",
"company": "Bizmatic",
"address": "Jerome Street",
"city": "Sylvanite",
"country": "MM",
"sales_lifetimeSales": 11722193.14,
"sales_quarterlySales": 213212.65,
"sales_yearlySales": 1310614.58,
"sales_marketPotential": 3463018300.01,
"assets_cash": 252123.01,
"assets_accRec": 57229.43,
"assets_books": 19165.76
},
{
"_id": "56c2ee09cb68c764dd8f5d23",
"company": "Accel",
"address": "Louisiana Avenue",
"city": "Cornucopia",
"country": "IE",
"sales_lifetimeSales": 27607249.98,
"sales_quarterlySales": 236774.12,
"sales_yearlySales": 1546611.47,
"sales_marketPotential": 2024251139.72,
"assets_cash": 294508.31,
"assets_accRec": 71612.5,
"assets_books": 18155.66
},
{
"_id": "56c2ee0918539a10bcaf6432",
"company": "Brainquil",
"address": "Tompkins Avenue",
"city": "Hanover",
"country": "MX",
"sales_lifetimeSales": 25699331.36,
"sales_quarterlySales": 186296.88,
"sales_yearlySales": 736119.79,
"sales_marketPotential": 1098592989.14,
"assets_cash": 321341.22,
"assets_accRec": 82055.95,
"assets_books": 10149.55
},
{
"_id": "56c2ee09dbdd0ea1d711b0cd",
"company": "Eplode",
"address": "Desmond Court",
"city": "Lupton",
"country": "GA",
"sales_lifetimeSales": 22446181.35,
"sales_quarterlySales": 346390.58,
"sales_yearlySales": 712190.68,
"sales_marketPotential": 2534215258.43,
"assets_cash": 266537.14,
"assets_accRec": 87164.54,
"assets_books": 24489.71
},
{
"_id": "56c2ee09d24e7b07dbfef583",
"company": "Crustatia",
"address": "Woodhull Street",
"city": "Conestoga",
"country": "GR",
"sales_lifetimeSales": 48060275.78,
"sales_quarterlySales": 319385.17,
"sales_yearlySales": 1662973.16,
"sales_marketPotential": 3562317203.73,
"assets_cash": 471269.15,
"assets_accRec": 98834.5,
"assets_books": 10641.41
},
{
"_id": "56c2ee093799fdc7340a9990",
"company": "Buzzness",
"address": "Guider Avenue",
"city": "Gratton",
"country": "MD",
"sales_lifetimeSales": 26377352.6,
"sales_quarterlySales": 439844.54,
"sales_yearlySales": 601430.59,
"sales_marketPotential": 1486755775.28,
"assets_cash": 252524.24,
"assets_accRec": 51795.96,
"assets_books": 10315.84
},
{
"_id": "56c2ee09b0bb9191f759ae94",
"company": "Helixo",
"address": "Logan Street",
"city": "Broadlands",
"country": "RE",
"sales_lifetimeSales": 31633703.02,
"sales_quarterlySales": 256392.06,
"sales_yearlySales": 602291.9,
"sales_marketPotential": 4323633265.68,
"assets_cash": 468025.56,
"assets_accRec": 95638.46,
"assets_books": 22985.41
},
{
"_id": "56c2ee099f65226772e2616e",
"company": "Geekosis",
"address": "Dictum Court",
"city": "Bellamy",
"country": "NF",
"sales_lifetimeSales": 29268437.79,
"sales_quarterlySales": 147691.1,
"sales_yearlySales": 1691764.93,
"sales_marketPotential": 1362207226.45,
"assets_cash": 434628.23,
"assets_accRec": 66871.54,
"assets_books": 12574.59
},
{
"_id": "56c2ee093096177f7e7cc9c3",
"company": "Zipak",
"address": "Hendrix Street",
"city": "Enetai",
"country": "MH",
"sales_lifetimeSales": 18691983.29,
"sales_quarterlySales": 218666.54,
"sales_yearlySales": 1038077.26,
"sales_marketPotential": 1362313421.44,
"assets_cash": 276294.7,
"assets_accRec": 59302.02,
"assets_books": 11183.04
}
];