You are here:   Blog
Register   |  Login

LightSwitch News

Aug 6

Written by: Michael Washington
8/6/2011 8:38 PM  RssIcon

image

Note: You must have Visual Studio Professional (or higher) to complete this tutorial

Telerik has a differentiating LightSwitch control in their Rich Text Editor Control. It allows you to create compelling LightSwitch applications. It allows your end-users to create, import and export Microsoft Word documents. It also contains many other features.

In this example, we will build a small application that allows rich notes to be entered for people.

First, Install the Telerik controls for LightSwitch available here: http://www.telerik.com/products/lightswitch-support.aspx.

image

We create a New Project.

 

image

We call it TelerikNoteTaker.

 

image

We add a table.

image

We add a NoteTaker_People table with the schema above

 

image

We clear the length of the Notes field  (this sets it to unlimited) because the XAML markup is large.

We also un-check the Display As Default because we do not want it to display in the automatic popup that LightSwitch will create to allow us to edit the data in the table. We only want to edit the name not the notes in the automatic popup that LightSwitch creates.

 

image

We add a Screen.

 

image

We create a List and Details Screen.

 

image

The Screen will show.

 

image

We click on the List Column

 

image

We set the Properties according to the image above.

 

image

We right-click on the Name column and Delete it (we can enter a name and edit it in the popup that will automatically be created)

 

image

We hit F5 to run the application.

 

image

We enter some sample data.

We then close the application.

 

Create The Custom Control

While it is possible to directly implement any Silverlight control in LightSwitch (my book, Creating Visual Studio LightSwitch Custom Controls (Beginner to Intermediate), covers all the methods and the syntax to use), it is actually easer and requires less code, to simply create a Silverlight Custom Control (a .xaml page), and then put the Silverlight control that you want to implement on that .xaml page.

image

Create a New Project.

 

image

Create a Silverlight Class Library called SilverlightControls.

 

image

Make it Silverlight 4 (or higher).

 

image

Delete the Class1.cs file that is automatically created.

 

image

Add the following references to the Silverlight project:

  • System.Windows.Browser.dll
  • Main Telerik Assemblies
    • Telerik.Windows.Controls.dll
    • Telerik.Windows.Controls.ImageEditor.dll
    • Telerik.Windows.Controls.Input.dll
    • Telerik.Windows.Controls.Navigation.dll
    • Telerik.Windows.Controls.RibbonBar.dll
    • Telerik.Windows.Controls.RichTextBoxUI.dll
    • Telerik.Windows.Data.dll
    • Telerik.Windows.Documents.dll
  • Format providers for export/import
    • Telerik.Windows.Documents.FormatProviders.Html.dll
    • Telerik.Windows.Documents.FormatProviders.MsRichTextBoxXaml.dll
    • Telerik.Windows.Documents.FormatProviders.OpenXml.dll
    • Telerik.Windows.Documents.FormatProviders.Pdf.dll
    • Telerik.Windows.Documents.FormatProviders.Rtf.dll
    • Telerik.Windows.Documents.FormatProviders.Xaml.dll
  • Spell Checking
    • Telerik.Windows.Documents.Proofing.dll
    • Telerik.Windows.Documents.Proofing.Dictionaries.En-US.dll

Note: Install the Telerik controls for LightSwitch here: http://www.telerik.com/products/lightswitch-support.aspx

image

Add a New Item.

 

image

Add a new Silverlight control and name it TelerikEditor.xaml.

 

image

We change the DesignHeight to 600 x 800 and zoom out to 50%.

 

image

From the Visual Studio Toolbox, we drag the RadRichTextBox control, and drop it on the design surface.

 

image

A configuration wizard will show.

We choose Text Box or Rich Text Box. This option will allow us to select a DataProvider needed to allow us to save data in LightSwitch.

The way the RadRichTextBox control works, is that it simply shows data supplied by the DataProvider that is attached to it. This allows the same control to show XAML (viewable in Silverlight and WPF), HTML (viewable on a normal web page), RTF (Microsoft Word format), or plan Text.

 

image

The next screen will allow us to select the DataProvider.

In this example we will choose XAMLDataProvider because the content will only be shown in Silverlight. If we wanted to show the content on a regular web page we would choose the HTMLDataProvder.

For a full discussion of DataProviders see:

http://www.telerik.com/help/silverlight/radrichtextbox-features-data-providers.html

 

image

Click Finish.

 

image

This will create the RadTextBox.

 

image

We then hover the mouse on the left-side blue bar…

 

image

…and click on it.

 

image

This will add two rows to the page.

 

image

If we look at the XAML markup for the RadRichTextBox control, it will resemble the image above.

 

image

We then make the following changes:

 

image

The design surface will now resemble the image above.

 

image

From the Visual Studio Toolbox, we drag the RadRichTextBoxRibbonUI control and drop it on the design surface.

 

image

You will see a box pop up while the Telerik control generates the XAML markup.

 

image

The screen will resemble the image above.

 

image

The XAML markup will resemble the image above.

 

image

Change the XAML markup to resemble the image above.

  • Remove the Height and Width settings
  • Set the Margins to 0

 

image

The screen will resemble the image above.

 

image

You will note that if you click on the Ribbon Bar control in the Visual Studio editor, additional configuration buttons will appear.

 

image

Each configuration button will display a menu that allows additional configuration.

 

image

Build the Solution.

 

image

In the LightSwitch screen editor, change the Notes TextBox to a Custom Control.

 

image

Click Change in the Properties for the Custom Control.

 

image

Select Add Reference.

 

image

Select the Projects tab and then select the SilverlightControls project.

 

image

This will allow us to select the TelerikEditor control.

 

image

In the Properties for the Custom Control, set the Label Position to None and the MinHeight to 600.

 

image

If you try to run the project at this point, you will get an error.

The Telerik assemblies (the .dll’s) need to be added to the LightSwitch project.

 

image

In the Properties for the Custom Control, click Change again.

 

image

Click Add Reference.

 

image

We select the .Net tab, and we add the references we added earlier and click the OK button.

 

image

Click Cancel on the Add Custom Control box (we did not want to change any configuration on the custom control, we only wanted to add references) .

 

image

When we run the application, we now have a full featured rich text editor that allows us to open and save Microsoft Word documents and even has undo and redo buttons.

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

24 comment(s) so far...


Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Thanks for the post . It really helped me. I have question in the custom control you used the Binding with Value property. What my understanding was that we must bind it with Screen.ViewModelProperty

I am confused when to use which approach.

Can you help me with this.

Regards
Goldy

By goldytech on   8/7/2011 11:24 PM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Thanks, this is great, I will try it out.

Francis

By Francis on   8/8/2011 2:24 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@goldytech - I explain all the binding methods in my book: http://lightswitchhelpwebsite.com/Market/LightSwitchCustomControls.aspx

By Michael Washington on   8/8/2011 4:52 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Excellent blog. Many thanks!

By Garth Henderson on   8/8/2011 4:17 PM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@Garth Henderson - Thanks Garth!

By Michael Washington on   8/8/2011 5:24 PM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Worked like a charm with external sql table.

Excellent post, many thanks.

Francis

By Francis on   8/9/2011 6:17 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@Francis - I am happy it worked. Thank you for posting a message.

By Michael Washington on   8/9/2011 6:18 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Michael
You have done it again. Thanks this step by step instruction has saved me countless hours.

I have a question about your book. TOC looks great for my level of experience. Do you plan on adding more sections over the next month? If so will the people that have purchased the ebook for download be able to get the updated version?

Thanks again!
Cliff

By Cliff McManus on   8/27/2011 11:50 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@Cliff McManus - The E-Book is also a print book, so it is complete.

By Michael Washington on   8/27/2011 11:51 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Downloaded the example, entered text etc into the texteditor but lightswitch does not recognise the changes.

By Shaun on   9/7/2011 3:11 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@Shaun - The example only works if you put in a small amount of text. To put in more text would require you to connect to an external table that has the length set at NText or NvarChar(max).

By Michael Washington on   9/7/2011 4:13 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Thanks, figured out the problem, not sure why but I had to move the xaml databinding out of the richtextbox resource and put it above the richtextbox. According to the telerik forums this is the way to do it. Thanks for the great site, really learning alot from you.

By Shaun on   9/7/2011 6:36 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

thanks for this i changed it around a little to create a smaller html text editor.

By kevin on   9/26/2011 2:24 PM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

I downloaded the Telerik trial package and have attempted to replicate your walk-through. But when i click "Finish" on the RichTextBox Wizard for adding the control, an error is thrown at Line 0: Position: 0 (Of what I know not) with the message "Object reference not set to an instance of an object."

I have double checked that I have added all of the references identified in the walk-through, and I have scoured the Telerik forums but not have found anything that suggests what is going wrong.

Have you encountered this? And a possible resolution?

(Also, I have had a number of problems on the Telerik site with demos that won't load, or even blow up with errors referencing various lines of code.) (I have Vista, Studio 2010 SP1, Firefox 7).

Thank you.

Ken

By Kenneth James on   10/4/2011 12:21 PM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@Kenneth James - You can download the complete code on the Download page on this site.

By Michael Washington on   10/4/2011 12:21 PM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

I wished that Micheal had done this article earlier this year.. oh wait.. LS Release (2011) might not have been out yet by then.. otherwise I wouldn't have to figure out these things all on my own last March. Thank God it worked then!

But now I'm having problems porting it into LS 2010.. the two-way binding works fine.. but, since I hosted/nested the Telerik Rich Text Box Control in a RadWindow, the window size didn't come out right by default. The height of the RadWindow is about one and a half inch tall and the width is, as if set to stretch to infinity. When maximized, the RadWindow managed to correctly occupy all available display space of the LS application.

I had no such problem with LS Beta 1 (the RadWindow-hosted Telerik Rich Text Box came out just nice in terms of size). What's changed in LS 2011 (in terms of control size/layout handling)?

Hope somebody could help me with this. Thanks.

By Faris Wong on   11/22/2011 2:41 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@Faris Wong - You can download my example and see how I set the sizing.

By Michael Washington on   11/22/2011 5:34 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Hi, First off - your posts are fantastic and I bought your book earlier today!

I have a Lightswitch application with an external database that stores information about companies and products. A product description field contains text with HTML formatting tags. I've been trying to use the above example to help me use a Telerik Rich Text control to view and edit this field but I've not managed it. Is there something I need to do or configure to make the telerik control read and write only HTML?

I have succeeded in getting the above example to work in a project of it's own. I also managed to have the telerik control to write to the external db field, but this is where I noticed that it wasn't HTML and that it only reads and displays the fields it had written.

Thanks,

By William Hadden on   11/23/2011 9:11 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@William Hadden - Thank you for he support. You can programatically manipulate the control to read and write HTML. I will have a tutorial on how to do it in the next few weeks. Meanwhile you can go to the Telerik site with any questions.

By Michael Washington on   11/23/2011 9:13 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Hi,

I managed to get this working after looking at the Telerik documentation and with a bit of help from another developer. It was a tiny change to the control's Xaml file - here's how we did it.

If you follow your example but in the TelerikEditor.xaml replace the namespace entry near the top

From:
xmlns:my="clr-namespace:Telerik.Windows.Documents.FormatProviders.Xaml;assembly=Telerik.Windows.Documents.FormatProviders.Xaml">

to:
xmlns:my="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html">

and then the change the my:XamlDataProvider

From:

To:

Hope this is useful to someone!

By William Hadden on   11/24/2011 3:56 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Hi Michael,

Great Help. Could you please provide a sample how can we merge some table data in to the document using RTB?

Eg. A letter format from the template and merge with address data and saving in to the database.


Regards
Rama

By Rama on   12/23/2011 5:46 PM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

Hello,

I got all the way down to "The Telerik assemblies (the .dll’s) need to be added to the LightSwitch project.".
When I try to add the Telerik references it crashes Visual Studio.

I'm using Visual Studio 2012 update 2; Silverlight 5

Got any ideas?

By JohnMarsing on   5/1/2013 9:54 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

@JohnMarsing - Sorry this blog post is two years old. You will want to find a more recent example.

By Michael Washington on   5/1/2013 10:27 AM
Gravatar

Re: Using the Telerik Rich Text Editor In Visual Studio LightSwitch

I think I will try the ComponentOne solution.

I see you have a blog on that....
http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/156/Component-One-LightSwitch-Studio.aspx

By JohnMarsing on   5/1/2013 10:36 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation