Available in the Full Version

Data Grid - Row Edit Dialog

ImageNameTitlePhoneHireDate
Davolio, NancyDavolio, NancySales Representative(206) 555-98575/1/1992
Fuller, AndrewFuller, AndrewVice President, Sales(206) 555-94828/14/1992
Leverling, JanetLeverling, JanetSales Representative(206) 555-34124/1/1992
Peacock, MargaretPeacock, MargaretSales Representative(206) 555-81225/3/1993
Buchanan, StevenBuchanan, StevenSales Manager(71) 555-484810/17/1993
Suyama, MichaelSuyama, MichaelSales Representative(71) 555-777310/17/1993
King, RobertKing, RobertSales Representative(71) 555-55981/2/1994
Callahan, LauraCallahan, LauraInside Sales Coordinator(206) 555-11893/5/1994
Dodsworth, AnneDodsworth, AnneSales Representative(71) 555-444411/15/1994

This sample is designed for a larger screen size.

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

This sample demonstrates the Row Edit Dialog functionality of Updating feature in the igGrid. Row Edit Dialog provides the ability to be customized using two types of templates: editorsTemplate and dialogTemplate. The editorsTemplate is executed for each column in the grid's column collection, while the dialogTemplate is rendered against the currently edited record. In order to show the Row Edit Dialog you need to click or tap on a row to pop-it up.

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" />

    <style>
		.row-edit-dialog-container-cols
		{
			width:100%;
			overflow:hidden;
			border-bottom:1px solid #ccc;
			padding-bottom:15px;
		}
        .row-edit-dialog-container-cols table
        {
            width: 100%;
            border-collapse: collapse;
        }
        .row-edit-dialog-container-cols table tbody td
        {
            border:none !important;
			padding: 0 4px 10px;
        }
		.row-edit-dialog-container-head
		{
			border-bottom:1px solid #ccc;padding-bottom:10px;margin-top:10px;margin-bottom:25px;font-size:16px;
		}
		.ui-dialog .ui-dialog-buttonpane
		{
			margin-top:0;
			padding-top:0;
		}
		.ui-dialog .ui-dialog-buttonpane button
		{
			margin:0.5em 0 0.5em 0.4em;
		}
		.ui-iggrid .ui-widget-content.ui-dialog
		{
			border-color:#888;
		}
		.ui-dialog-title
		{
			text-transform:uppercase;
			margin:0;
			font-size:90%;
		}
		.ui-dialog .ui-dialog-titlebar
		{
			padding: 0.7em 1em;
		}
    </style>

    <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>

</head>
<body>

    <!--Sample JSON Data-->
    <script src="/data-files/nw-employees.js"></script>

    <!-- Target element for the igGrid -->
    <table id="grid">
    </table>

    <script id="dialogTemplate" type="text/html">
        <div class="row-edit-dialog-container-head"><strong>${Name}</strong></div>
        <div class="row-edit-dialog-container-cols">
            <div style="float: left;">
                <table>
                    <colgroup>
                        <col style="width: 30%;" />
                        <col style="width: 70%;" />
                    </colgroup>
                    <tbody data-render-tmpl="true"></tbody>
                </table>
            </div>
            <div style="width: 160px; float: right;">
                <img width="100" height="90" src="${ImageUrl}" alt="${Name}" title="${Name}" style="float:right;" />
            </div>
        </div>
    </script>

    <script id="editorsTemplate" type="text/html">
        <tr>
            <td style="text-align:right;color:#777;"><strong>${headerText}</strong></td>
            <td><input data-editor-for-${key}="true" /></td>
        </tr>
    </script>

    <script type="text/javascript">
        $( function ()
        {
            $("#grid").igGrid({
				dataSource: northwindEmployees,
				primaryKey: "ID",
				width: "100%",
				height: "600px",
				autoGenerateColumns: false,
				columns: [
					{ headerText: "Employee ID", key: "ID", dataType: "number", hidden: true },
					{ headerText: "Image", key: "ImageUrl", dataType: "object", template: "<img width='100' height='90' src='${ImageUrl}' alt='${Name}' title='${Name}' />" },
					{ headerText: "Name", key: "Name", dataType: "string" },
					{ headerText: "Title", key: "Title", dataType: "string" },
					{ headerText: "Phone", key: "Phone", dataType: "string" },
					{ headerText: "HireDate", key: "HireDate", dataType: "date" }
				],
				features: [
					{
						name: "Updating",
						enableAddRow: false,
						enableDeleteRow: false,
						editMode: "dialog",
						columnSettings: [
							{
							    columnKey: "ImageUrl",
								readOnly: true
							},
							{
								columnKey: "Name",
								readOnly: true
							}
						],
						rowEditDialogOptions: {
							width: "530px",
							height: "410px",
							dialogTemplateSelector: "#dialogTemplate",
							editorsTemplateSelector: "#editorsTemplate",
							showReadonlyEditors: false,
						}
					}
				]
			});
        });

    </script>
</body>
</html>