Tek Freak

Extending LightSwitch TextBox : Walk-Through

powerbala — Sun, 01 Jan 2012 16:41:21 +0000

***** WISH YOU A HAPPY NEW YEAR *****

In this post, we’ll create a simple, LightSwitch ‘Character Casing” TextBox. This extension will allow us to set following ‘case’

Normal
Upper Case
Lower Case
Proper Case
Title Case
Sentence Case

For this walk-through we are creating a “VALUE” control. So you have to follow this MSDN article to create your start-up project. You also will follow several steps from the same article. Keep that tab open.

Steps:

01. Create a LS Extensible project. Follow the above article. Name your project as “XTextBoxExtension“. And name your control as “XTextBoxControl“.

02. Update the Control Icon. Follow the article

03. Specify Supported Data Types. Our control needs to support just “STRING” property. So just update this line in your LSML file.

04. Bind to LightSwitch Data.

05. Allow User Code to Access the Control

06. Add Read-Only Support. Follow the article.

07. Alright. We done following that article. Now we need to create a “CharacterCasing” Property. Go back to your XTextBoxControl.LSML file and add this. This section creates a CharacterCasing property, its ENUM values and also a default value. LightSwitch will automatically create a DropDown list with below values.

When we deal with String Formats, such as “Proper Case”, “Title Case”, or “Sentence Case”, we don’t have proper rules to follow. Each one of our requirements might be unique. So for a greater flexibility, lets add three more Control Properties.

WordSeperators : We supply a series of “chars” as a one single string (no comma delimiters) to determine what might be our word separators.

SentenceSeperators : Same as above, but this time we declare it for sentences with “Comma Delimited Values.

ExceptionWords : This is for Title Case Property. Title Cases are different from Proper Cases. For example,

Title Case : This is a Sample Title Case.
Proper Case : This Is A Sample Proper Case

On the above, “is” & “a” need to still maintain their lower case, when it comes to Title Case. The list might vary for what you need. With ExceptionWords property, we can build our own Exception Dictionary, of course with Comma Delimiters. Here is the xaml code those three properties. Just add them under “Dictionary” property. These properties also declared few default values.

08. Almost done. Now go to your XTextBoxControl.xaml file. Select the textbox and wire-up its “TextChanged” event. Your updated XAML should be like this now.

09. Now Right Click on the “TextBox_TextChanged” text, and click “Navigate to Event Handler“. That’ll open the Code Behind file. Update the “TextBox_TextChanged” event with below code.

        private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            OnTextChanged();
        }

        private void OnTextChanged()
        {
            TextBox _textBox = this.TextBox;

            int selectionStart = _textBox.SelectionStart;

            if (this.CharacterCasing == "Upper")
                _textBox.Text = CultureInfo.CurrentCulture.TextInfo.ToUpper(_textBox.Text);
            else if (this.CharacterCasing == "Lower")
                _textBox.Text = CultureInfo.CurrentCulture.TextInfo.ToLower(_textBox.Text);
            else if (this.CharacterCasing == "ProperCase")
                _textBox.Text = ProperCase(_textBox.Text);
            else if (this.CharacterCasing == "TitleCase")
                _textBox.Text = TitleCase(_textBox.Text);
            else if (this.CharacterCasing == "SentenceCase")
                _textBox.Text = SentenceCase(_textBox.Text);

            _textBox.SelectionStart = selectionStart;
        }

10. We’ll use ToUpper & ToLower inbuilt functions, but we need to create the other methods. Remember, none of these below methods will satisfy 100% of your desire and far from perfect. So you need to work on the code to make it perfect for ur needs.

        #region Character Case Helpers
        public string ProperCase(string txt)
        {
            string properCaseStr = String.Empty;
            bool isCaps = true;

            foreach (char c in txt.ToCharArray())
            {
                properCaseStr += isCaps ? c.ToString().ToUpper() : c.ToString();
                isCaps = this.WordBreakers.Contains(c.ToString());
            }

            return properCaseStr;
        }

        public string TitleCase(string txt)
        {
            txt = ProperCase(txt);

            string titleCaseStr = String.Empty;
            foreach (string sentenceBreaker in this.SentenceBreakers.Split(','))
            {
                foreach (string titleCaseException in this.ExceptionWords.Split(','))
                {
                    string findWord = String.Empty;

                    //SPACE is not a Sentence Breaker. So change the Non Noun word to lowercase
                    if (sentenceBreaker == " ")
                    {
                        findWord = sentenceBreaker + ProperCase(titleCaseException);
                        txt = txt.Replace(findWord, sentenceBreaker + titleCaseException.ToLower());
                    }
                    else
                    {
                        findWord = sentenceBreaker + titleCaseException.ToLower();
                        txt = txt.Replace(findWord, sentenceBreaker + ProperCase(titleCaseException));
                    }
                }
            }

            return txt;
        }

        public string SentenceCase(string txt)
        {
            string sentenceCaseStr = String.Empty;
            bool isCaps = true;

            char prevChar = char.MinValue;
            foreach (char c in txt.ToCharArray())
            {
                sentenceCaseStr += isCaps ? c.ToString().ToUpper() : c.ToString();
                isCaps = (c == ' ' && this.WordBreakers.Contains(prevChar));
                prevChar = c;
            }

            return sentenceCaseStr;
        }
        #endregion

11. Now we need to create a Local Properties and register them to listen if there is any change on appropriate properties.

        #region Properties
        public string CharacterCasing
        {
            get { return (string)GetValue(CharacterCasingProperty); }
            set { SetValue(CharacterCasingProperty, value); }
        }

        public string WordBreakers
        {
            get { return (string)GetValue(WordBreakersProperty); }
            set { SetValue(WordBreakersProperty, value); }
        }

        public string SentenceBreakers
        {
            get { return (string)GetValue(SentenceBreakersProperty); }
            set { SetValue(SentenceBreakersProperty, value); }
        }

        public string ExceptionWords
        {
            get { return (string)GetValue(ExceptionWordsProperty); }
            set { SetValue(ExceptionWordsProperty, value); }
        }

        #endregion

        #region Dependency Properties
        public static readonly DependencyProperty CharacterCasingProperty =
            DependencyProperty.Register("CharacterCasingProperty",
                                    typeof(string), typeof(XTextBoxControl),
                                    new PropertyMetadata(OnCharacterCasingPropertyChanged));

        public static readonly DependencyProperty WordBreakersProperty =
            DependencyProperty.Register("WordBreakersProperty",
                                    typeof(string), typeof(XTextBoxControl),
                                    new PropertyMetadata(OnWordBreakersPropertyChanged));

        public static readonly DependencyProperty SentenceBreakersProperty =
            DependencyProperty.Register("SentenceBreakersProperty",
                                    typeof(string), typeof(XTextBoxControl),
                                    new PropertyMetadata(OnSentenceBreakersPropertyChanged));

        public static readonly DependencyProperty ExceptionWordsProperty =
            DependencyProperty.Register("ExceptionWordsProperty",
                                    typeof(string), typeof(XTextBoxControl),
                                    new PropertyMetadata(OnExceptionWordsPropertyChanged));
        #endregion

        #region Metadata
        private static void OnCharacterCasingPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            //Do what you want
        }

        private static void OnWordBreakersPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            //Do what you want
        }

        private static void OnSentenceBreakersPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            //Do what you want
        }

        private static void OnExceptionWordsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            //Do what you want
        }
        #endregion

12. And finally, bind the Dependency property from the control’s constructor.

        public XTextBoxControl()
        {
            InitializeComponent();
            this.SetBinding(CharacterCasingProperty, new Binding("Properties[XTextBoxExtension:XTextBoxControl/CharacterCasing]"));
            this.SetBinding(WordBreakersProperty, new Binding("Properties[XTextBoxExtension:XTextBoxControl/WordBreakers]"));
            this.SetBinding(SentenceBreakersProperty, new Binding("Properties[XTextBoxExtension:XTextBoxControl/SentenceBreakers]"));
            this.SetBinding(ExceptionWordsProperty, new Binding("Properties[XTextBoxExtension:XTextBoxControl/ExceptionWords]"));
        }

THATS IT!!!!!!!! Now test your control.

Background Group Layout Extension

powerbala — Tue, 20 Dec 2011 19:59:00 +0000

Introduction

This simple group layout extension consists of two controls: ImageLayout & BrushLayout; helps users to set its background.

Detail

As of I’ve tested, below background types are supported.

Image Layout Control

Image

Brush Layout Control

Image Brush
Linear Gradient Brush
Radial Gradient Brush
Solid Color Brush

Both controls supports the following properties for extra customization.

Background [For ImageLayout : Valid Image; For BrushLayout : Valid XAML text]
BorderBrush [Predefined values, listed in combobox]
BorderThickness [+ Integer : Ex: 2 or 2,2 or 2,2,2,2]
CornerRadius [+ Integer : Ex: 2 or 2,2 or 2,2,2,2]
Margin [+/- Integer : Ex: 2 or 2,-2 or -2,2,-2,2]
Opacity [+ Decimal : Ex: 0.5]
Padding [+ Integer : Ex: 2 or 2,2 or 2,2,2,2]

Screenshots

Image Background (ImageLayout Control)

Multi Stop Linear Gradient

Example:

Empty Background

If you don’t supply a Xaml text, then control creates a empty Linear Brush. Shadow effect is created by providing different border properties (Ex: 1,1,5,5).

Radial Gradient with Opacity

Same as LinearGradient, you can supply a valid RadialGradientBrush Xaml. For this screenshot, I also applied Opacity (0.5) for dull effect.

Example

Solid Color with ImageLayout

Remember to pass a HEX value as your color. Passing Numeric (RGB) values will not work in Silverlight and extension will throw an exception.

For this screenshot, I added ImageLayout control inside a BrushLayout Control.

Example

Image Brush

Along with ImageLayout control, you can also use BrushLayout control to set your background image; this time by passing a ImageBrush Xaml.

Example

Points of Interest

MSDN explains potential dangerous about passing Xaml as a parameter and load via XamlReader.Load(). So use this extension with caution.
At least for version 1.0, you need to pass your Xaml as Single Line Text. My Background Value Converter looks for a “ “ (space) in the root element in order to insert a valid Namespace. So please make sure, you add a x:Key or some kind of attribute or just a “space” in your supplied Xaml text.
Passing Xaml as text is not ideal for the users. But till the last minute, I tried to create a Gradient Editor, but I’m not any sort of expert at all. I dropped that idea and tried to create a Multiline textbox. I partially succeed but, somehow it keep loosing its “line returns” & alignments. So I decided to leave it as default single-line textbox.

I would really appreciate, if someone can make this extension in more user friendly way (ie: creating a Gradient Editor).

Source Code

Published Here : http://code.msdn.microsoft.com/Background-Group-Layout-c272f8fb

Disclaimer

My controls, samples and articles are created during my off/free time. The opinions expressed here are MY OWN and are not necessarily those of my employer, partners, customers, friends, or family. ALL content presented AS-IS, for entertainment/educational purposes only with ABSOLUTELY NO WARRANTY expressed or implied.

LightSwitch Extension : Image Button

powerbala — Mon, 05 Dec 2011 02:24:08 +0000

Introduction

This walkthrough will demonstrate how to create A very simple Button Control extension that consists of two controls; helps users to attach PNG image to their buttons. ImageButton – this control will allow you attach just an image to the button. ExtendedImageButton – will also show “Display Name” text and wraps.

Building the Sample

The prerequisites for this sample are:

Description

Step 1 : Create a new Extension Project. Name it, ImageButtonExtension

Step 2 : Right click on LSPKG project and add a new Control Item. Name it : ImageButton.xaml

Step 3 : Open ImageButton.lsml file from COMMON project and modify it as below.

Step 4 : Open ImageButton.xaml file from CLIENT project and edit as below.

Step 5 : Open corresponding CS file of the control and modify the class as below

    public partial class ImageButton : UserControl
    {
        public ImageButton()
        {
            InitializeComponent();
        }

        private void imgImage_Loaded(object sender, RoutedEventArgs e)
        {
            IContentItem contentItem = (IContentItem)DataContext;
            imgImage.Source = Microsoft.LightSwitch.Presentation.Framework.Helpers.ImagePropertyHelper.GetImageSource(contentItem);
        }

        private void btnImageButton_Click(object sender, RoutedEventArgs e)
        {
            IContentItem contentItem = (IContentItem)this.DataContext;
            Microsoft.LightSwitch.IExecutable executable = (Microsoft.LightSwitch.IExecutable)contentItem.Details;
            if (executable != null && executable.CanExecuteAsync)
                executable.ExecuteAsync();
        }

    }

At this point, we have a button control that can take an image and displays. Now to extend this control with more functionalities, such as Image + Text + Text Wrap we follow steps 2-5, by adding another control named “ExtendedImageButton“.

More Information

Following websites and blog posts might help you to understand better than what I tried above.

http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/62/How-To-Create-a-LightSwitch-Command-Control-Extension-A-Button.aspx

http://msdn.microsoft.com/en-us/library/ee256689.aspx

Disclaimer

The opinions expressed here are MY OWN and are not necessarily those of my employer, partners, customers, friends, or family. ALL content presented AS-IS, for entertainment/educational purposes only with ABSOLUTELY NO WARRANTY expressed or implied.

Source code

CODE : http://code.msdn.microsoft.com/LightSwitch-Image-Button-f9dda668

CONTROL : http://visualstudiogallery.msdn.microsoft.com/5b064b35-cdf5-46aa-909f-fa43ad98b512

Steve Jobs (1955 – 2011)

powerbala — Thu, 06 Oct 2011 00:11:22 +0000

My mentor,

My guru,

May Rest In Peace

Bugging with LightSwitch – Restricted Deletion

powerbala — Fri, 02 Sep 2011 16:48:31 +0000

Problem : LS allows a master record to be deleted (in screen) even though the entity has few children exist with “Restricted” relationship between them. But it generates the validation error when we try to save the entity and there is no way to get rid of them (by design).

Summery : In LS “Beta2″ days, I posted a bug and acknowledged by LS Team. Now I created a project to see if this bug was cleared. It actually did (now LS assigns “1″ as a starting number of ID entities), but found another issue with it. And I’m not sure, whether this one was pre-exist in Beta2 or not.

On Screen Level, even if my entities’ relationship has ‘Restricted’ deletion, LS actually allows to delete the Master record when there are child records exist and it catch this when the records are trying to post back to DB with SAVE method.

If we try to delete an “existing Master record”, at least now we have a choice to go back and delete the child records one-by-one on the screen, as LS put a “X” icon next to the master record, but at least it still exist in the screen.

But if we delete a newly added master record with children (that are not exist in DB), now LS clears the master/child records from the SCREEN and there is no way to get rid of its validation errors, when we try to SAVE the screen.

You can see these series of screen shot of what I mean.

Click to view slideshow.

Workaround : Right now, all what I did was restrict Master’s deletion method by overriding its code with below. What I expect from LS is that, it should capture this ‘Restricted’ association on the screen and should prevent deletion.

partial void TempProductListDeleteSelected_CanExecute(ref bool result)
{
    if (TempProducts.SelectedItem == null)
       return;
    if (TempProducts.SelectedItem.TempOrderDetails.Count() > 0)
       result = false;
    else
       result = true;
}

Discussion Threads

https://connect.microsoft.com/VisualStudio/feedback/details/686639/bug-in-master-detail-deletion#details

http://social.msdn.microsoft.com/Forums/en-US/lightswitch/thread/e65b634e-c1f2-471e-9a8c-33507cd59020

http://social.msdn.microsoft.com/Forums/en-US/lightswitchgeneral/thread/081099b2-4365-4a30-8914-68a6566e7600

Self/Circular Reference in LightSwitch

powerbala — Wed, 31 Aug 2011 04:37:37 +0000

Difficulty : Beginner

Summery: This is a stripped version of JaimeH’s MSDN’s code sample. All credit goes to him. I’m following Slideshow presentation idea from my previous post and matched the bullet points with it. Hope this article may help someone.

Problem: How do you create a self/circular reference table and not to show the current record on its ‘drop down’ control? For example, you have a Category Table with a ParentCategoryId that reference itself (which should allow NULL). Now when you assign a Category for it, you may don’t want to allow the same Category to be assigned to itself.

Slideshow

Click to view slideshow.

Bullets

Create a project and add a table named “Category” with Name field. Also create a Relationship with Many <-> One or Zero
Create a Query named “GetParents”. Create a parameter named “ParentId” and assign it to Id filter with “<>“
Create a “Editable Grid Screen” for Category
Create a “List and Details Screen” for Category.
On the “List and Details Screen”, click “Add Data Item” and select “GetParents” query
Select ParentId on the left & bind to “Categories.SelectedItem.Id”
Select ParentId drop down control and change its choices from “Auto” to “GetParents”
Run the project and add few Categories. Don’t worry about ParentId for now. Save the screen
Select “Category List Details” page and now you see your selected Category won’t showup on your ParentId.

Now why did I create a “List and Details” page in order to assign ParentId, rather than assign it on the “Editable Data Grid”? is what you see on the last image. It requires to save the data into DB in order, the filter query to take effect. So, you can even do this without creating a second page, but you have to make sure that you save your Category before you assign it’s parent.

Discussion Threads

http://social.msdn.microsoft.com/Forums/en-US/lightswitch/thread/97cdea32-4551-423b-8782-7fe71f19a640

http://social.msdn.microsoft.com/Forums/en-US/lightswitch/thread/6c5272d5-f619-48df-88a5-f3e16672ad88

Calling a 3rd Party Web Service From LightSwitch

powerbala — Sat, 16 Apr 2011 21:50:32 +0000

Click to view slideshow.

Summary:

This post will show you how to call a 3rd party web service methods from LightSwitch using WCF RIA. For this demo post, I chose WebserviceX.NET’s Zipcode WebService (http://www.webservicex.net/uszip.asmx) and thanks to their service. I have matched the bulleted points with Slideshow.

Discussion Thread :

http://social.msdn.microsoft.com/Forums/en/lightswitchgeneral/thread/876090da-3670-481b-90de-e34998a610b3

Steps:

Create a LightSwitch Application

Add a New Project
Name it “ZipcodeRIAService“
On ZipcodeRIAService.Web project,

Right Click on References
Add Service Reference
Click Advanced
Click Add Web Reference

Type your WebService address (for this ex: http://www.webservicex.net/uszip.asmx) and name it ZipcodeWebRef
On the same project “Add a new item” -> “Domain Service Class“. Name it “ZipcodeDomainService“
When the new window popup, uncheck “Enable client access” (up to your pref.) . Click OK
The example webservice generates nodes like this one for all type of searches. So we need to create a class to represent these nodes.

namespace ZipcodeRIAService.Web
{
    using System.Collections;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ServiceModel.DomainServices.Server;
    using System.Xml;
    using ZipcodeRIAService.Web.ZipcodeWebRef;

    //This node class to represent the webservice's output model
    public sealed class WebServiceNode
    {
        //LS requires at least one Key field. So make Zip column as Key
        [Key]
        public string Zip { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Area { get; set; }
        public string TimeZone { get; set; }

        //return a new class
        public static WebServiceNode CreateNew(XmlNode node)
        {
            return new WebServiceNode
            {
                City = node.ChildNodes[0].InnerText,
                State = node.ChildNodes[1].InnerText,
                Zip = node.ChildNodes[2].InnerText,
                Area = node.ChildNodes[3].InnerText,
                TimeZone = node.ChildNodes[4].InnerText
            };
        }
    }

    //Data Helper
    public sealed class Converter
    {
        public static IEnumerable SelectAllCities(XmlNode xDoc)
        {
            //This enables the XmlNode Type to enumerate
            IEnumerator cities = xDoc.GetEnumerator();
            while (cities.MoveNext())
                yield return WebServiceNode.CreateNew((XmlNode)cities.Current);
        }
    }

    public class ZipcodeDomainService : DomainService
    {
        //LS requires a default parameterless query function
        //or a skeleton class to return
        [Query(IsDefault = true)]
        public IEnumerable FakeFunction()
        {
            return SelectCity("");
        }

        //This is the function we need to call from LS
        [Query]
        public IEnumerable SelectCity(string cityname)
        {
            //Instantiate USZip class from WebService Provider and pass city name
            return Converter.SelectAllCities(new USZip().GetInfoByCity(cityname));
        }
    }
}

Once you finish it, build the project
Back to our LS project, right click on Data Sources and “Add Data Source“
Select WCF RIA Service
Under Project’s tab, select ZipcodeRIAService.Web class
Select the Service class and click Next
Select the Entity and Finish
Our WebServiceNode entity
Now right click on Screen and Add Screen
Select Editable Grid Screen (your pref.) and select “SelectCity” as Screen Data
LS will automatically create a textbox for you and bind that textbox with entity’s Cityname parameter. Right click on the textbox and “Add Button“
Give a method name for the button, (here ZipcodeLookupMethod).

namespace LightSwitchApplication
{
    public partial class EditableSelectCityGrid
    {
        partial void ZipcodeLookupMethod_Execute()
        {
            // On the next step, we will remove Auto Execute option from Entity.
            // The this.Details.Properties..Loader.Load() method
            // will run the data source query on demand.
           if (!string.IsNullOrEmpty(WebServiceNodecityname))
               if (WebServiceNodecityname.Trim().Length > 0)
                    this.Details.Properties.SelectCity.Loader.Load();
        }
    }
}

On the left most side, click SelectCity and clear “Auto Execute Query” and Support Paging” checkboxes.
Now run the project. Type your city on the textbox…… and happy no coding.!

Note : If you want to support the paging for your custom RIA Data Source, then you have to override the Count method of your domain class. You can add the below code to support paging.


        // using System.Linq;
        protected override int Count(IQueryable query)
        {
            return query.Count();
        }

Many-To-Many Control for Microsoft LightSwitch

powerbala — Mon, 11 Apr 2011 05:28:36 +0000

Result

Problem

I needed a Many-To-Many control that can help our users to relate hundreds of records between two master tables. Out of the box, LightSwitch (Beta 1/2) doesn’t support either Multi-Row Select Data Grid or provided a CheckedListBox.
LS provides one in-built solution for M2M: Auto Complete Box :- But this will take long time to add few hundred related data and requires multiple clicks per record. Also LS Team and community give two workarounds:

Andy Kung’s Many-To-Many Relationship : Claims lot of screen real estate. And if you have hundreds of records on both tables, you’ll be confused which one is been already on the grid.
Add a IsSelected bool field on each master table (saw this suggestion on the forum) : Closest one. But it requires adding an additional bool field on each master table, which is not possible (at least in my case).

Solution

Even though LS doesn’t provide a proper M2M control & support Stored Procedures natively, it supports adding custom Silverlight controls and WCF RIA services. In my case, all I need is a datagrid with a bool column. So I decided to write a WCF RIA service that gives me an Entity the way I want and use the existing Data Grid control. But this idea will work with your custom control too. Lets begin….

Steps

Create a databased named “Movies” in SQLEXPRESS and add few MOVIES & GENRES data. (You can create the modal in LS designer too. Just make sure, you add few data for testing)

Modal

In Visual Studio, create a new LightSwitch (C#) project. Name it ManyToManyMovieGenre.

Create Solution

Add a new data source to “Movies” database.

Select only Movie & Genre tables. Leave MovieGenre table unselected.

Table Selection

Now add a new “WCF RIA Services Class Library” project. Name it MovieRIAServicesLibrary.

Create New RIA Project

Add a “Domain Service Class” file to “MovieRIAServicesLibrary.Web” project. Name it “MovieRIADomainService“.

When a new window popup, uncheck “Enable client access” and click OK.

Add Service Class

Now enter the following code into MovieRIADomainServices.cs file.


//Code inspired by Tejana's solution.
//http://www.tejana.com/Home/Blog/tabid/71/EntryId/15/Microsoft-LightSwitch-and-WCF-RIA-Services.aspx
//http://www.tejana.com/Home/Blog/tabid/71/EntryId/16/Stored-Procedures-in-LightSwitch.aspx

namespace MovieRIAServicesLibrary.Web
{
    using System.Collections.Generic;
    using System.ServiceModel.DomainServices.Server;
    using System.Data.SqlClient;
    using System.Data;
    using System.ComponentModel.DataAnnotations;

    public class MovieGenre
    {
        [Key]
        public int MovieId { get; set; }

        [Key]
        public int GenreId { get; set; }

        public string GenreName { get; set; }

        public bool IsSelected { get; set; }

        public static MovieGenre CreateNew(IDataRecord iDR)
        {
            return new MovieGenre
            {
                MovieId = (int)iDR["MovieId"],
                GenreId = (int)iDR["GenreId"],
                GenreName = (string)iDR["GenreName"],
                IsSelected = (bool)iDR["IsSelected"]
            };
        }
    }

    public class MovieGenreData
    {
        static string sConnString = @"YOUR CONNECTION STRING GOES HERE";

        public static IEnumerable SelectGenres(int? mID)
        {
            SqlCommand sComm = new SqlCommand();
            sComm.CommandType = CommandType.Text; //you can change this to Stored Procedure
            sComm.Parameters.AddWithValue("MovieId", mID);

            // Original idea of this SQL command's idea belongs to someone in the net.
            // I grabbed it years ago and modified it.
            // This SQL brings all record from Parent and a TRUE/FALSE field depends on its availability from Child
            sComm.CommandText = @"SELECT g.Id AS GenreId, @MovieId AS MovieId, g.Name AS GenreName,
                                        CASE WHEN
                                            mg.MovieId IS NULL
                                        THEN
                                            CAST (0 AS BIT)
                                        ELSE
                                            CAST (1 AS BIT)
                                        END AS IsSelected
                                  FROM
                                        Genre AS g LEFT OUTER JOIN
                                            MovieGenre AS mg ON
                                                g.Id = mg.GenreId AND
                                                mg.MovieId = @MovieId";

            using (SqlConnection sConn = new SqlConnection(sConnString))
            {
                sComm.Connection = sConn;
                sConn.Open();

                SqlDataReader sDataReader = sComm.ExecuteReader();
                if (sDataReader.HasRows)
                    while (sDataReader.Read())
                        yield return MovieGenre.CreateNew(sDataReader);
                sConn.Close();
            }
        }

        public static void InsertMovieGenre(int mID, int gID)
        {
            SqlConnection sConn = new SqlConnection(sConnString);
            SqlCommand sComm = new SqlCommand();
            sComm.CommandType = CommandType.Text;               //you can change this to Stored Procedure
            sComm.Parameters.AddWithValue("MovieId", mID);
            sComm.Parameters.AddWithValue("GenreId", gID);

            sComm.CommandText = @"INSERT INTO MovieGenre (MovieId, GenreId) VALUES (@MovieId, @GenreId)";

            sComm.Connection = sConn;
            sConn.Open();
            sComm.ExecuteNonQuery();
            sConn.Close();
        }

        public static void DeleteMovieGenre(int mID, int gID)
        {
            SqlConnection sConn = new SqlConnection(sConnString);
            SqlCommand sComm = new SqlCommand();
            sComm.CommandType = CommandType.Text;               //you can change this to Stored Procedure
            sComm.Parameters.AddWithValue("MovieId", mID);
            sComm.Parameters.AddWithValue("GenreId", gID);

            sComm.CommandText = @"DELETE MovieGenre WHERE MovieId = @MovieId AND GenreId = @GenreId";

            sComm.Connection = sConn;
            sConn.Open();
            sComm.ExecuteNonQuery();
            sConn.Close();
        }
    }

    public class MovieRIADomainService : DomainService
    {
        //Fake Function to satisfy WCF RIA requirement
        [Query(IsDefault = true)]
        public IEnumerable SelectFakeGenres()
        {
            return MovieGenreData.SelectGenres(-1);
        }

        //Made mID as NULLABLE to satisfy WCF RIA requirement
        [Query]
        public IEnumerable SelectGenres(int? mID)
        {
            return MovieGenreData.SelectGenres(mID);
        }

        [Insert]
        public void CreateMovieGenre(MovieGenre mg)
        {
            MovieGenreData.InsertMovieGenre(mg.MovieId, mg.GenreId);
        }

        [Update]
        public void UpdateMovieGenre(MovieGenre mg)
        {
            DeleteMovieGenre(mg);
            if (mg.IsSelected)
                CreateMovieGenre(mg);
        }

        [Delete]
        public void DeleteMovieGenre(MovieGenre mg)
        {
            MovieGenreData.DeleteMovieGenre(mg.MovieId, mg.GenreId);
        }
    }
}

Build the WCF RIA project. Back in LS Project (ManyToManyMovieGenre), add a “WCF RIA Service” data source.

Select WCF RIA

Click Add Reference. Under Projects tab, select “MovieRIAServicesLibrary.Web” project.

Add Web Project as Ref

Select MovieGenre from Entities list.

Entity Selection

Add a List and Details Screen to Movies.

Add a List & Detail screen to Movie

Add SelectGenres Data Item to the screen

Add Select Genre Data Item to the screen

Map mID parameter to Movies.SelectedItem.Id

Parameter Mapping

Add a Rows Layout group under Details Column Layout.

Add Row Layout

Then add SelectGenres Datagrid to this new group. Delete all other columns except IsSelected & GenreName. Change GenreName’s control from Textbox to Label.

Add Select Genre to screen

If you run the application at this time, you can see all genres will listed out but the grid shows as Read-Only. This is because, LS Screen keeps only one data source with read/write permission.

Read Only Data Grid

Now you have two options.

1. If you don’t want make any changes on Movie’s details, then……

Select “Save” method from the left grid. Change the data source from MoviesData to MoviesRIADomainServiceData.

Change Data Source

If you run the application now, you can see the read-only columns shifted to Movie Details, but the MovieGenre data grid become editatble.

Shifted Read Only Data Source

2. If you want to make both data sources editable, then Click “Write Code” from the top the screen, select MoviesListDetail_InitializeDataWorkspace and this code.

Write Code

partial void MoviesListDetail_InitializeDataWorkspace(List saveChangesTo)
{
// Depends on what source you selected as default on the screen, add the second source here
saveChangesTo.Add(DataWorkspace.MovieRIADomainServiceData);
}

Again go back to Designer page, and on “Write Code”, click MoviesListDetail_Saving and add this code.

partial void MoviesListDetail_Saving(ref bool handled)
{
// Write your code here.
DataWorkspace.MoviesData.SaveChanges();
DataWorkspace.MovieRIADomainServiceData.SaveChanges();
handled = true;
}

Now if you run the application, you can see that both data sources are in write mode, and you can make changes on both and save them to database.

THE END.

Credits

Discussions/Help received links……….

http://social.msdn.microsoft.com/Forums/en/lightswitchgeneral/thread/0acaa406-61d5-4180-9a98-c23b644520f8

http://social.msdn.microsoft.com/Forums/en/lightswitchgeneral/thread/56d836b4-3d1c-4205-8178-6af175d02f27

http://social.msdn.microsoft.com/Forums/en-US/lightswitchgeneral/thread/1ccd5fb6-1e1d-48d1-9b4c-e2c9628a3eb1

http://www.tejana.com/Home/Blog/tabid/71/EntryId/15/Microsoft-LightSwitch-and-WCF-RIA-Services.aspx

http://www.tejana.com/Home/Blog/tabid/71/EntryId/16/Stored-Procedures-in-LightSwitch.aspx

Thank you LightSwitch team for a such a wonderful concept & tool!