Integrating Actions into the Window in Telerik UI for Blazor

You can do a lot with the Telerik UI for Blazor Window. It not only allows you to dynamically add and remove sections of your UI, it also lets you build functionality into the window itself.

UI conventions let you add icons to the title bar of your windows. The Window in Telerik UI for Blazor will let you add any combination of the default icons (minimize, restore, and close) and also let you add your own icons. You can even bend the default icons to your own ends.

In an earlier post, I showed how a TreeView can provide a UI that allows the user to find their way to the information they want. Once the user found their info, I used a set of Telerik Windows to display the requested information. The content of a Telerik Window can, of course, consist of any combination of buttons and form controls that trigger events. However, as I’ll show in this post, you can use the window itself to deliver functionality to the user. The only limitations here are the ones you apply to yourself: the UI conventions you want to support.

Built-in Actions

By default, a Telerik Window doesn’t display any of the three default icons. It’s easy to add them, though: All you need is the WindowActions element enclosing three WindowAction elements, each with their Name attribute set to one of the default icons:

<TelerikWindow>
    <WindowActions>               
        <WindowAction Name="minimize" />
        <WindowAction Name="restore" />
        <WindowAction Name="close" />
    </WindowActions>

These icons will, without any additional work, do the right thing when the user clicks on them. But, for example, if you’re going to allow the user to make changes to the data and save it then, when the user closes the window, you should ask the user if they want to save their changes. In a perfect world, you’d need to know two things: Has the user made a change to the form, and is the data free from errors. You can handle both of those things by using Blazor’s EditForm component. I’m going to assume that you’ve done all that and are down to give the user a chance to save their information when they click the window’s close button.

The first step in adding a “check for save” functionality is to add icons you want to the window. This example adds just the single close icon:

<TelerikWindow Visible="@visibleCustomer">
    <WindowActions>               
        <WindowAction Name="Close" />
    </WindowActions>

If I want to make the icon appear and disappear, I can use a Boolean field in conjunction with the element’s Hidden attribute. This code would let me, by setting the value of visibleClose, cause my Close icon to appear when the user starts making changes:

<WindowActions>               
   <WindowAction Name="close" Hidden="@hiddenClose" />
</WindowActions>

@code {
       private bool hiddenClose = true;

To give the user the ability to decide whether to save their changes when they close that icon, I need to assign a method to the WindowAction’s OnClick event. This example assigns the method StartCheckSave to the close icon’s click event:

<WindowAction Name="close" Hidden="@hiddenClose" OnClick="StartCheckSave"/>

Be warned: As soon as you add a custom click event, it becomes your responsibility to close the window. To handle that, I’ll (eventually) need to set to false the visibleCustomer field that’s tied to the window’s Visible attribute.

Querying the User

Of course, now I want to ask the user if they want to save their changes. I’ll ask that question by displaying another window. However, I’ll center this window on the page and make it modal. Telerik Windows center themselves by default, so all I need is this markup, along with the Visible attribute set to yet another a Boolean field:

<TelerikWindow Modal="true" Visible="@visibleQuerySave">
    <WindowContent>
        <input type="button" @onclick="() => EndCheckSave(false)" value="Exit Without Saving" />
        <input type="button" @onclick="() => EndCheckSave(true)" value="Save Your Changes" />
    </WindowContent>
</TelerikWindow>

I’ll then set up the visibleQuerySave field to make this window appear when the user clicks the close button (after checking two other fields that tell me whether the user has made changes and that there are no errors):

@code {
    private bool visibleQuerySave;

    private void StartCheckSave()
    {
        if (!dirty || inError)
        {
             return;
        }
        visibleQuerySave = true;
    }

Both of the buttons in my modal window call a method I’ve named EndCheckSave: One button calls the method passing false and the other calls the method passing true. In my EndCheckSave method, I’ll first remove my modal window from the screen by setting to false the field tied to its Visible attribute. I’ll then check the true/false parameter passed to the method and, based on its value, decide whether to save the user’s data. And (finally) I’ll make the original window disappear by setting the field attached to that window’s Visible property.

Here’s that EndCheckSave method:

private void EndCheckSave(bool saveOption)
{
   visibleQuerySave = false;
   if (saveOption)
   {
       //…save user’s data
   }
   visibleCustomer = false;
}

Custom Actions and Icons

You’re not, however, restricted to using the three default icons for minimized, restore, and close. You can add your own icons to the window’s title bar.

For example, if you want to give the user the ability to save their work to local storage, you might want to add a download icon to the title bar. The only “new thing” required on the WebAction element is the Icon attribute which you use to set the appearance of the icon. For the Icon attribute, you can use the Kendo UI Web Font Icons Library, the CSS class name, or a custom icon font of your own.

When you have multiple icons, they’re rendered from left to right as they appear in the WindowActions element. Since I want to follow the standard Windows conventions, I want my close icon to be on the far-right end. That means I want to set up my WindowActions like this:

<WindowActions>
  <WindowAction Name="Download" Icon="@IconName.Download" OnClick="@SaveToLocalStorage" />
  <WindowAction Name="Upload" Hidden="@hiddenUpload" Icon="@IconName.Upload"
    OnClick="@GetFromLocalStorage" />  
  <WindowAction Name="Close" OnClick="StartCheckSave" />
</WindowActions>

I don’t want to have the upload icon display until I know that there is something in local storage to retrieve, so I’ve tied its Hidden attribute to yet another Boolean field.

All that’s left is to write the two methods, remembering in the download method to set the hiddenUpload field to true so that the upload icon appears. Here’s a sketch of the code for those two methods:

private bool hiddenUpload = true;
private async void SaveToLocalStorage()
{
    //…save to local storage
   hiddenUpload = false;
}
private async void GetFromLocalStorage()
{
   //…read from local storage
}

Really, the limitations in what you can do here come down to what commands will make sense to the user in the window’s title bar. But, as you can see, you can stack as many commands as you want into your window.

Try it Today

To learn more about Telerik UI for Blazor components and what they can do, check out the Blazor demo page or download a trial to start developing right away.

Start Your Trial