How to sort the custom template column in DataGrid and Group the records of the DataGrid based on a column value?

SheoNarayan
Posted by in Silverlight category on for Intermediate level | Points: 250 | Views : 6728 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article, we are going to learn about DataGrid in silverlight and its related properties.

DataGrid

DataGrid control is one of the most important control in Silverlight to develop Line-of-Business (As per Wiki - Line of business (LOB) is a general term which often refers to a set of one or more highly related products which service a particular customer transaction or business need.) applications and is mostly used to List the records in tabular format.

Apart from listing the records, it also provides option to sort, re-arrange columns, resize columns, edit data etc.

This article is the continuation of my last article in Silverlight controls series, read last article here.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

How to sort the custom template column in DataGrid?

You must have noticed that when we declare a column as DataGridTemplateColumn in the DataGrid, the default sorting doesn’t work for that column. In case we want to apply sorting on the DataGridTemplateColumn, we need to set SortMemberPath property to a particular column.

Code

<sdk:DataGrid x:Name="DataGrid1" AutoGenerateColumns="False" Margin="10 10 10 10">

<sdk:DataGrid.Columns>

<sdk:DataGridTemplateColumn Header="Full Name" SortMemberPath="FirstName">

<sdk:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding FirstName}" x:Name="t1"/>

<TextBlock Text="{Binding LastName}" x:Name="t2"/>

</StackPanel>

</DataTemplate>

</sdk:DataGridTemplateColumn.CellTemplate>

</sdk:DataGridTemplateColumn>

<sdk:DataGridTextColumn Header="Age" Binding="{Binding Age}" />

<sdk:DataGridCheckBoxColumn Header="Is Active?" Binding="{Binding IsActive}"/>

</sdk:DataGrid.Columns>

</sdk:DataGrid>

Code behind

void DataGridCustomColumn_Loaded(object sender, RoutedEventArgs e)

{

FillData();

}

private void FillData()

{

IList<Person> list = new List<Person>();

 

Person p = new Person

{

Age = 1,

FirstName = "Joe",

LastName = "Elan",

IsActive = true

};

Person p1 = new Person

{

Age = 15,

FirstName = "Mike",

LastName = "Bull",

IsActive = true

};

Person p2 = new Person

{

Age = 51,

FirstName = "Mukul",

LastName = "Alwa",

IsActive = true

};

Person p3 = new Person

{

Age = 31,

FirstName = "Sheo",

LastName = "Narayan",

IsActive = true

};

list.Add(p);

list.Add(p1);

list.Add(p2);

list.Add(p3);

DataGrid1.ItemsSource = list;

}

public class Person

{

public string FirstName { get; set; }

public string LastName { get; set; }

public int Age { get; set; }

public bool IsActive { get; set; }

}

Output

How to Group the records of the DataGrid based on a column value?

DataGrid records can be grouped based on certain fields data and that can be done using PagedCollectionView class that is available in System.Windows.Data namespace.

We need to simply create the instance of PagedCollectionView class by passing the source of the data and then add the PropertyGroupDescription to GroupDescriptions collection of the PagedCollectionView object.

Code

<sdk:DataGrid x:Name="DataGrid1" AutoGenerateColumns="True" /> 

Code behind

public DataGridGrouping()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(DataGridGrouping_Loaded);

}

void DataGridGrouping_Loaded(object sender, RoutedEventArgs e)

{

FillData();

}

private void FillData()

{

IList<Person> list = new List<Person>();

 

Person p = new Person

{

Age = 1,

FirstName = "Joe",

LastName = "Elan",

IsActive = true

};

Person p1 = new Person

{

Age = 15,

FirstName = "Mike",

LastName = "Bull",

IsActive = true

};

Person p11 = new Person

{

Age = 15,

FirstName = "Mike",

LastName = "June",

IsActive = true

};

Person p2 = new Person

{

Age = 51,

FirstName = "Mukul",

LastName = "Alwa",

IsActive = true

};

Person p22 = new Person

{

Age = 51,

FirstName = "Mukta",

LastName = "Bhatia",

IsActive = true

};

Person p3 = new Person

{

Age = 31,

FirstName = "Sheo",

LastName = "Narayan",

IsActive = true

};

list.Add(p);

list.Add(p1);

list.Add(p11);

list.Add(p2);

list.Add(p22);

list.Add(p3);

// use Namespace System.Windows.Data;

PagedCollectionView view = new PagedCollectionView(list);

view.GroupDescriptions.Add(new PropertyGroupDescription("Age"));

DataGrid1.ItemsSource = view;

}

public class Person

{

public string FirstName { get; set; }

public string LastName { get; set; }

public int Age { get; set; }

public bool IsActive { get; set; } 

}

Once we are done with adding the PropertyGroupDescription to the GroupDescriptions collection of PagedCollectionView object, we need to set the ItemsSource of the DataGrid to this collection.

Output

Hope this article was useful. Thanks for reading, hope you liked it.

Keep a watch on forth coming articles on Silverlight. To read my series of articles, click here.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Ogipansrk on: 5/25/2012 | Points: 25
Hey narayan,

Just started learning Silverlight.

I found your articles very very useful , which are simple & Crystal clear.

Thank you !

Login to post response

Comment using Facebook(Author doesn't get notification)