Datagrid TemplateColumn Sorting In Silverlight 3

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.

Sample Project Source

Download source files -1005 kb