- Creating the Sample Project
- Replacing the Built-In Data Grid with Custom Controls
- Implementing the Custom Paging Mechanism
- Fine-Tuning the Layout
- Testing the Application
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Replacing the Built-In Data Grid with Custom Controls
Silverlight controls from Telerik don't ship as an extension for LightSwitch, so you'll need to perform some operations manually. The first thing to do is create a new Silverlight user control. At this point, you need to add a new project of type Silverlight Class Library to the current solution.
- Select File > Add > New Project.
- In the Add New Project dialog box, select the Silverlight Class Library template, as shown in Figure 2.
- Once the new class library project is ready, you need to add a Silverlight user control.
- Select Project > Add New Item.
- In the Add New Item dialog box, select the Silverlight User Control template, as shown in Figure 3.
- Give the control a different name, if you like. In this example, the new control's name is TelerikGridViewControl.xaml.
)
)
Now you need to give the new project a reference to an assembly called Telerik.Windows.Controls.GridView.dll. The mentioned assembly is located here:
C:\Program Files\Telerik\Rad Controls for Silverlight...\Binaries\Silverlight
After adding the reference, you must write some lines of XAML code to import Telerik's namespace and to declare the RadGridView, as shown in Listing 1.
Listing 1—Creating a custom DataGrid control.
<UserControl x:Class="CustomControlsLibrary.TelerikGridViewControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadGridView Name="GridView1" AutoGenerateColumns="True" ItemsSource="{Binding Value}"
ShowGroupPanel="False"/>
</Grid>
</UserControl>
Notice that the ItemsSource property is bound to a property called Value, which represents the data collection exposed by the screen. This design basically enables you to bind any collection, making the control reusable.
Before going back to LightSwitch, you must compile the new project.
- Open the only screen that you created previously in the LightSwitch application.
- Select the element called Data Grid | Customers. There's an option to select a custom control, as shown in Figure 4. Click this option.
- In the Properties window, click the Change hyperlink near the Custom Control property. When you click this hyperlink, the Add Custom Control dialog appears.
- Click Add Reference; then add a reference to the Silverlight project created previously.
- In the dialog, find the assembly—and therefore the namespace—that contains the TelerikGridView control (see Figure 5). When you click OK, the TelerikGridView control replaces the built-in Data Grid.
- To demonstrate the result, run the application. As Figure 6 shows, the application correctly displays the list of customers. However, due to the custom control, the built-in search box and paging controls are not available.
)
)
)
Next, you'll learn how to implement your custom paging mechanism by writing a few lines of code.