How To: Telerik Silverlight components in Microsoft LightSwitch Beta 2

by Vladimir Enchev | Comments 23

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

,
Senior Technical Architect

23 Comments

Flexsoluciones
thanks  , but we would like to see a tutorial on telerik reporting in a real example of an invoice
Garth Henderson
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?
denny
MORE!!!
Oscar Agreda
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
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
Please
You can put all the xaml code to see it
Vlad
@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
If but in this code which is at the end is not the columns is different
Flor
print interesate and custon shell
Blue
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
Hi Vlad,

Thanks for the clarification.

Yann
Paul Patterson
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
I'm facing the same problem, edit and delete always point to the first item and not to the selected one.
Vlad
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
Andy
How about using data paging?
Vlad
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
Andrew
Hey,

Is it possible to show examples for some other controls eg scheduler?
Adrian
So far I have not been able to get the Lightswitch Delete button to talk to the Silverlight RadGridControl. The data source is not synced with the grid so you can't just perform a this.mydata.delete. You need to determine the selected rows, return them to LS then delete and refresh.
None of the example projects cover this off!
Still working on it..anyone got any coding pearls of wisdom?
Ad
Adrian
Btw Andrew.. Telerik do provide an example Schedule view project.. It didn't work with VS 2011 Beta but I have got it working by creating the custom control in as SilverLight library then referencing it in my project then taking the xaml.cs and re-purposing the code for screencontrol.cs ... this was not that simple but then my knowledge of c# isn't that great.
Ad
Adrian
Haa.. my bad.. syncing between the two is easy.. one line in your xaml resolves the issue.
..
ItemsSource="{Binding ContactAddresses, Mode =TwoWay}"
SelectedItem="{Binding ContactAddresses.SelectedItem, Mode=TwoWay}">
SelectedItem was the bit I was missing!
Ad
Rodney Joyce
WRT the binding expression: How do you show the DISPLAY NAME of a choicelist value? E.g. I want to show ProjectStatus display name ("In Progress" instead of the value "InProg")?

Comments

  1.    
     
    		 
    		  
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by Vladimir Enchev - or - read latest articles in Developer Tools
Bloggers Archive Tags


Follow vladimir_enchev on Twitter