In this post we will go through how to use Silverlight data grid and how to customize it.
Simple DataGrid:
It is very easy to use the data grid control. First create a Silverlight project. In .net if you want to bind data to the grid we use the DataBind property of the grid. Similarly, in Silverlight we use the ItemSource or DataContext property of the DataGrid. If we have several child elements that will share a common data source, we can set DataContext property for the parent elements. And we use ItemsSource for ItemsSource in most cased to generate template.
Now add one xml file to the project. Name it "Sample.xml". I populated the xml with some sample data:
<SampleData>
<Person firstname="John" lastname="Samuel" age="40"/>
<Person firstname="Thomas" lastname="George" age="28"/>
<Person firstname="Alex" lastname="Johnson" age="19"/>
<Person firstname="Robert" lastname="Donavan" age="45"/>
<Person firstname="David" lastname="Johnson" age="40"/>
</SampleData>
Add one class to the project and name it "Person.cs". Create three property called firstName,lastName and age. Now we will describe one method which will return a list of Person objects. We will use Linq to Xml for populating the list.
public List<Person> getPersonInformations()
{
List<Person> myList = new List<Person>();
XDocument rootElement = XDocument.Load("Sample.xml");
var query = from c in rootElement.Elements("SampleData").Elements("Person")
select c;
foreach (var s in query)
{
myList.Add(new Person() { firstName = s.Attribute("firstname").Value.ToString(), lastName = s.Attribute("lastname").Value.ToString(), age = Convert.ToInt32(s.Attribute("age").Value.ToString()) });
}
return myList;
}
Now drag and drop a data grid control in MainPage.xaml name it "myDataGrid" and in the PageLoad event set the item source property:
myDataGrid.ItemsSource = new Person().getPersonInformations();
Run the project. :)
Customizing this DataGrid:
Set AutoGeneratedColumns property of the DataGrid to "false" and re-run the project. Surprised? Wait!! No errors in your code. That's how you will customize it. You need to generate the columns now. There are three types you can declare as data grid columns: DataGridTextColumn,DataGridCheckBoxColumn and DataGridTemplateColumn. For our purpose we will use the DataGridTextColumn as follows:
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="First Name" IsReadOnly="True" Binding="{Binding firstName}"/>
<data:DataGridTextColumn Header="Last Name" IsReadOnly="True" Binding="{Binding lastName}"/>
<data:DataGridTextColumn Header="Age" IsReadOnly="True" Binding="{Binding age}"/>
</data:DataGrid.Columns>
Now run the project.
DataGridTemplateColumn:
This option is very useful to fulfill our business needs.If you want to have images,hyperlink etc then you need to use this option.For this post I will create image column in my data grid.
<data:DataGridTemplateColumn Header="Image" >
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="3i.JPG"></Image>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
That's it. Try the other options of this powerful control. Source code attached. Enjoy!!!