RadSpreadsheet for WPF and SL became official in Q3 2013. Now we want to give you a hint of how easy it is to customize the control. This blog post illustrates how to wire the spreadsheet to a RadToolBar – a task that is indeed very easy to achieve with the API of RadSpreadsheet. So let’s roll up our sleeves!

To give your application a finished look, you might want to expose UI that allows the user to manipulate the spreadsheet. Typically (as in our first look example), you will bind the RadSpreadsheet to a RadRibbonView that contains numerous buttons, drop downs etc. organized in tabs. However, if you want to offer the user a smaller and more focused set of options, RadToolBar might be a better choice. This is the case when, for example, you want to allow the user only the following options:

  • open, save and create new files
  • cut, copy and paste the contents of the worksheet

It is very important to allow the user to perform each of the above commands only when it is appropriate to execute them. In other words, we do not want the users to save the document while they are editing the value of a cell.

Now that we have our requirements set, let’s see how to implement them. Our first step is to add a RadToolBar and set its DataContext to the CommandDescriptors of the RadSpreadsheet instance.

<telerik:RadToolBar DataContext="{Binding Path=CommandDescriptors, ElementName=radSpreadsheet}">
</telerik:RadToolBar>
<telerik:RadSpreadsheet Grid.Row="1" x:Name="radSpreadsheet" />

The CommandDescriptors property of RadSpreadsheet exposes descriptors for all commands available in RadSpreadsheet API. Each command descriptor, in turn, holds the command it designates and also information whether it is currently available. So, once the command descriptors are set as a data context, you can add a button and wire it to a command exposed by any descriptor. For example, here is how to set up a save file button:

<telerik:RadButton Command="{Binding Path=SaveFile.Command}" IsEnabled="{Binding Path=SaveFile.IsEnabled}" Style="{StaticResource ResourceKey=button}">
    <Image Source="/SpreadsheetWithToolBar;component/Resources/Save_16x16px.png" Stretch="None" />
</telerik:RadButton>

 
In the snippet above the Command property of the Button is set to the command of the SaveFile command descriptor. Notice that we set the IsEnabled property of the button to the value of the IsEnabled property of the command descriptor. This will disable the button when the command is not available, i.e. when the worksheet is in edit mode. Armed with the spreadsheet’s command descriptors, you can wire any UI to any command with several lines of code.

To allow the user to open, save and create documents and copy, cut and paste worksheet’s contents, we need six buttons. The following snippet illustrates how to set up all of them in the RadToolBar:

<telerik:RadToolBar DataContext="{Binding Path=CommandDescriptors, ElementName=radSpreadsheet}">
    <telerik:RadButton Command="{Binding Path=NewFile.Command}" IsEnabled="{Binding Path=NewFile.IsEnabled}" Style="{StaticResource ResourceKey=button}">
        <Image Source="/SpreadsheetWithToolBar;component/Resources/New_16x16px.png" Stretch="None" />
    </telerik:RadButton>
 
    <telerik:RadButton Command="{Binding Path=OpenFile.Command}" IsEnabled="{Binding Path=OpenFile.IsEnabled}" Style="{StaticResource ResourceKey=button}">
        <Image Source="/SpreadsheetWithToolBar;component/Resources/Open_16x16px.png" Stretch="None" />
    </telerik:RadButton>
 
    <telerik:RadButton Command="{Binding Path=SaveFile.Command}" IsEnabled="{Binding Path=SaveFile.IsEnabled}" Style="{StaticResource ResourceKey=button}">
        <Image Source="/SpreadsheetWithToolBar;component/Resources/Save_16x16px.png" Stretch="None" />
    </telerik:RadButton>
 
    <telerik:RadToolBarSeparator/>
 
    <telerik:RadButton Command="{Binding Path=Paste.Command}" IsEnabled="{Binding Path=Paste.IsEnabled}"  Style="{StaticResource ResourceKey=button}">
        <Image Source="/Telerik.Windows.Controls.Spreadsheet;component/Images/Light/16/paste.png" Stretch="None" />
    </telerik:RadButton>
 
    <telerik:RadButton Command="{Binding Path=Cut.Command}" IsEnabled="{Binding Path=Cut.IsEnabled}" Style="{StaticResource ResourceKey=button}">
        <Image Source="/Telerik.Windows.Controls.Spreadsheet;component/Images/Light/16/cut.png" Stretch="None" />
    </telerik:RadButton>
 
    <telerik:RadButton Command="{Binding Path=Copy.Command}" IsEnabled="{Binding Path=Copy.IsEnabled}" Style="{StaticResource ResourceKey=button}">
        <Image Source="/Telerik.Windows.Controls.Spreadsheet;component/Images/Light/16/copy.png" Stretch="None" />
    </telerik:RadButton>
</telerik:RadToolBar>

Here is the result:



That’s it! Now you know everything you need to plug RadSpreadsheet to any UI. You can download a runnable project of the example from our online SDK repository here, the example is listed as Spreadsheet RadToolBarUI. So make sure to check it them out and play around with the source.

Stay tuned for more Spreadsheet customization tips and tricks!

Boryana Goncharenko,
Software Developer


Related Posts

Comments