Silverlight to Angular – 4 (DataTemplates)

In Silverlight, when you are rendering some complicated data in a control, you will use DataTemplate to make it more readable to the user. One simple example would be, if you have a ListBox and you normally put a single property like state or year etc.,. But you will run into a situation, where you may want to display more than one property per row. One such example is displaying Diggs story to demonstrate the use of Listbox in Silverlight. For sake of simplicity, we will look a very simple example.

Problem: Display all students with their ID and Name in a listbox to select.

Silverlight:

By default, when you use ListBox in silverlight, you can bind it to a collection and point to a property of the object in the collection to display. If you want to display more than one properties from the object, then you need to use ItemTemplate. That is what we are going to do. For this example, we have a collection of Students, with following properties

1 public class Student 2 { 3 public string Id { get; set; } 4 public string Name { get; set; } 5 public string Grade { get; set; } 6 }

Since we need to work with collection to bind to control’s itemsource, we will create an observable collection of students like the following

1 public class Students:ObservableCollection<Student> 2 { 3 public Students() 4 { 5 Add(new Student() {Id = "1", Name = "First", Grade = "A"}); 6 Add(new Student() {Id = "2", Name = "Second", Grade = "B" }); 7 Add(new Student() { Id = "3", Name = "Third", Grade = "C" }); 8 9 } 10 }

View:

In our View, we will create a Listbox control and bind the Students collection to it. We are planning to display for now, just the Id and Name. Since the control’s DisplayMembersPath limitation, we will create a ItemTemplate to host the data template.

1 <ListBox ItemsSource="{Binding CurrentStudents}" Grid.Column="1" Margin="36,5,36,10"> 2 <ListBox.ItemTemplate> 3 <DataTemplate> 4 <Grid> 5 <Grid.ColumnDefinitions> 6 <ColumnDefinition Width="20*"></ColumnDefinition> 7 <ColumnDefinition Width="*"></ColumnDefinition> 8 </Grid.ColumnDefinitions> 9 <TextBlock Text="{Binding Id}" Grid.Column="0"></TextBlock> 10 <TextBlock Text="{Binding Name}" Grid.Column="1"></TextBlock> 11 </Grid> 12 </DataTemplate> 13 </ListBox.ItemTemplate> 14 </ListBox>

Nothing special here, We assigned the ObservableCollection of Students to the ListBox, and then we create a gird inside each row of ListBox and display Id and Name.

ViewModel:

This exposes a property for CurrentStudents, nothing else

1 public ObservableCollection<Student> CurrentStudents 2 { 3 get 4 { 5 return new Students(); 6 } 7 }

Most of the work we need to do is in the View to tell the Silverlight to create each row of ListBox with more than one property of the object collection.

AngularJS:

To my surprise, the amount of code we need to write to achieve the same is very less in Angular, there is not a lot of ceremony in here. The only and the main difference here between Silverlight and Angular is the building elements for the collection. In Silverlight we just pass the collection information and property to use in XAML and Silverlight takes care of traversing through the collection and building each row and putting the values property. Angular behaves same way except except instead of just pointing to the collection as itemssource, in angular, you will write the ‘foreach item in collection’ in the element instead of just the collection. Other than that everything from programming side is same. With that lets look at the view. The main difference is in the view, so lets make sure we understand it.

1 <!DOCTYPE html> 2 <html ng-app> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div ng-controller="TemplateCtrl"> 8 <select ng-model="SelectedItem"> 9 <option ng-repeat="student in Students"> 10 {{student.Id}}-{{student.Name}} 11 </option> 12 </select> 13 </div> 14 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 15 <script src="Scripts/TemplateCtrl.js"></script> 16 </body> 17 </html>

If you are following my previous blogs, you should be ok till line (8). Line (8) specifies that you are creating a list box (HTML – Select) and ignore the rest in line(8) for now. Line (9) – (11) specifies, what are the things goes into each and every options.

<option ng-repeat="student in Students">

In line (9) there is a new directive that we haven’t used before. ng-repeat, tells angular to create individual element for each and every object in a collection. In this example, angular will create individual option element for every object in ‘Students’ collection based on the template specified in line (10). So if we are going by the collection we created in the Silverlight view model, there are 3 students which means, Angular will create 3 option elements. Line (10) is a simple template, which does nothing but a simple one way binding of Id and Name properties of student class.

ViewModel:

As you can expect, most of the work is in the View since template work is UI related and ViewModel does not have any idea about templates. So our view model looks like the following

1 function TemplateCtrl($scope) { 2 $scope.Students = [ 3 { Id: "1", Name: "First", Grade: "A" }, 4 { Id: "2", Name: "Second", Grade: "B" }, 5 {Id: "3", Name: "Third", Grade: "C"}]; 6 }

I skipped ‘SlectedItem’ on purpose for now.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s