Create bound KendoEditor but is inexplicably readonly

[Peter]

Hi I'm using a KendoEditor for the first time - with data binding and it just doesn't work.
I don't know what to look for.

My template is as below and it basically works. There's nothing catastrophic going wrong here.
So, the binding works (for all the other fields, the KendoEditor appears nicely, and all seems good.

But when I click on the editor, nothing happens - I can't type any text.
If I click any toolbar buttons, I get a variation on the error "Uncaught TypeError: Cannot use 'in' operator to search for 'getSelection' in undefined "

I'm guessing somebody might know, immediately why this would be happening?

<div id="properties-list">
<ul data-template="properties-template" data-bind="source: partProperties"></ul>
<script id="properties-template" type="text/x-kendo-template">
<li>
<label>
<input class="k-widget" data-bind="value: Label" tabindex="-1" />
</label>
#if (Name === "folderDoc") { #
<textarea class="editor" data-role="editor" data-bind="value: Value"></textarea>
#} else { #
<span class="k-textbox">
<input type="text" class="data" data-bind="value: Value" />
</span>
#}#
</li>
</script>
</div>

[Peter]

BTW I've read the Troubleshooting tips in the Doco - I'm not using Firefox, so that's not the reason it's doing these. I'm using Chrome.
I've tried even removing the "data-binding" from the <textarea> element and it still doesn't work - so something about using the data-role attribute doesn't work because...

[Peter]

Sorry, I've also tried adding rows/cols elements into the textarea - but still read-only.

[Peter]

If I initialize the textarea with text, it disappears in a flash..

<textarea data-role="editor" class="richtext-editor data">
This text will briefly show, then quickly disappear within about 0.5 seconds
Then the entire control is unusable.
</textarea>

[Alex Gyoshev]

Hello Peter,

We tried reproducing the problem in the following Dojo snippet, but it appears to be working correctly. Can you please adjust it so that it shows the problem?

Regards,
Alex Gyoshev
Telerik

 

 

[Peter]

Thanks, I will.
From more testing, I realized that I hide() then show() the underlying Form that the KendoEditor is contained in.
It's after that, and I think, because of that, it goes disabled.

[Peter]

I cannot reproduce it, on the Dojo snippet, though it's almost identical to what I'm running.
I tried updating to the same versions as the Dojo as well.

It only happens, in my codebase, when I call the code $('#properties-pane').show('blind')
If I don't call that, it works fine.

I can't expect you to solve it without a reproduction but would you watch this 40sec video I made of it happening and give me any clue to what's going wrong? I tried to show the console and some HTML to help.

The text in the control flashes and then disappears and then the control is inoperable.

[Peter]

Video link - http://youtu.be/ol3vHuEDgqI

[Alex Gyoshev]

Hello Peter,

From the description of the jQuery UI blind effect: 'The blind effect hides or shows an element by wrapping the element in a container, and "pulling the blinds"'. Thus, it moves the Editor in the DOM, and you need to call the refresh method after the animation is done.

Regards,
Alex Gyoshev
Telerik

 

 

[Peter]

That's it, I didn't consider that. Thanks.
In coffeescript (making sure to use the blind's callback method to ensure it's finished)

$('#properties-pane').show 'blind', -> $('#helpdoc-editor').data('kendoEditor')?.refresh()