Use german umlauts in textarea

[Tanja]

Hi!

I use an inline textarea in one of my edit grids and declared it in the colModel:

Code: [Select]

{ title: "Kommentar", width: 200, dataType: "string", dataIndx: "kommentar",
                    editor: { type: "textarea", attr: "rows=4" },
                    editModel: { keyUpDown: false, saveKey: '' },
                    validations: [{ type: 'nonEmpty', msg: 'Bitte Kommentar eintragen'}]
                },

When I try to enter the German "ä", "ö" or "ü" - then the textarea is closing and the cursor jumps out of the textarea. The German "ß" works.
In your example "Shipping orders" (http://paramquery.com/pro/demos/editing_custom) it's exactly the same behavior in the field "shipping address".
How can I configure the field accepting the German umlauts?
Many thanks!

Tanja

[paramvir]

There is a known issue in v3.0 in IE8, textarea, multiple lines text when used along with height: 'flex'.

1. Do you face this issue with multiple lines?

2. Have you been using the option height: 'flex' or flexHeight: true

3. In which browser & version precisely do you face this issue?

4. Do you face this issue with characters other than German umlauts?

5. Do you face this issue in version 2 demo?

http://paramquery.com/pro/demos24/editing_custom

[Tanja]

Thank you for your reply, below are the answers to your questions.
I forgot to mention that I always use row editing mode.

1. Yes, if I have a textarea filled with multiple lines, it does not work, also when I only have a single line typed into the textarea. Should the umlaut be the first character in the textarea, then the editor stays open and the validation says missing input and I cannot leave the field... -
If I have a simple textbox, everything with the umlauts is fine - it's only the textarea, which is making problems, regardless how much lines it has.
When I enter the umlauts directly in the database and then load the grid, they are displayed correctly and also saved again right. But I still cannot enter new ones...

2. I did not use height: 'flex' or flexHeight:true - height of my grid is 250 (fixed value in the grid object configuration)

3. I (and the users of my application, too) use Firefox. I tested with version 40.0.3 and updated to 41.0.1 - the error occurs in both versions. In Opera 32.0 the textarea works fine. I did not test Internet Explorer, because it is not relevant to us - everyone uses Firefox, most recent version (scheduled updates).

4. In daily work, the users type in umlauts (ä, ö, ü) a lot, so they noticed the error.
When I enter an apostrophe it will be saved via ajax and displayed correctly in non editing mode. When I then reload the complete page and open the textarea for editing, the hex declaration ''' is shown instead of the apostrophe, leaving the edit mode displays the normal character again.  I did not recognize issues with other characters yet (ß is working fine for example).

5. Thank you for the link to the previous version. In version 2 demo it's the same behavior like in 3.1.0.

[paramvir]

Thanks for your reply to the questions.

I was able to enter German umlauts with help of Character map in MS windows OS, it works fine in FF v40.0.3 without any issue.

Which OS do you face this issue?

Did you check editor: { type: 'contenteditable' } for multi line text support.

though you might need to sanitize the data (remove unwanted tags ) while getting data from editor which can be done in column.editor.getData callback.

[Tanja]

With the help of the character map, I also can paste in the umlauts in Windows 7 and 8.1. type="contenteditable" didn't change the behavior.
I tried some more thing: When I type them in Word or somewhere else and then copy and paste them into the textarea editor - this works, too.  But: It's no solution for daily use - the users have to type the umlauts into the field like every other character, too...

Now, I found out a solution by trial and error. In my configuration (see first post) I had the line

Code: [Select]

                    editModel: { keyUpDown: false, saveKey: '' },
the saveKey parameter produces the problems, if I remove it - everything works fine like when you define no special editor for the single line input - except: you can't enter new lines then.
But I have to provide the new line option by pressing the ENTER-Key on the keyboard - so I changed it to

Code: [Select]

                    editModel: { keyUpDown: false, saveKey: '9' },
Now I can enter the umlauts and one can leave the field by pressing "TAB". That's OK for me - in row editing mode I don't save every cell, users have to press the update button of the row...

The data of the editor are stored correctly in the database - but getting them back on page reload is interesting. The new lines then are not shown in textarea editing mode, instead we have two blanks... until page reload after ajax update, the new lines are displayed correctly. Seems to be a similar issue like the apostrophe, which breaks on reload in editing mode...

Thank you very much for your help 

[paramvir]

Thanks for sharing the solution to the German umlauts issue.

apostrophe and line breaks work fine in the demos. You may check by converting one of the columns ( ProductName ) in row editing demo or batch editing demo into a textarea editor and entering line breaks and apos into that. you may refresh data in the grid by clicking on the refresh button in pager instead of refreshing the whole page, otherwise the code changes would also be lost if whole page is refreshed.

Code: [Select]

        render: function (ui) {
              var val = ui.cellData ? ui.cellData.replace(/\n/g, "<br/>") : "";
                return val;
        },
      editor: { type: "textarea", attr: "rows=4" },
        editModel: { keyUpDown: false, saveKey: 9 }

I'm not sure about how are you serializing JSON data on the server side. Please share format of server side JSON data if you are still facing issues with new lines and apostrophes.