Multiline editors within grid

[Benji6996Participant]

I am aware that this question has been asked before, and from what I can see, there are not any conclusive solutions. So, I have written a tiny function to replace the input with a textarea and then update the grid when it is changed…

However, the problem I am having is that when I blur the textarea, I get the error: “Uncaught NotFoundError: Failed to set the ‘innerHTML’ property on…”. I know that this has something to do with editor.remove(), but unless I remove the editor, the textarea is not visible…

Is there a solution to this?

Here is my code:

createeditor: function(row,cellvalue,editor){
	// Create the textarea
	var textarea = $('<textarea>'+cellvalue+'</textarea>');
	// Attach the change event
	textarea.on('change',function(){
		var value = $(this).val();
		$("#grid").jqxGrid('setcellvalue', row, data.columns[index].datafield, value);	
	});
	// Insert the textarea
	editor.after(textarea);
	// Select the contents of the textarea
	textarea.select();
	// Remove the default input
	editor.remove();
}

[Peter StoevKeymaster]

Hi,

To create custom editors, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?arctic

Best Regards,
Peter Stoev

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

[Benji6996Participant]

Thank you for your prompt reply!

I have been referring to this page when writing my script but I found some problems with it which I couldn’t get around… For instance, when I did the following, it just placed a textarea within an input in the DOM:

var textarea= $("<textarea>").prependTo(editor);

and this would result in:

<input jqxstuffhere...>
    <textarea></textarea>
</input>

So with that in mind, I wrote my own method. Are you saying that I can achieve what I would like if I use the methods highlighted on this page?

[Peter StoevKeymaster]

Hi Benji6996,

My suggestion is to look at the example I pointed you which illustrates how to create custom Editors, because to create custom Editors you should use that approach and not the one which you tried. The one which you tried is for customizing an existing editor, not Replacing it.

Best Regards,
Peter Stoev

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

[Benji6996Participant]

I will take another look. Thank you Peter

[Benji6996Participant]

I have taken a good look at the method you have suggested but what is unclear is how I remove the editor instead of applying a jqx widget to it… I need to remove the input and replace it with a textarea but when I call editor.remove() I then get errors later on.

From what I can understand thus far:

createeditor: function(parameters...){
   // Create the textarea here and replace the editor with the textarea
},
initeditor: function(parameters...){
   // Place the value of the cell into the textarea
}
geteditorvalue: function(parameters...){
   // Return the value of the textarea
}

Whilst the above seems correct, if I call editor.remove() then initeditor and geteditorvalue will not be able to access editor and I will receive errors. Would you be able to advise my algorithm a little better?

[Peter StoevKeymaster]

Hi Benji6996,

I don’t think you’ve looked into the sample in depth. There is no INPUT when the column’s type is set to the required type for creating a custom editor.

Best Regards,
Peter Stoev

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

[Benji6996Participant]

Gosh! Its always the small things you miss isn’t it!!! I will have another play. Sorry about that

[Peter StoevKeymaster]

Note that columntype: ‘template’

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Benji6996Participant]

Think I have sorted it, but just one thing I should probably point out as it may be a typing error…

In the example, the parameters for initeditor are function(row, cellvalue, editor, celltext, pressedkey), but in the docs they are function(row, cellvalue, editor, celltext, cellwidth, cellheight). Am I missing something?

[Benji6996Participant]

Also, what is the best method to catch a key press for the cell so that I can prevent the cellendedit method being called when the Enter key is pressed?

[zippeurfouParticipant]

Hi benji,
I think lot of people including me would be interested in your solution if you managed to make it work. Mind to share the complete code?
Best,

[TDRParticipant]

Hi,
I stumbled across the same requirement. I hope my solution is of help:

columns: [
{
    text: 'my column title', dataField: 'myData', autowidth: false , columntype: 'template',
        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
            var editorElement = $('<textarea id="customTextArea"></textarea>').prependTo(editor);
            editorElement.jqxEditor({ height: '100%', width: '100%', tools: "" });
            editorElement.val(cellvalue);
        },
        geteditorvalue: function (row, cellvalue, editor) {
            return $('#customTextArea').val();
        }
}

[bigman73Participant]

Hi,
I tried all the options above without success.
Is there a working example that shows how to have a multi-line editor in a jqxGrid

Thanks.

[Peter StoevKeymaster]

See: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?light. The sample demonstrates how to create custom cell editors in our Grid.

[Author]

Posts