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:
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"
/>
<
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.
<
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