Alessandro Del Sole's Blog

/* A programming space about Microsoft® .NET® */
posts - 159, comments - 0, trackbacks - 0

My Links


Your host

This is me! This space is about Microsoft® .NET® and Microsoft® Visual Basic development. Enjoy! :-)

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.

Microsoft MVP

My MVP Profile

I'm a VB!

Watch my interview in Seattle

My new book on VB 2015!

Pre-order VB 2015 Unleashed Pre-order my new book "Visual Basic 2015 Unleashed". Click for more info!

My new book on LightSwitch!

Visual Studio LightSwitch Unleashed My book "Visual Studio LightSwitch Unleashed" is available. Click the cover!

Your visits

Follow me on Twitter!

CodePlex download Download my open-source projects from CodePlex!

Article Categories


Post Categories

.NET Framework


Help Authoring

Microsoft & MSDN

Setup & Deployment

Visual Basic 2005/2008/2010

Using Telerik controls in LightSwitch for exporting, filtering, and sorting data - part 1

One of the hottest topics for those folks that are evaluating the Betas of Visual Studio LightSwitch is the possibility of using 3rd party user controls, but also printing and reporting. Of course you have the possibility of doing that, by using user controls written upon Silverligh 4.0. I intensively use the RadControls for Silverlight di Telerik suite, which is very good and that enriches the Visual Studio 2010's toolbox.

It seems that Telerik is planning to create extensions for LightSwitch, but you can actually use controls from the current suite. In this (and the next) blog post we'll see how to use such controls to create a very rich LightSwitch application. We are going to use the famous RadGridView, a special grid with advanced filtering, grouping and sorting functionalities; we are going to implement paging and exporting to Excel, PDF, and printing. Of course this requires Visual Studio 2010 Professional or higher.

I'm going to split the discussion into two posts, so that it is less boring. If you paid attention to what I wrote, you are probably wondering why we should implement tools for exporting to Excel and for paging, since in LightSwitch these are available by default. This is partially true, since when you replace the built-in DataGrid with an external component you loose all the available, built-in features for exporting and for paging, thus the need is composing a user control that implements all the required features. Also, in LightSwitch you can export to Excel only if the applications is running with elevated permissions (-> desktop client); if the application is instead running inside the browser it cannot take advantage of COM automation, which is available only with the elevated privileges of out-of-browser apps. In this first post we create a new user control which embeds the RadGridView and the RadDataPager controls from Telerik. More to come in the next post.

Imagine you have a new LightSwitch application that is bound to a new or existing data source. In the current demo I'm using an existing connection to the Northwind database. In this case I've imported the following tables: Customers, Orders and Order_Details so that LightSwitch generated the appropriate entities and entity collections. Once the data source is ready, the first thing is adding a new screen for displaying the list of customers and related orders so a screen of type List and Details is our choice:

When the screen is available, the Screen Designer gets active and shows the auto-generated user interface. Now let's add to the solution a new project of type Silverlight Class Library, based upon Silverlight 4. I've called the project TelerikClassLibrary, but this is your choice. Visual Studio adds a new default class called Class1.vb, that we need to remove.

Now let's add to the project a new element of type Silverlight User Control:

Now our goal is using controls from Telerik to manage the list of Orders. When the XAML designer is ready, we have two choices: the first choice is manually adding references to Telerik assemblies whereas the second one is dragging controls from the toolbox and then adjusting the XAML code manually. This choice is probably the simplest, so let's drag both the RadGridView and RadDataPager. At this point we also design buttons that will be used later in next post, even if in this one they will do nothing. I'm not going to focus very much on explaining the code here, since the online page of Telerik samples provides detailed explanations. The goal is understanding how to use those controls in LightSwitch, so we do not waste time This is the code for the UI:

    <Grid x:Name="LayoutRoot" Background="White">
            <RowDefinition Height="29" />
            <RowDefinition Height="*" />
            <RowDefinition Height="29" />
        <telerik:RadGridView Grid.Row="1" Name="RadGridView1" ItemsSource="{Binding Value}" ShowInsertRow="True" IsFilteringAllowed="True" 
                             SelectedItem="{Binding Value.SelectedItem, Mode=TwoWay}"  RowDetailsVisibilityMode="VisibleWhenSelected" AutoGenerateColumns="False">
                <telerik:GridViewDataColumn Header="Order Date" DataMemberBinding="{Binding Path=OrderDate, StringFormat=D}"/>
                <telerik:GridViewDataColumn Header="Required Date" DataMemberBinding="{Binding Path=RequiredDate, StringFormat=D}"/>
                <telerik:GridViewDataColumn Header="Shipped Date" DataMemberBinding="{Binding Path=ShippedDate, StringFormat=D}"/>
                <telerik:GridViewDataColumn Header="Ship Via" DataMemberBinding="{Binding Path=ShipVia}"/>
                <telerik:GridViewDataColumn Header="Freight" DataMemberBinding="{Binding Path=Freight, StringFormat=c}"/>
                <telerik:GridViewDataColumn Header="Ship Name" DataMemberBinding="{Binding Path=ShipName}"/>
                <telerik:GridViewDataColumn Header="Ship Address" DataMemberBinding="{Binding Path=ShipAddress}"/>
                <telerik:GridViewDataColumn Header="Ship City" DataMemberBinding="{Binding Path=ShipCity}"/>
                <telerik:GridViewDataColumn Header="Ship Country" DataMemberBinding="{Binding Path=ShipCountry}"/>
        <telerik:RadDataPager Grid.Row="2" Name="RadDataPager1" Source="{Binding Items, ElementName=RadGridView1}" PageSize="45" IsTotalItemCountFixed="True"/>
        <StackPanel Orientation="Horizontal">
            <Button Content="Export to Excel" Height="21" Name="Button1" Width="100" Margin="3" />
            <Button Content="Print" Height="21" Name="PrintBitton" Width="100" Margin="3"/>
            <Button Content="Export to PDF" Height="21" Name="ExportPDFButton" Width="100" Margin="3"/>

It is worth mentioning that:

  • the RadGridView's behavior is very close to the LightSwitch's DataGrid. By using the appropriate StringFormat markup extensions, at runtime the grid will show the appropriate user controls according to the data type they are bound to.
  • the ItemsSource is bound to a generic object called Value. This makes the RadGridView able of receiving any collection at runtime, making our user control reusable.
  • it is very important binding the SelectedItem property to the current element of the associated collection, otherwise they are not correctly associated
  • Differently from the built-in paging control, the RadDataPager points to the Items property of the RadGridView. Other paging properties are pretty self-explanatory

This is typically what we need to do. The magic is now that we do not need any additional VB or C# code, all the work is made in XAML via data-binding. So now our user control looks like this:

Let's build the project and see how we can use it in LightSwitch. At this point let's open the Screen Designer for the List and Details screen created before. We can select the DataGrid associated to the Orders collection and in the combo box we can replace it with Custom Control:

Next, in the Properties window we have to locate the Custom Control item and we can see how its value is Not Set, so we can click Change. This allows selecting a different user control; first we need to click Add Reference to add a reference to the Silverlight project that contains our control, than we select the control in the dialog like this:

In the Properties window now the control is bound to the screen:

Similarly to what usually happens in Silverlight and WPF, you have a Data Context property for the user control; this property is populated with the Orders collection. The next step is simply running the application:

As you can see our user control replaced the original DataGrid, only through the XAML data-binding. Now we can take advantage of advanced features in the RadGridView, such as integrated filters, column reordering, sorting, and so on.

In the next post we'll demonstrate how to implement exporting and printing features.


Print | posted on giovedì 19 maggio 2011 15:02 | Filed Under [ Visual Basic Visual Studio LightSwitch ]


No comments posted yet.

Post Comment

Please add 8 and 3 and type the answer here:

Powered by:
Powered By Subtext Powered By ASP.NET