Introduction
In this article we will see how we can sort different column in DataGrid Custom Coulmns including TemplateColumn.
Creating Silverlight Project
Fire up Visual Studio 2008 and create a new Silverlight 3 Project. Name it as SampleSorting.
Add a DataGrid to the MainPage .xaml and name it as dgData.
Now create a class that would contain some properties to fill in to the DataGrid.
public class LogData
{
public string Name { get; set; }
public bool IsActive { get; set; }
public DateTime CreatedOn { get; set; }
public string CreatedBy { get; set; }
public int Priority { get; set; }
}
Now create sample data out of the above class and bind it to the ItemsSource of DataGrid.
public MainPage()
{
InitializeComponent();
List<LogData> myList = new List<LogData>
{
new LogData{ Name="Unable to Access SQL Server", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Diptimaya", Priority=2},
new LogData{ Name="Cannot access www.live.com", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Diptimaya", Priority=3},
new LogData{ Name="Account is Locked", IsActive=false, CreatedOn=DateTime.Now, CreatedBy="Rajkumar", Priority=1},
new LogData{ Name="Unable to Connect to Internet", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Rajkumar", Priority=1},
new LogData{ Name="Cannot Create DataBase", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Arun", Priority=2},
new LogData{ Name="Mail Server is not Accessed", IsActive=false, CreatedOn=DateTime.Now, CreatedBy="Mubarag", Priority=2},
new LogData{ Name="Need Admin Rights", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Diptimaya", Priority=3},
new LogData{ Name="Unable upload file to portal", IsActive=false, CreatedOn=DateTime.Now, CreatedBy="Dhananjay", Priority=3},
new LogData{ Name="Need Right Access for the file: url", IsActive=false, CreatedOn=DateTime.Now, CreatedBy="Arun", Priority=1},
new LogData{ Name="Access is Denied for: www.twitter.com", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Mubarag", Priority=4},
new LogData{ Name="Cannot log in to gmail.com", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Dhananjay", Priority=5}
};
dgData.ItemsSource = myList;
}
Now run the application to see the Normal Columns and default Sorting available.
Now we would create our Custom Columns and bind data to the respective Columns.
I have added a TemplateColumn, a CheckBoxColumn, and 3 TextBoxColumn. Follow the below XAML.
<data:DataGrid x:Name="dgData" Height="144" Margin="46,63,122,0" VerticalAlignment="Top" AutoGenerateColumns="False">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Header="Name">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<HyperlinkButton Content="{Binding Name}" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridCheckBoxColumn Header="Is Active" Binding="{Binding IsActive}"/>
<data:DataGridTextColumn Header="Created On" Binding="{Binding CreatedOn}"/>
<data:DataGridTextColumn Header="Created By" Binding="{Binding CreatedBy}"/>
<data:DataGridTextColumn Header="Priority" Binding="{Binding Priority}"/>
</data:DataGrid.Columns>
</data:DataGrid>
Now run the application, you would see every column is sorted except the Template Column.
To achieve that we need to add the following property to the Template Column.
<data:DataGridTemplateColumn Header="Name" SortMemberPath="Name">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<HyperlinkButton Content="{Binding Name}" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
Now run the application and you would achieve Sorting for the TemplateColumn.
That's it, we achieved Sorting for Custom Columns in DataGrid. Hope this article helps.