jqxEditor in grid

[hypertyperParticipant]

Hi,

is there a way to get the jqxEditor as cell editor into the grid?

I’ve tried the initeditor and createeditor functions, but I do not get it running:

					initeditor: function (row, cellvalue, editor, celltext, pressedChar) 
					{
					  var editorElement = editor.find('textarea');
					  var ds = $("#mygrid").jqxGrid('source');
						editorElement.val(ds.records[row].Text);
					},
					createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight)
					{
					  var editorElement = $('<div><textarea></textarea></div>').prependTo(editor);
					  editorElement.jqxEditor({ height: '100%', width: '100%' });					
					  
					}

[DimitarParticipant]

Hello hypertyper,

Please make sure you have set the column’s columntype property to “template” or “custom” and that you have sufficiently large cells to display the jqxEditor widget inside (increasing rowsheight would help). Also remember to include all scripts necessary to initialize a jqxEditor in your page’s header.

Best Regards,
Dimitar

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

[hypertyperParticipant]

Hi,
thanks. I did not set the columntype property correct

Unfortunatelly it still does not work at all because the “val” method in the initeditor event does not correctly set the content of the editor element.

Is this the wrong place to call the val method toll fill the editor with the cells value?

Regards
Robert

[DimitarParticipant]

Hi Robert,

Yes, initeditor is the correct place to set the editor value. There is something that is correct with your code (as provided in your previous post), though. You initialize the jqxEditor from editorElement, which is a jQuery selection of a div and its contents. However, in initeditor, you call the jqxEditor method val for a jQuery selection of a textarea. This is what may be causing the issue. We recommend that you initialize only from a textarea, i.e.:

createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
    var editorElement = $('<textarea></textarea>').prependTo(editor);
    editorElement.jqxEditor({ height: '100%', width: '100%' });
}

Best Regards,
Dimitar

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

[Author]

Posts