This is a migrated thread and some comments may be shown as answers.

Set focus to editor

4 Answers 117 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Huw Lloyd
Top achievements
Rank 1
Huw Lloyd asked on 29 Jan 2014, 11:01 AM
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

4 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 29 Jan 2014, 01:56 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Huw Lloyd
Top achievements
Rank 1
answered on 29 Jan 2014, 09:16 PM
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




0
Alexander Popov
Telerik team
answered on 31 Jan 2014, 03:18 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Huw Lloyd
Top achievements
Rank 1
answered on 31 Jan 2014, 09:47 PM
Amazing... Awesome .... Perfect.... Thanks!! 
Tags
Editor
Asked by
Huw Lloyd
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Huw Lloyd
Top achievements
Rank 1
Share this question
or