How to Freeze columns of the Silverlight DataGrid and how to display selected row details in the DataGrid?

SheoNarayan
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 7381 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 Freeze columns of the Silverlight DataGrid?

In some scenario where we have number of columns appearing into the DataGrid, we might need to freeze few columns of the Grid so that it would be easier for the end user to scroll through rest of the columns and see the details.

To freeze first few columns of the Grid, we specify the FrozenColumnCount property of the DataGrid.

Code

<StackPanel>

<Button x:Name="Button1" Content="FillData" Click="Button1_Click" Height="30" Width="75" Margin="20, 10, 0, 20"/>

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

</StackPanel>

Code behind

private void Button1_Click(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 display selected row details in the DataGrid?

In some scenario, we need to display complete details of selected records. We can do this by declaring a DataTemplate and attaching that template to the DataGrid.

Code

<Grid x:Name="LayoutRoot" Background="White">

<Grid.Resources>

<DataTemplate x:Name="RowDetails">

<StackPanel>

<TextBlock>First Name:</TextBlock>

<TextBlock Text="{Binding FirstName}"/>

<TextBlock>Last Name:</TextBlock>

<TextBlock Text="{Binding LastName}"/>

<TextBlock>Age:</TextBlock>

<TextBlock Text="{Binding Age}"/>

<TextBlock>IsActive:</TextBlock>

<TextBlock Text="{Binding IsActive}"/>

</StackPanel>

</DataTemplate>

</Grid.Resources>

<sdk:DataGrid x:Name="DataGrid1" RowDetailsTemplate="{StaticResource RowDetails}"

RowDetailsVisibilityMode="VisibleWhenSelected" AutoGenerateColumns="False">

<sdk:DataGrid.Columns>

<sdk:DataGridTextColumn Binding="{Binding FirstName}"/>

</sdk:DataGrid.Columns>

</sdk:DataGrid>

</Grid> 

In the above code snippet, you can see that we have declared a DataTemplate under Grid.Resources that contains the TextBlocks that binds the fields of the Data source.

In the DataGrid we have attached the DataTemplate by setting its RowDetailsTemplate property.

Code behind

public DataGridRowDetails()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(DataGridRowDetails_Loaded);

}

void DataGridRowDetails_Loaded(object sender, RoutedEventArgs e)

{

this.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

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

Login to post response

Comment using Facebook(Author doesn't get notification)