Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ben Hull
820
"Enter" key for textarea dialog row editor issue
posted

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

Parents
  • 485
    Offline posted

    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.

Reply Children