"Enter" key for textarea dialog row editor issue

820

Ben Hull posted over 6 years ago

Hello,
I am using a dialogTemplateSelector for my row editing dialog. One input is a TEXTAREA, and i have the edit options set to textMode: "multiline"
How can i disable the 'Enter' key from executing the row edit ending event and allow carriage returns in the TEXTAREA? I have attempted to stop propagation on keyPress during editRowStarted as well as unbinding the keyPress event. Nothing seems to work. I cannot seem to stop the 'Enter' key from executing the row edit ending event. Attached is a small working copy.editing.zip

485

Offline Vasil Pavlov posted over 6 years ago in reply to Ben Hull

Hello Ben,

It seems this problem has been fixed in the last version of Ignite UI 17.1.

I am glad that your issue was resolved and you were able to achieve your requirement according to my suggestion.

Feel free to contact me if you have any additional questions regarding this matter.
Cancel
Reply

Cancel
820

Offline Ben Hull posted over 6 years ago in reply to Ben Hull

All,

The issue that i am experiencing seems to be isolated to version 17.1.20171.1012

When the 'Enter" key is pressed, the editRowEnding event is not providing the key pressed in the event.key property. It is undefined . The lastest build of version 17.1 (17.1.20171.2082) seems to work
Cancel
Reply

Cancel
820

Offline Ben Hull posted over 6 years ago in reply to Vasil Pavlov

Thanks for the reply.
I thought it should be this simple. But in my application, the evt.key is always undefined
the type is 'iggridupdatingeditrowending'
I am using v. 17.1 with jquery 3.2
Cancel
Reply

Cancel

485

Offline Vasil Pavlov posted over 6 years ago

Hello Ben,

Thank you for posting in our forum.

Handling the editRowEnding event instead of editRowStarted would allow you to cancel exiting edit mode if the key that was pressed is “Enter” – simply return “false” and the editor would not close.

Adding this to your grid initialization code would fulfill your requirement:

{

name: "Updating",

...some code ...

editRowEnding: function(evt, ui){

if (evt.key === "Enter")

return false;

}

Here is the sample you have provided with the aforementioned modification included:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!-- Ignite UI Required Combined CSS Files -->
	<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2018.1/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 Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
	<style>
		.ui-igedit-container {
			width: 150px !important;
		}

		.dialogFooter button {
			margin: .5em .4em .5em 0;
			cursor: pointer;
		}

		.ui-igsplitter .ui-icon-close {
			font-size: 11px;
		}
	</style>

	<table id="grid1"></table>
	<br />
	<script id="dialogTemplate" type="text/html">
        <div>
            <label style="margin-top:3px;">Name</label>
            <div><input data-editor-for-Name="true" /></div>
        </div>
        <div>
            <label style="margin-top:3px;">Description</label>
            <div><textarea data-editor-for-Description="true"></textarea></div>
        </div>		
	</script>
	<script type="text/javascript">
		var northwindEmployees = [
			{ "ID": 1, "Name": "Davolio, Nancy", "Description": "Info found here"},
			{ "ID": 2, "Name": "Fuller, Andrew", "Description": "more"},
			{ "ID": 3, "Name": "Leverling, Janet", "Description": "empty"},
			];

		$(function () {
			$("#grid1").igGrid({
				dataSource: northwindEmployees,
				primaryKey: "ID",
				width: "100%",
				height: "400px",
				autoCommit: true,
				autoGenerateColumns: false,
				columns: [
					{ headerText: "ID", key: "ID", dataType: "number", hidden: true },
					{ headerText: "Name", key: "Name", dataType: "string" },
					{ headerText: "Description", key: "Description", dataType: "string" },
				],
				features: [
					{
						name: "Updating",
						enableAddRow: true,
						enableDeleteRow: false,
						editMode: "dialog",
						columnSettings: [
							{
								columnKey: "Name",
								required: true,
								validation: true,
							},
							{
								columnKey: "Description",
								editorOptions:
									{
										height: "150px",
										width: "338px",
										textMode: "multiline"
									},
							}
						],
						rowEditDialogOptions: {
							dialogTemplateSelector: "#dialogTemplate",
							showReadonlyEditors: false,
							editorsColumnWidth: 150
						},
						editRowEnding: function(evt, ui){
							if (evt.key === "Enter")
							return false;
						}
					}
				]
			});
		});
	</script>
</body>
</html>

If you need any additional assistance, feel free to contact me.