Datagrid TemplateColumn Sorting in Silverlight 3


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()
            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", 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:", IsActive=true, CreatedOn=DateTime.Now, CreatedBy="Mubarag", Priority=4},
                new LogData{ Name="Cannot log in to", 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:DataGridTemplateColumn Header="Name">
                            <HyperlinkButton Content="{Binding Name}" />
                <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}"/>

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">
HyperlinkButton Content="{Binding Name}" />

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.