Validating Textbox on Lost Focus in RIA Service,Silverlight4

While working on my post on “Data Binding in Silverlight with RIA and Entity Framework – Part 3 (Validating Input Data)” , a series of article on RIA Services   , i came across a situation where i wanted to validate my textbox control on a particular event.For e.g on LostFocous.As we know the the validation fire only when the source property value gets changed and the entity gets updated. But you might have known that the Textbox TextProperty gets updated on LostFocus (MSDN Link) .This is the default behaviour but it does not work with RIA Service in Textbox.

And most of the time the validation on the client side need to be triggered explicitly on our demand.For e.g refer my StatesOfIndia Application as the user provides some value at state Name and moves on ,  the validation need to be fired.

So to implement the validation on LostFocus of StateName textbox follow the steps bellow ,

Make Sure you have Implemented the validation Rule at Model Entity Member

In the Metadata file i have added Required Attribute for the statename.

Change the UpdateSourceTrigger of Textbox

Then change the UpdateSourceTrigger property of the binding of the Textbox to explicit mode.

Update the Source at your desired event

As i  want to force updation of data as well as fire validation on lost focus event , so i am going to get the binding expression  of the control and update its source.

1. private void txtStateName_LostFocus(object sender, RoutedEventArgs e)
2. {
3. System.Windows.Data.BindingExpression bexpress = txtStateName.GetBindingExpression(TextBox.TextProperty);
4. bexpress.UpdateSource();
6. }

As soon as the property gets changed the validation will fire .

This is for now , soon i will post with a detailed article on validation.Stay Tuned

Data Binding in Silverlight with RIA and Entity Framework – Part 2 (Updating Data)

This is continuation of my earlier post where we discussed How to fetch And display data from database using DomainServiceContext via entity model.Here in this post we will take the StatesOfIndia application further ,where it will accept the state information to be modified as well as accept new state as addition.

Article Series

• Data Binding in Silverlight with RIA and Entity Framework – Part 1 (Displaying Data)
• Data Binding in Silverlight with RIA and Entity Framework – Part 2 (Editing / Updating Data)
• Data Binding in Silverlight with RIA and Entity Framework – Part 3 (Validating Input Data)

Source Code and Demo Link

Hosted Application : Launch StatesOfIndia

Source Code : StatesOfIndia

Let's discuss

Hi
Thanks for visiting my blog and your responses.As with this short span of blogging i have seen a lots of questions regarding Silverlight,WCF RIA and on other topics either personally or through mail , i have decided to go ahead with a discussion forum where you can ask me anything which is not related to my published post .

Hope this will help me and you to experience the technology better and implement it wisely .

Lets Start with discussion ….

Leading With Banana Technology

Hi this is one of my presentations at Developer’s session , Infy .As the heading suggest the session was on the growth ,Change in strategy , and latest additions in Microsoft technology .While presentation most of the content were verbal so it may look bit awkward here but …

still sharable 🙂

Doesn't your girlfriend deserves more time rather than Silverlight ??

Understanding Asynchronous Programming Model in Silverlight 4 with WCF  RIA

Welcome Friends , … although it seems like a tabloid heading but the experience with Silverlight can be troublesome and frustrating if you ignore the async programming model/calls which  used predominantly in Silverlight and WCF RIA. The Async model changes logic  and flow of code creating confusion until you know about it.

So this post is must if you are a newbie to Silverlight with RIA services and want to spent a little searching through forums/blog for some simple but crazy results.

Visit My Original Blog For latest Updates

Hi thanks for visiting my blog at wordpress .Please Check my up to date blog .

http://manaspatnaik.com/blog

Data Binding in Silverlight with RIA and EntityFramework – Part 1 (Displaying Data)

Data binding plays a major role for any technology.If you want me to rate the the learning experience of SL then surely Data Binding is going to be  one of the prime destination through journey.Lots of article written and quite a lot of post are available on this specific topic , but with this series of posts tries to introduce you to the concept with minimum content and with a real time sample.

In Data Driven application whole a lot revolve around the data source either in form of Database , XML or any other source ,In my previous posts i think  i was able to give fair bit of introduction on how to create a data model using EnityFramework and RIA services.This post cover up the displaying the data in the UI.

Concept of Binding in Silverlight

To proceed further with this post i guess you may need to have some basic concept of binding .May be writing in detail of this concept will be a repetitive task so I will advise to go through this article from MSDN which is complete in terms of learning resource .

A Real World Scenario

Here i am trying to explain a real application scenario of Master/Detail based data , where the information regarding master will be shown to the detail

Project and Data Model Setup

Create a Silverlight Project with RIA service enabled and add Data Model using Entity Framework .The detailed steps are described in this earlier post.Here the “DataModel_SOI.edmx” Model container shows up the mapped properties to the scalar data fields.The “DomainService_SOI” service class will take care of server side querying

Binding approach

Well the binding approach quite straight forward , we will bind the the state entity collection to the list box while loading of the page.Although the we never intend to show the data as State 1 Stae 2 … object wise format , we will assign a DisplayMember of the entity.The next step is to attach the selected List box item to the Grid layout control which is above the Visual Tree of the controls used for detailing.Once the selected state entity is attached to the Grid Layout the properties can be used a directly to the controls.

Binding to the State List Box

Of course the first step involved is to bind the state entities to the list box and the list should display the state name .The xaml code bellow shows the list box defined with in the Grid layout control in Home page.

1. <ListBox Grid.Row=”1″ HorizontalAlignment=”Left” Margin=”6,2,0,14″
2. Name=”lstStates” Width=”210″
3. FontFamily=”Portable User Interface” FontSize=”13″ FontWeight=”Bold”
4. />

I am going to bind the data to list box with following piece of code while Page Load.

1. private void Page_Loaded(object sender, RoutedEventArgs e)
2. {
3. //Create DataContext Object
4. DomainService_SOI dataContext = new DomainService_SOI();
6. //Use LoadOperation method to Populate the Entity Collection
7. LoadOperation<State> states = dataContext.Load(dataContext.GetStatesQuery());
9. //Bind To List Box
10. lstStates.ItemsSource = states.Entities;
11. lstStates.DisplayMemberPath = “StateName”;//Use StateName as Diplay Name
12. }

Using the Selected List Box Item as DataContext for the Grid Layout

Instead of pointing each individual controls to the selected entity object of list box we are going to bind it to the the parent container of all control.The parent dataContext can be used as a source for other controls.Following piece of code shows how the Grid Layout attached to the selected item.

1. <Grid x:Name=”ContentStackPanel” DataContext=”{Binding SelectedItem,ElementName=lstStates}”>

The point to note here except the List box binding everything we are declaring is in Xaml.The power of declarative programming helps to eradicate the tight coupling of binding to its data source.

Binding to the Detail Controls

The next step will be simple property binding to the DataContext assigned to the parent control.

1. <TextBlock FontWeight=”Bold” Height=”23″ HorizontalAlignment=”Left”
2. Margin=”95,68,0,0″ Name=”tbLanguage” Text=”{Binding Language}“
3. VerticalAlignment=”Top” Grid.Column=”1″ Grid.Row=”1″ />

One point to note here that the Language is property of State Entity which is going to be assigned to the parent grid layout control once the user select an item in list box.I am going to follow the same concept for other controls and my motive of displaying data ready to go.

Lets run the application and check with the data.

Conclusion

Well the data binding is not limited to the only way described above but it is one of the suggested way .This post is limited to displaying of data where in my next post will be continuation of this article where we will use binding concept to track changes , Validation and lots more .

Thanks for your patience , Keep commenting .

Source Code and Links

Download the Source Code for this Project – : StatesOfIndia

Element Binding In Silverlight

Well achieving a twitter page like functionality was never the intention but this simple example will introduce to element binding concept in Silverlight.In Element Binding we can bind a control property to another control property that too declaratively inside XAML.

In this post We will emulate the twitter feature where the number of character entered by user will get displayed while user enters text in the text box , that too with out a single line in code behind.

Here i have added 2 text blocks to hold max length and the other one to hold count the character.NAs we wanted the Text Block Text property should get show the Textbox.Length property , we will bind the Text Block’s Text to the length property of textbox.

The Code to Bind the element as follow

1. <TextBlock Height=”23″ Margin=”0,150,44,0″ Name=”tbRem” VerticalAlignment=”Top” FontSize=”13″
2. TextAlignment=”Right” HorizontalAlignment=”Right” Width=”46″
3. Text=”{Binding Path=Text.Length,ElementName=txtMsg}” />

In above code the 3rd line is the key where we assigning the Binding to the Text Property , remember dependency property.

The xaml source code only , based on the above fundamental achieves the twitter messaging like functionality.

1. <UserControl x:Class=”TwitterLikeMessege.MainPage”
2. xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
3. xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
4. xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;
5. xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
6. mc:Ignorable=”d”
7. d:DesignHeight=”300″ d:DesignWidth=”400″ xmlns:sdk=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”&gt;
9. <Grid x:Name=”LayoutRoot” Background=”White”>
10. <sdk:Label Height=”30″
11. HorizontalAlignment=”Left” Margin=”0,12,0,0″
12. Name=”lblCaption” VerticalAlignment=”Top” Width=”237″ Content=”What’s happening?” FontSize=”15″ Foreground=”#82000000″ />
14. <TextBlock Height=”23″ Margin=”0,150,44,0″ Name=”tbRem” VerticalAlignment=”Top” FontSize=”13″
15. TextAlignment=”Right” HorizontalAlignment=”Right” Width=”46″
16. Text=”{Binding Path=Text.Length,ElementName=txtMsg}” />
18. <TextBlock Height=”23″ Margin=”0,150,11,0″ Name=”tbMaxLen” VerticalAlignment=”Top”
19. Width=”26″ TextAlignment=”Right” FontSize=”13″ HorizontalAlignment=”Right”
20. Text=”{Binding Path=MaxLength,ElementName=txtMsg}”/>
22. <TextBox Height=”90″ Margin=”12,37,12,0″ Name=”txtMsg” VerticalAlignment=”Top” MaxLength=”160″ />
24. <sdk:Label HorizontalAlignment=”Right” Margin=”0,152,32,0″ Name=”lblSlash” Width=”25″ Content=” / “ Height=”28″ VerticalAlignment=”Top” />
25. </Grid>
26. </UserControl>

Cascading Combo Box Data Using RIA in Silverlight 4

Having introduced to the concept of WCF RIA services with EF and Silverlight in my earlier post , now its time to take up the issues we usually face in day to day coding activity.So in this post we will replicate cascade combo box loading scenario , where the data of other combo depends on the selection of first .

Here we have 2 combo box Product and Version , Depending upon product selection the versions should get populated.

Now as usual we will follow the steps ,

• Bind Data To Product Combo
• On Selected Index change event of Product Combo we will bind to Version Combo

Binding Data To Product Combo Box

As in my earlier post , i have created a Domain Context called myDomainContext using Entity Framework code generation.

Using myDomainContext Entity Query  we will bind  the product  data to the combo box.

1. myDomainContext cont = new myDomainContext();
2. LoadOperation<PRODUCT> prd = cont.Load(cont.GetPRODUCTsQuery());
3. cmbProducts.ItemsSource = prd.Entities;

Now on selection changed event if you will try to bind it to version Combo.

On Selection Changed

Create a custom EntityQuery based on the combobox selection load the query using LoadOperation. As all queries from a domain context are executed asynchronously. To execute the query, we are passing  the EntityQuery object as a parameter in the Load method.

1. private void cmbProducts_SelectionChanged(object sender, SelectionChangedEventArgs e)
2. {
3. myDomainContext cont = new myDomainContext();
4. ComboBox cmb = (ComboBox)sender;
5. EntityQuery<VERSION> query = from c in cont.GetVERSIONsQuery()
6. where c.VERSION_PRODUCTID == ((PRODUCT)cmb.SelectedItem).PRODUCTID
7. select c;
8. LoadOperation<VERSION> prd = cont.Load(query);
9. cmbVersions.ItemsSource = prd.Entities;
10. }