Set focus to editor

[Huw Lloyd]

Hi 

I am using an editor on my page using MVC helper i.e.

 @(Html.Kendo().EditorFor(u = > ....

How do i make it so that when I open the page the cursor is blinking away in the editor ready for me to type.. At the moment I need to click on the editor to give it focus,.

I am sure there is some clever jQuery I need to be using.

Any help much appreciated

[Alexander Popov]

Hello Huw,

Yes, you could use the document's ready event handler to call the Editor's focus method. For example: 

@(Html.Kendo().Editor()
      .Name("myEditor")
      ....
)

<script>
    $(document).ready(function () {
        $("#myEditor").data("kendoEditor").focus();
    });
</script>

Regards,
Alexander Popov
Telerik

[Huw Lloyd]

Thanks that is what I thought, however it does not work for me because I am using 

@(Html.Kendo().EditorFor(..... not @(Html.Kendo().Editor(....
 
I have Encode(false) and on the Model property for the editor I have [AllowHtml] attribute. I have needed to do this because otherwise when my validation fails the editor shows the Html markup.

Problem is that as soon as I add a .Name("myEditor") to the editor which I need for the jQuery focus statement this causes an error when I try to post the form back to the server as for some reason it makes the Model.State no longer valid... take the .Name property away again and it works fine but I don't get the focus.

How do I combine the focus functionality you provide together with the Encode(false) / AllowHtml attribute functionality to prevent showing html markup when the Model validation fails.

Whilst I am on this, on some pages I have other inputs as well as the editor and when I tab from box to box it works fine except when I tab to the editor it tabs through all the control buttons. How do I make it so that when I tab to the editor it goes straight into the text area.

Once all this is working I will be a happy programmer!!

Any help much appreciated

[Alexander Popov]

Hello again,

Basically when the EditorFor helper is used the Editor's ID is equal to the model's property, so you can replace "myEditor" with the corresponding name in the jQuery selector. Setting the Encode option to false and using a AllowHtml attribute on the field should be sufficient. Regarding your last question - you could attach a handler to the blur event of the last element before the Editor. Once the event is triggered you can call the Editor's focus method.

Regards,
Alexander Popov
Telerik

[Huw Lloyd]

Amazing... Awesome .... Perfect.... Thanks!!