igGrid display text on multiple lines in cell edit mode

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="grid-mrl"></div>

JavaScript

$.ig.EditorProviderInput = $.ig.EditorProviderInput || $.ig.EditorProvider.extend({
            createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
                // Use a textarea element for multiline editing instead of input
                element = element || $('<textarea/>');

                // Set necessary attributes for the textarea
                element.attr({
                    rows: 3, // Set rows as needed for your multiline editor
                    cols: 30, // Set columns as needed for your multiline editor
                });

                // Call parent createEditor
                this._super(callbacks, key, editorOptions, tabIndex, format, element);

                element.on('keydown', $.proxy(this.keyDown, this));

                this.editor = {};
                this.editor.element = element;
                return element;
            },
            keyDown: function (evt) {
                var ui = {};
                ui.owner = this.editor.element;
                ui.owner.element = this.editor.element;
                this.callbacks.keyDown(evt, ui, this.columnKey);
            },
            setSize: function (width, height) {
                this.editor.element.css({
                    width: width - 2,
                    height: height - 2,
                    borderWidth: '1px'
                });
            },
            attachErrorEvents: function (errorShowing, errorShown, errorHidden) { },
            getValue: function () {
                return this.editor.element.val();
            },
            setValue: function (val) {
                // If val is an object, set the displayValue, otherwise set the string value
                if (val !== null && typeof val !== 'string') {
                    this.editor.element.val(val.displayValue);
                } else if (val !== null && val !== undefined) {
                    // Replace <br/> with \n for editing in textarea
          ...