JqxGrid custom Textarea editor is not working

[rahulChaudhariParticipant]

Hi ,
i am using a jqxgrid with custom editors for one column. when user will try to edit it i want to make him to write in wrapped manner. so for this i am adding textarea to the editor.
My issue is, i have multiple records in grid. If I edit a comment cell (PFB in code) , ok i get textArea while editting. but without saving it in DB i edit second row as well. But when i tries to edit 2nd cell , previous cell’s textarea is generating in it and getting previous cell value in 2nd cell.
Here is the code :

 $("#MyjqxGrid").jqxGrid({
                height: '50%',
                width: '100%',
                source: centralMainAdapter,
                selectionmode: 'checkbox',
                rowdetails: true,
                rowsheight: 41,
                columnsheight: 55,
                editable: true,
                showtoolbar: true,
                showstatusbar: false,
                statusbarheight: 35,
                showaggregates: false,
                autoheight: false,
                pageable: true,
                autorowheight: true,
                theme: 'energyblue',
                

                columns: [

                    {
                        text: 'Name', editable: false, datafield: 'Name', width: 250,
                        cellsrenderer: function (row, column, value, defaultHtml, columnSettings, record) {
                            if (record.Id == 0) {
                                return '<div class="jqx-grid-cell-left-align" style="margin-top: 9.5px;text-align: center;">Z Name</div>';
                            }
                        },
                        cellclassname: partitionCellStyle
                    },
                    
                    {
                        text: 'Comment', cellbeginedit: cellbegineditForcmt, datafield: 'Comment', width: 300, columntype: 'template',
                        renderer: function (defaultText, alignment, height) {
                            return '<div style="text-align: center;"><br><p>Comment</p></div>';
                        }, cellclassname: partitionCellStyle,
                        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            var rows = $("#MyjqxGrid").jqxGrid('getrows');
                            if (rows[row].FundDesc.toLowerCase() == "fund") {
                                editorElement = $('<textarea  id="customTextArea' + row + '"></textarea>').prependTo(editor);
                                $("#customTextArea" + row).css("wordWrap", "break-word");
                                $("#customTextArea" + row).css("whiteSpace", "pre-wrap");
                                editorElement.jqxTextArea({
                                    height: 40,
                                    width: '100%',
                                    maxLength: 1000
                                });
                            }
                        },
                        initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
                                editor.find('textarea').val(cellvalue);
                        },
                        geteditorvalue: function (row, cellvalue, editor) {
                            var rows = $("#MyjqxGrid").jqxGrid('getrows');
                            if (rows[row].FundDesc.toLowerCase() == "fund" ) {
                                var rtn= editor.find('textarea').val();
                                editor.find('textarea').jqxTextArea('refresh');
                                return rtn;
                            }

                        }
                    }
                ]
            });

When i debug it , i found , when i edit 1st cell createeditor() getting called. after that if i edit 2nd row cell then createeditor() is not hitting.

[svetoslav_borislavovParticipant]

Hi,

The ‘createeditor’ function is called only once, so if you want to use ‘createeditor’ for the custom editor you should catch the ‘cellbeginedit’ event and change the value of the text area.
Another option is to initialize the editor every time the editor is opened.
See this example: http://jsfiddle.net/fuchk2gt/

Here is an information from the documentation:
initeditor – sets a custom function which is called when the cells editor is opened. The Grid passes 6 parameters to it – row index, cell value, the editor element, cell’s text, the pressed char. The function can be used for adding some custom parameters to the editor. This function is called each time an editor is opened.

createeditor – sets a custom function which is called when the cells editor is created. The Grid passes 6 parameters to it – row index, cell value, the editor element, cell’s text, cell’s width and cell’s height. The function can be used for adding some custom parameters to the editor. This function is called only once – when the editor is created.

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[rahulChaudhariParticipant]

Thanks Svetoslav for reply.

As you mentioned to initialize the editor every time the editor is opened.
I think as per my code , i am initializing it too every time right.?
and createeditor is creating an editor right.? so for same column comment at 1st row , If i am edit it and added a text ‘Svetoslav is a friend of Rahul’ and then i click outside of cell , now i click on comment column 2nd row cell , i will get same text.

Note: I checked in page source of browser when this issue occurs. i got one point.
When you edit 1st cell then it’s textArea id is customTextArea0 (0 is rowIndex) and if you edit 2nd cell then it’s TextArea id is same customTextArea0 that means , at second time it is not creating a new instance of textArea and using same previous one.

Please help me with this. i didnt get how you are initializing a textArea everytime in your fiddle code . because i am also doing same thing right..?
Or where i need make change a line of code please tell me .

[rahulChaudhariParticipant]

When 2nd cell is begin to edit , it supposed to come blank. now coming previous TextArea text in it at begin edit

[svetoslav_borislavovParticipant]

Hi,

Could you, please send me a demo in jsfiddle, because as you can see it is working in my example.
You can edit the given demo above.

Also, can you try to initialize the editor in the initeditor callback?
Here is a demo of this: http://jsfiddle.net/o1a2qbs5/

I am waiting for your demo!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[rahulChaudhariParticipant]

Hi Svetoslav,
Thanks , It is working fine now. I initialize an editor in ‘Initeditor’ and removed from ‘createeditor’.

One more thing i am facing is :
If i have added a long text in my editable column and if i click out side of cell then cell text perfectly wrapped and looking fine. But as you can see in my code i have set autorowheight: true, , that means it will adjust the height of row on the basis of content in it. So i am getting same way.
Issue is if i am again editing it and the row height is changed to ‘TextArea’ height because we are creating a TextArea on initeditor.
I want to set row’s textArea height same as its row’s. Means in ‘initeditor’ to ‘TextArea’, i want to give autoRowHeight of it’s own Row.

Please tell me how can i get current row height which has autorowheight: true, and on which event i can get it ?

[svetoslav_borislavovParticipant]

Hi,

Can you please try this way with create editor: http://jsfiddle.net/u4dqywjg/1/
I am waiting for your feedback

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[rahulChaudhariParticipant]

Yes Svetoslav , your solution is working for me. i am initializing editor in ‘initeditor’ and removed from ‘Createeditor’ . this is working fine for me. Cant initialize editor in ‘createeditor’ only, i will get same error.

[Author]

Posts