How to set focus to TextBox once Telerik RadBusyIndicator stops?

Most of you have already used BusyIndicator control in your Silverlight or WPF application while communicating with server or processing a huge data. Sometime developers want to focus to a particular control like TextBox once the busyIndicator stops.

I noticed in various forums that developers really suffer a lot focusing to a TextBox at the end of the processing and when the busy indication stops. Let’s read the trick to resolve this.

Problem Statement

Let us first understand the problem statement, the solution is simple enough once you go thru this. Let us have a window with a search TextBox inside a Telerik RadBusyIndicator. When the user enter search key in the TextBox and hit search, it starts the BusyIndicator and gives a round trip to the server to search in the database. Once the service returns the data, you stop the BusyIndicator and want to place your cursor focused into the search TextBox.

At a first glance, it is very easy. Isn’t it? Just call the Focus() method of the TextBox once you set busyIndicator.IsBusy=”False”, but that will not work. The TextBox control will not be focused once the busy indication stops. The reason behind this is very reasonable. Once you set IsBusy=”False”, it starts an animation to close the busy indicator. Within that time, it executes the next line and focused the TextBox control, but then again changes it’s focus point to BusyIndicator to close it completely. Thus, you will not see the TextBox focused in the UI.

Solution

You might already know that, TextBox inherits from System.Windows.Controls.Control class. Control class has an event called IsEnabledChanged, which is the only option here to rescue you. When BusyIndicator starts, all controls inside it change their state to disabled automatically and become enabled once the busy indication stops completely. Take advantage of this event to focus your TextBox control.

If you know the TextBox (or any other control) that you want to focus once the busy indicator completes, just register the IsEnabledChanged event and focus that on processed. That’s all. Here is the code snippet for your reference:

firstTextBox.IsEnabledChanged += (s, e) => firstTextBox.Focus();

Demo

To demonstrate the problem and it’s solution, let’s create one Silverlight project and add a reference to the assembly named Telerik.Windows.Control.dll in your Silverlight client project. In the MainPage.xaml, modify the code or replace the existing one with this:

<telerik:RadBusyIndicator x:Class="KunalChowdhury.BusyIndicatorFocusDemo.MainPage"

                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <StackPanel Orientation="Vertical" Margin="50">

        <TextBox x:Name="firstTextBox" Width="200" Margin="5"/>

        <TextBox Width="200" Margin="5"/>

        <TextBox Width="200" Margin="5"/>

        <TextBox Width="200" Margin="5"/>

        <TextBox Width="200" Margin="5"/>

        <Button Width="120" Height="26" Content="Show Busy" Margin="10" 

                Click="OnShowBusyClicked"/>

    </StackPanel>

</telerik:RadBusyIndicator>

And the related C# code is here for simulate the issue and the solution:

namespace KunalChowdhury.BusyIndicatorFocusDemo

{

    using System;

    using System.Windows;

    using System.Windows.Threading;

    using Telerik.Windows.Controls;

    public partial class MainPage : RadBusyIndicator

    {

        public MainPage()

        {

            InitializeComponent();

            // uncomment the below line to focus the first TextBox, once the BusyIndicator closes

            // firstTextBox.IsEnabledChanged += (s, e) => firstTextBox.Focus();

        }

        private void OnShowBusyClicked(object sender, RoutedEventArgs args)

        {

            IsBusy = true;

            var dispatcherTimer = new DispatcherTimer { Interval = new TimeSpan(0, 0, 0, 2) };

            dispatcherTimer.Tick += (s, te) =>

            {

                IsBusy = false;

                dispatcherTimer.Stop();

            };

            dispatcherTimer.Start();

        }

    }

}

Here on click of the button, it actually simulates a service call or a huge data processing after starting the BusyIndicator service. After 2 seconds delay, it stops the busy indication. If you go with the same code, or enter firstTextBox.Focus() just after IsBusy=false, you will notice that the TextBox will not get focus once it stops.

To focus it, uncomment the line in the constructor which will focus the box back once the busy indication stops completely and the TextBox changes it’s status to enable.

I hope the post will help you if you faced similar problem in your Silverlight or WPF project with the BusyIndicator. Don’t forget to share your thoughts about this workaround.