How To: Telerik Silverlight components in Microsoft LightSwitch Beta 2

Thursday, April 07, 2011 by Vladimir Enchev | Comments 22

Have you seen Microsoft LightSwitch? If not you should try it! This is definitely a simpler way to create high-quality business applications for the desktop and the cloud.

While the built-in interface (standard Microsoft Silverlight components) can be used as a start when creating applications you will definitely need custom screens depending on your business scenario and I’ve decided to show you can easily integrate Telerik RadControls for Silverlight in Microsoft LightSwitch Beta 2:

1) Create new LightSwitch project and connect to some data source: 


2) Switch to File View in your Solution Explorer, add references to desired Telerik assemblies, add new UserControl and build the project:


3) Add new screen, change the default DataGrid to a custom control and add references (again) to desired Telerik assemblies:

* Notice the GridView and Office_Blue theme assemblies are missing even that I’ve added them. Weird!


4) Declare desired Telerik component(s) in the UserControl (in my case RadGridView with RadDataForm): 

5) Run the application and check the result:

Enjoy!


Download

22 Comments

  • Flexsoluciones 07 Apr 2011
    thanks  , but we would like to see a tutorial on telerik reporting in a real example of an invoice
  • Garth Henderson 07 Apr 2011
    This is really great.  Should all of the current SL RadControls work within LS?  If so, I'll start using them now. 



    Will you please consider starting up a separate forum for LS?
  • mae 07 Apr 2011
    please vb 
  • denny 07 Apr 2011
    MORE!!!
  • Oscar Agreda 07 Apr 2011
    Can we add all controls

    http://demos.telerik.com/silverlight/#Controls

    or just the grid

    becasue if we can add all controls, we can certainly make LightSwitch a truly Business RAD, becasue of the Telerik Professional Grade of controls
  • Yann 07 Apr 2011
    Hi Vlad,

    It's not a very good solution if you have to create a custom control, every time you want to use a Telerik control, & having the bindings hard-coded into it. Unless I'm misunderstanding something?

    Telerik need to look into building LS custom control extensions, with the help of the LightSwitch Extensability Cookbook, so that properties can be wired as with any other LS control.

    http://blogs.msdn.com/b/lightswitch/archive/2011/03/16/lightswitch-beta-2-extensibility-cookbook.aspx

    Thanks,

    Yann
  • okplus 07 Apr 2011
    Please
    You can put all the xaml code to see it
  • Vlad 08 Apr 2011
    @Flexsoluciones, Garth, denny and Oscar! Indeed you can use all Telerik components using this approach including the report viewer. We will do our best to add more official examples, tutorials, etc related to LightSwitch in the future. 

    Hi Yann, You can remove declared columns and bind the grid directly to Value property if you want this user control to be reusable:
    <telerik:RadGridView ItemsSource="{Binding Value}" 
                            telerik:StyleManager.Theme="Office_Blue" 
                            RowDetailsVisibilityMode="VisibleWhenSelected"
        <telerik:RadGridView.RowDetailsTemplate> 
            <DataTemplate> 
                <telerik:RadDataForm CurrentItem="{Binding}" telerik:StyleManager.Theme="Office_Blue" /> 
            </DataTemplate> 
        </telerik:RadGridView.RowDetailsTemplate> 
    </telerik:RadGridView> 


    @mae and okplus. The only code I've added manually is the posted XAML. No additional C#!

  • flex 08 Apr 2011
    If but in this code which is at the end is not the columns is different
  • Flor 08 Apr 2011
    print interesate and custon shell
  • Blue 09 Apr 2011
    Thanks Vladimir,

    Should the delete and edit functions be working or are there some steps missing?  The delete throws and error when saving changes and the edit seems to only pick up the first record.  I tried this on my own and then downloaded the example and seem to have the same problem with both of them. 



    Thanks for this tutorial!
  • Yann 09 Apr 2011
    Hi Vlad,

    Thanks for the clarification.

    Yann
  • Paul Patterson 10 Apr 2011
    Any chance you can show an example with the ReportViewer control?

    I keep getting a "Element is already the child of another element. [Line: 0 Position: 0]" XamlParseException when attempting the same with the ReportViewer control.

    Cheers,

    Paul 
  • Alessandro 10 Apr 2011
    I'm facing the same problem, edit and delete always point to the first item and not to the selected one.
  • Vlad 11 Apr 2011
    Hi guys,

    You can add SelectedItem="{Binding Value.SelectedItem, Mode=TwoWay}" to fix delete/edit of the items. 

    @Paul - Can you verify if you've added Telerik.ReportViewer.Silverlight.dll in the custom control Add Reference dialog? I had exactly the same problems when the component dll was not added as reference in this dialog. 

    Vlad
  • Cata 11 Apr 2011
    Please reporting telerik in Microsoft LightSwitch
  • Cata 11 Apr 2011
    Please reporting telerik in Microsoft LightSwitch
  • Andy 11 Apr 2011
    How about using data paging?
  • Andy 11 Apr 2011
    How about using data paging?
  • Vlad 12 Apr 2011
    Hi Andy,

    Here is an example for paging:
    <Grid x:Name="LayoutRoot" Background="White"
        <Grid.RowDefinitions> 
            <RowDefinition /> 
            <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <telerik:RadGridView ItemsSource="{Binding PagedSource, ElementName=RadDataPager1}" SelectedItem="{Binding Value.SelectedItem, Mode=TwoWay}" 
                                telerik:StyleManager.Theme="Office_Blue" 
                                RowDetailsVisibilityMode="VisibleWhenSelected"
            <telerik:RadGridView.RowDetailsTemplate> 
                <DataTemplate> 
                    <telerik:RadDataForm CurrentItem="{Binding}" telerik:StyleManager.Theme="Office_Blue" /> 
                </DataTemplate> 
            </telerik:RadGridView.RowDetailsTemplate> 
        </telerik:RadGridView> 
        <telerik:RadDataPager x:Name="RadDataPager1" Source="{Binding Value}" PageSize="10" Grid.Row="1" telerik:StyleManager.Theme="Office_Blue" /> 
    </Grid> 


    Vlad
  • Vlad 12 Apr 2011
    Hi guys,

    I've just published another blog post with more info how to use Telerik Reporting in LightSwitch:
    http://blogs.telerik.com/vladimirenchev/posts/11-04-12/how_to_telerik_reporting_in_microsoft_lightswitch_beta_2.aspx

    Vlad
  • Andrew 06 May 2011
    Hey,

    Is it possible to show examples for some other controls eg scheduler?

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)