DataGrid Operation in Silverlight

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.

How to list the records in the DataGrid?

Code

<grid x:name="LayoutRoot" background="White">


<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" />
</StackPanel>
</grid>

In the above code, we have a Button control; on click of the button we are executing Button1_Click server side method.
Next, we have DataGrid control with AutoGenerateColumns attribute set to true that automatically generates the columns based on the properties found in the data source.
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);
}

public class Person

{

public string FirstName { get; set; }

public string LastName { get; set; }

public int Age { get; set; }

public bool IsActive { get; set; }
}

In the above code snippet, in the Button1_Click method we are calling FillData method. In the FillData method, we have instantiated the Person class and set its value and added to the Generic collection.
At last we have set the ItemsSource of the DataGrid to the generic list collection.

Output

AutoGeneratedColumns of the DataGrid allows automatic sorting, resizing and re-ordering of the columns.

How to customize the DataGrid’s columns data?

DataGrid has several column types to customize the look and feel of the DataGrid columns.
DataGridTextColumn
It allows keeping the text field type value in the DataGrid. Sorting of this column is inherited out of the box.
DataGridCheckBoxColumn
It allows keeping the Boolean field type value in the DataGrid. Sorting of this column is inherited out of the box.
DataGridTemplateColumn
It allows keeping type of data that can’t be kept in above two column type, eg. Images, it also allows keeping custom data along with other field type value in the DataGrid. Sorting of this column is NOT inherited out of the box, you need to write your own logic to support sorting of this column.
Code

<sdk:datagrid x:name="DataGrid1" autogeneratecolumns="False" margin="10 10 10 10">


<sdk:DataGrid.Columns>


<sdk:DataGridTemplateColumn Header="Full Name">


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

In the above code snippet, we have set DataGrid’s AutoGenerateColumns property to false so its column will not be automatically generated based on the properties of the DataSource.
We have used DataGridTemplateColumn with its CellTemplate that let us specify the template for the data in read only mode. We will see how to specify template for edit mode later on. In the CellTemplate, we have specified the DataTemplate for FirstName and LastName (TextBlocks in the StackPanel, you can’t keep TextBlock directly inside the DataTemplate.
To display the Age data, we have specified DataGridTextColumn and to display Active data we have specified DataGridCheckBoxColumn column type.
Code behind

public DataGridCustomColumn()

{


InitializeComponent();

this.Loaded += new RoutedEventHandler(DataGridCustomColumn_Loaded);
}

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; }
} 

In the above code snippet, we have attached DataGridCustomColumn_Loaded method to the Loaded event of the page. In this method we have called FillData.
In the FillData method, we have created a Generic list collection and added Person object and then set the ItemSource property of the DataGrid to the generic list collection.

Output

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

 

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

 

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

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