Auto Focus and Select on Scheduler Edit

1 Answer 49 Views
Scheduler Templates
K
Top achievements
Rank 1
K asked on 15 Aug 2022, 08:44 PM | edited on 15 Aug 2022, 08:45 PM

I want the editor to open up with the "Title" field pre-focused and with the "No title" text selected. 

the below code does not seem to be working.

I am using a custom edit template

 edit: function (e) {

                var input = e.container.find("title");
                input.select();
                input.focus(function (e) {
                    input.select();
                });

                input.focus();

}

 

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 18 Aug 2022, 03:08 PM

Hi,

You could subscribe to the edit event of the Scheduler widget. Then, you can search for the needed input element in the edit popup container and use the jQuery focus and select methods. You may need to use a slight delay in order for the edit popup to be fully rendered by the time you are trying to focus the input element:

 edit: function(e){
            setTimeout(function(){
                  $('[data-container-for="title"] .k-textbox .k-input-inner').focus().select()
            }, 400)
},

Here is a Dojo example where this is demonstrated.

I hope this helps.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

K
Top achievements
Rank 1
commented on 18 Aug 2022, 03:37 PM

This works. Thank you.

 

I have another issue.  It seems that the allDay template does not properly populate on the day and week calendars when the height is more than one line of text. This happens no-matter what I do with the template.  

Neli
Telerik team
commented on 23 Aug 2022, 11:06 AM

Hi,

I am glad to hear that the provided suggestion was helpful.

Regarding the new issue, could you please elaborate a little bit more because I am not sure what is exactly the problem. 

In our Scheduler API the example for the allDayEventTemplate demonstrates a multiline scenario:

https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/alldayeventtemplate

Also in case you need to chnage the height of the template you can use a style as in the example below:

<style>
    .k-scheduler-dayview .k-scheduler-table td,
    .k-scheduler-weekview .k-scheduler-table td {
      height: 110px !important;
    }
  </style>

This is also demonstrated in the Dojo linked here. 

However, if the provided information is not helpful, pelase send us some more details about the issue, so we could understand the scenario and advise you further.

Regards,

Neli

Tags
Scheduler Templates
Asked by
K
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or