You are here:   Blog
Register   |  Login

Oct 16

Written by: Michael Washington
10/16/2011 2:27 PM  RssIcon

image

The Data Grid that is built-into LightSwitch is quite advanced. You will not really appreciate it until you attempt to duplicate its functionality manually. However, you may be faced with situations that require you to implement a Data Grid from scratch. This will allow you maximum flexibility in your application.

This article will provide some examples to get you started.

 

The Application

image

We start with a simple Entity (table).

 

image

We create a simple Screen.

When we run the application, we get the default LightSwitch Data Grid.

 

Using The Silverlight Data Grid

image

We add a Silverlight Project, and a Silverlight User Control to the Solution.

(note: see: Creating A LightSwitch Custom Silverlight Control for step-by-step directions on implementing a Silverlight Control in LightSwitch)

 

We use the following XAML:

 

<UserControl x:Class="SilverlightClass.SilverlightDataGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:local="clr-namespace:SilverlightClass"
    mc:Ignorable="d"
    d:DesignHeight="100" d:DesignWidth="400">   
    <Grid x:Name="LayoutRoot" Background="White">
    	<Grid.RowDefinitions>
    		<RowDefinition/>
    	</Grid.RowDefinitions>
        <sdk:DataGrid AutoGenerateColumns="False" Margin="0" Name="SLDataGrid" 
                      ItemsSource="{Binding Screen.HelpDeskTickets}" >
        	<sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Binding="{Binding Status}" CanUserSort="True" Header="Status"/>
                <sdk:DataGridTextColumn Binding="{Binding Requester}" CanUserSort="True" Header="Requester"/>
        		<sdk:DataGridTextColumn Binding="{Binding Email}" CanUserSort="True" Header="Email"/>
        		<sdk:DataGridTextColumn Binding="{Binding PhoneNumber}" CanUserSort="True" Header="PhoneNumber"/>
        		<sdk:DataGridTextColumn Binding="{Binding Description}" CanUserSort="True" Header="Description"/>
                <sdk:DataGridTextColumn Binding="{Binding DateDue}" CanUserSort="True" Header="Date Due"/>
        	</sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>
</UserControl>

 

image

The diagram above shows the Binding.

 

image

When we run the application, our Data Grid appears.

We even have full editing enabled.

 

Implementing A Dropdown

In the built-in Data Grid, the Status column is a drop down. The following are the steps we would use to recreate this functionality.

First, we add the following class to the code behind of the Silverlight Control:

 

    public class StatusChoicesProvider
    {
        public List<string> StatusChoices
        {
            get
            {
                return new List<string>() 
                { 
                    "New", 
                    "Active",
                    "OnHold",
                    "Cancelled",
                    "Resolved",
                };
            }
        }
    }

 

Next, we add the following Resource to the XAML:

 

    <UserControl.Resources>
        <local:StatusChoicesProvider x:Key="StatusChoicesProvider"/>
    </UserControl.Resources>

 

Finally, we replace the Status column with the following:

 

    <sdk:DataGridTemplateColumn Header="Status">
        <sdk:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Status}" 
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" />
            </DataTemplate>
        </sdk:DataGridTemplateColumn.CellTemplate>
        <sdk:DataGridTemplateColumn.CellEditingTemplate>
            <DataTemplate>
                <ComboBox SelectedItem="{Binding Status, Mode=TwoWay}" 
                            ItemsSource="{Binding StatusChoices, 
                    Source={StaticResource StatusChoicesProvider}}" />
            </DataTemplate>
        </sdk:DataGridTemplateColumn.CellEditingTemplate>
    </sdk:DataGridTemplateColumn>

 

image

Now, when we click on the field to edit it, a drop down of choices appears.

 

Adding A Button

If we desire to add a Button to the Data Grid, we first use the following XAML to add the Button:

 

<sdk:DataGridTemplateColumn Header="">
        <sdk:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Button x:Name="DeleteButton" Content="X" 
                        Foreground="#FFAF1414" FontWeight="Bold" 
                        Tag="{Binding Id}" Click="DeleteButton_Click" />
            </DataTemplate>
        </sdk:DataGridTemplateColumn.CellTemplate>
        <sdk:DataGridTemplateColumn.CellEditingTemplate>
            <DataTemplate>
            </DataTemplate>
        </sdk:DataGridTemplateColumn.CellEditingTemplate>
    </sdk:DataGridTemplateColumn>

 

Note, that we bind the Tag property of the Button to the Id of the record. We will use this Id to determine what record to delete.

We use this code for the Click event of the Button:

 

    private void DeleteButton_Click(object sender, RoutedEventArgs e)
    {
        // Get a reference to the LightSwitch DataContext 
        var objDataContext = (IContentItem)this.DataContext;
        // Get a reference to the LightSwitch Screen
        var Screen =
            (Microsoft.LightSwitch.Client.IScreenObject)objDataContext.Screen;
        // Get an instance of the Button
        Button objButton = (Button)sender;
        // Get the record Id from the Tag
        int Id = Convert.ToInt32(objButton.Tag);
        // Disable the Delete Button
        objButton.IsEnabled = false;
        // Delete the Record in LightSwitch
        Screen.Details.Dispatcher.BeginInvoke(() =>
        {
            // Get access to the DataWorkspace
            // Note: you must referece the 'Common' Project for this code to work
            DataWorkspace DataWorkspace =
                (Screen.Details.DataWorkspace as LightSwitchApplication.DataWorkspace);
            // Get the HelpDeskTicket
            LightSwitchApplication.HelpDeskTicket DeletedHelpDeskTicket =
                DataWorkspace.ApplicationData.HelpDeskTickets
                .Where(x => x.Id == Id).FirstOrDefault();
            if (DeletedHelpDeskTicket != null)
            {
                // Delete the HelpDeskTicket
                DeletedHelpDeskTicket.Delete();            
            }
        });
    }

 

 

image

When we click the Delete Button it disables the Button. The built-in LightSwitch Data Grid will also react to the change. We still must click the Save button to actually delete the record (we could write the code to automatically save if we desired).

 

Only Do This If You Have To

There are a lot of features that you lose when you do not use the built-in Data Grid in LightSwitch. The Date and Time editor and the Phone Number editor, that appear when you click in a Data Grid cell, are very useful, and take a ton of code to duplicate manually.

However, the point is that you have the option to implement a Data Grid manually if you need to.

 

Download Code

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

21 comment(s) so far...


Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

Excellent!

Thanks Michael

By fishy on   10/17/2011 6:45 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@fishy - Thanks for leaving a comment. I knew that this blog post would hit a need :)

By Michael Washington on   10/17/2011 8:28 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

There are two things I absolutely love about your posts.

First, your use of screen shots. The one that shows the diagram for binding is great and makes your point very clear.

Second, I love that you provide all of the code to be downloaded.

Question: Do you think it would be feasable to write an extension or macro that would take a data object (like your HelpDeskTickets) and codegen the xaml for a grid? Perhaps you could select a table from the Data Sources and then select a T4 template and have the code generate.

By fishy on   10/17/2011 8:45 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@fishy - Thank you for the kind comments. I don't think a codegen for the XAML is good because XAML is "compilable code". You can make a LightSwitch Extensions that will programmatically create the Data Grid based on the Collection bound to it... that is what the LightSwitch Data Grid is doing :) (also what the normal Data Grid does if you set it to "auto generate" the fields).

By Michael Washington on   10/18/2011 4:51 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

It´s possible the Silverlight DataGrid have the same style that LightSwitch DataGridView?

By Carlos Guilherme on   10/17/2011 9:33 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@Carlos Guilherme - Yes but you would need to add the proper styling tags. I don't know what they are. Perhaps a post in the official LightSwitch forum will get one of the team to tell us :)

By Michael Washington on   10/17/2011 9:34 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

Love all your tutorials & posts in this site Micheal. Extremely useful!

I wonder.. Is there's a way to "repackage" the LightSwitch Data Grid into a Custom Silverlight Control? ie. I want to use all it's features (Paging, searching, loading indicator etc) as well as extending it with my own set of extra features...

I did an application using LS Beta 1 with a Silverlight Data Grid wrapped in a custom control.. but to get some of the features (eg. paging) working again, I had to use a third-party control (Silverlight's paging control just doesn't work with Screen Collections). It's a pain (there weren't much documentation/examples then), messy, buggy, doesn't look as nice but the baseline is.. it worked!

Now that we have the release version of LightSwitch + all your tutorials, I want to do things the proper/right way. I'm currently in the process of porting my app to LightSwitch Release.

If what I'm asking is simply impossible, then, is there a way to implement/invoke Data paging within a silverlight custom control (most preferably without using any third-party components)? Most examples relating to binding to screen collections within a silverlight custom control that i've found doesn't involve any paging.. Or have I overlooked them?

It would be great if you and/or anybody else could help me with this.

Thanks a bunch!

By Faris Wong on   11/21/2011 9:20 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@Faris Wong - I do not know if it is possible to "repackage the LightSwitch Data Grid into a Custom Silverlight Control". As far as paging, I will publish an example in late December that Will show this.

By Michael Washington on   11/21/2011 9:27 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

Thanks for the quick response.. :)

Maybe I shouldn't use the word "repackage"..

What I really mean in my last post was, is there a way I could make a silverlight custom control (to be used inside lightswitch) that reuses the built-in LightSwitch datagrid (and possibly all the other built-in controls)? Which/what namespace/assembly should I refer to in XAML to have access to the controls?

Then, if the built-in controls are really just beefed-up silverlight controls, I would like to enable other features such as Drag-and-Drop (and handle the Drop event handler) etc.

Nonetheless, I'm really looking forward to your paging example in December..

By Faris Wong on   11/22/2011 1:22 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

Nice tutorial - thanks. I am doing this myself and just noticed that selecting a row in the custom datagrid doesn't update the query's underlying SelectedItem property. As a result, if you are using the datagrid in a master-details scenario, the details section won't show the data from the selected item in the grid. I posted a question here but so far no answers: http://social.msdn.microsoft.com/Forums/en-US/lsextensibility/thread/c8fc25e3-42e6-4a28-b194-782b94995761

Do you have any insight?

Roger

By Roger Martin on   12/31/2011 2:56 PM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@Roger Martin - see:
http://social.msdn.microsoft.com/Forums/en-US/lsextensibility/thread/c8fc25e3-42e6-4a28-b194-782b94995761

By Michael Washington on   12/31/2011 3:06 PM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

Hey Michael,
First Wish you a very ahppy new year.

I have a query, scenario is I an using the default datagrid that LS provides. I have 4 columns in that data grid.
- 1st Cloumn is status (which is a drop down - New, Revisit, Urgent)
- 2nd, 3rd and 4th are normal texts

What I want to do is for a particular ROW in datagrid if the user selects a status say New then I want to make the 3rd and 4th column of that row as readonly.
In the second row if the user creates a new record with Status as Revisit then make the 4th column of that row as readonly rest are editable.

So basically, I want to make the columns of a particluar row editable or readonly based on Status selected for that row. Will be great if you guide on how this can be done.

Regards

By nikhil on   1/4/2012 6:19 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@nikhil - I am sorry but due to my heavy schedule I cannot take requests, but the Silverlight datagrid is documented in many places and you should be able to find the code you need.

By Michael Washington on   1/4/2012 6:21 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

No worries Michael. Can you tell me if this can be done via default LightSwitch DataGrid or will I need to create my own silverlight datagrid.

By Nikhil on   1/5/2012 5:17 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@Nikhil - It may be possible to alter the standard LightSwitch Data grid but I have no code examples, sorry.

By Michael Washington on   1/5/2012 5:18 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

HI Michael,

First of all thank you for the template and all explanation you are given.

My question is, it is possible to integrate lightswitch into silverlight application as it is done on ASP?

how about the example of "repackage the LightSwitch Data Grid into a Custom Silverlight Control"

Thx in advance,
Br,


By Mohamed Khanfir on   5/2/2012 4:44 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@Mohamed Khanfir - A LightSwitch Silverlight application can be incorporated into a Silverlight application easily when you use OData (see the OData link menu on the left).

By Michael Washington on   5/2/2012 4:46 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

it'l be nice if we can add filter to LS datagrid. Any one can drop an idea?

By Hung on   7/23/2012 8:24 PM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

@Hung - Investigate using WCF RIA Services.

By Michael Washington on   7/23/2012 8:24 PM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

Nice work!! I was searching for this kind of concept.

By Ryan Watson on   8/17/2012 4:24 AM
Gravatar

Re: Using The Silverlight DataGrid With LightSwitch

Awesome!! The data is loading so much faster than the readily available Lightswitch Datagrid. So now we have to figure out paging and scroll bars and read-only controls but that all seems worth it when the performance difference.

By Oyen on   10/17/2012 4:17 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