Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
showing row details on button click of silver light datagrid
Posted By Sarin on Nov 15, 2012     RSS Feeds     Latest Hinduism news
5787 Views

In this article, we will see how to use Silverlight DataGrid RowDetails Template.  
First let us drag and drop a data grid control on MainPage.xaml page. This will add the required references and namespace automatically.
Data grid will look like
  
<data:DataGrid Margin="50,50,0,0" x:Name="dg" CanUserSortColumns="True" AutoGenerateColumns="False" HeadersVisibility="All" RowBackground="LightBlue"  
AlternatingRowBackground="AliceBlue" Height="300" Width="600" RowHeight="30" IsReadOnly="True" CanUserResizeColumns="False">
  
Most important property of data grid in this case would be RowDetailsVisibilityMode
This option will let us toggle the view of row details
Next I will add RowDetailsTemplate  data template to let us display the content we want to show when the user selects the row. In this case, I have shown each property of the cricketer in a new row.
  
<data:DataGrid.RowDetailsTemplate>
                <!-- Begin row details section. -->
                <DataTemplate>
                    <Border BorderBrush="Black"  
                            BorderThickness="1" Background="White">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.15*" />
                                <ColumnDefinition Width="0.85*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <!-- Controls are bound to FullAddress properties. -->
                            <TextBlock Text="FirstName "  
                                       Grid.Column="0" Grid.Row="0" />
                            <TextBlock Text="Binding FirstName"  
                                       Grid.Column="1" Grid.Row="0" />
  
                            <TextBlock Text="LastName "  
                                       Grid.Column="0" Grid.Row="1" />
                            <TextBlock Text="Binding LastName"  
                                       Grid.Column="1" Grid.Row="1" />
  
                            <TextBlock Text="Age "  
                                       Grid.Column="0" Grid.Row="2" />
                            <TextBlock Text="Binding Age"  
                                       Grid.Column="1" Grid.Row="2" />
  
                            <TextBlock Text="Joining Date "  
                                       Grid.Column="0" Grid.Row="3" />
                            <TextBlock Text="Binding DOJ"  
                                       Grid.Column="1" Grid.Row="3" />
                        </Grid>
                    </Border>
               </DataTemplate>
  
The RowDetailsVisibilityChanged event
This event is raised when the visibility of the row details is changed. If RowDetailsVisibilityMode is set to VisibleWhenSelected, the event is raised on selecting the row. Note that this event is also raised when the row details of the previously selected row are hidden.
With RowDetailsVisibilityMode, we can set visibility of row details it has three values.

1) Collpased: Row details are not visible.
2) Visible:  Row details are visible.
3) VisibleWhenSelected: When a row selected its row details will be visible.

Default value is VisibleWhenSelected.

However, in our case we will hide or unhide row details on a button click event. For this, I have added a column on click of which row details will hide or unhide.
<data:DataGridTemplateColumn>
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="+" Click="HideShowDetails"></Button>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

My button click event looks like
    private void HideShowDetails(object sender, RoutedEventArgs e)
         {
            Button expandCollapseButton = (Button)sender;
            DataGridRow selectedRow = DataGridRow.GetRowContainingElement(expandCollapseButton);
  
            if (null != expandCollapseButton && "+" == expandCollapseButton.Content.ToString())
             {
                selectedRow.DetailsVisibility = Visibility.Visible;
                expandCollapseButton.Content = "-";
            }
            else
             {
                selectedRow.DetailsVisibility = Visibility.Collapsed;
                expandCollapseButton.Content = "+";
            }
        }
I am toggling the button content and row details visibility mode depending on whether the row details are visible or collapse.
  
Next is loading data in data grid. Like my previous articles, I will use the same dummy class to populate my data onto the data grid.
  
    private List<Data> LoadCollectionData()
         {
            List<Data> authors = new List<Data>();
            authors.Add(new Data()
             {
                FirstName = "Mahi",
                LastName = "Dhoni",
                Age = 31,
                Available = false,
                DOJ = new DateTime(2001, 11, 10),
                Details = new List<string>()  "FirstName: Mahi", "LastName: Dhoni", "Age: 31",
            });
            authors.Add(new Data()
             {
                FirstName = "Sarin",
                LastName = "Mall",
                Age = 26,
                Available = true,
                DOJ = new DateTime(2011, 05, 07),
                Details = new List<string>()  "FirstName: Sarin", "LastName: Mall", "Age: 26",
            });
            authors.Add(new Data()
             {
                FirstName = "Sachin",
                LastName = "Tendulkar",
                Age = 39,
                Available = true,
                DOJ = new DateTime(1989, 01, 08),
                Details = new List<string>()  "FirstName: Sachin", "LastName: Tendulkar", "Age: 39",
            });
            authors.Add(new Data()
             {
                FirstName = "Viru",
                LastName = "Sehwag",
                Age = 34,
                Available = true,
                DOJ = new DateTime(1998, 01, 26),
                Details = new List<string>()  "FirstName: Viru", "LastName: Sehwag", "Age: 34",
            });
            return authors;
        }
  
On binding the data grid to this collection, data grid looks like
  

When I click on the next button, I can view the row details as

On clicking the minus sign, row details will hide. On clicking the plus button of another row, row details of that row will be shown along with the row details of already visible row. This scenario is not achievable with RowDetailsVisibilityChanged event where we can view row details of only one row at a time.

Two rows details visible at a time
  
This is a very simple example. Next, you can use your own creativity to add other controls like images, checkbox or edit and save the changes in row details template.Bottom of Form



Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
showing row details on button click of silver light datagrid
Paging in silver light Datagrid
Call Codebehind method from GridView ItemTemplate Eval function
Displaying Image in silverlight Datagrid
Delete duplicate records from table in SQL
Working with silver light datagrid
Changing Grid View header and footer at run time
How to sort an ObservableCollection
The breakpoint will not currently be hit. No symbols have been loaded for this document
Working with Dockpanel in silverlight

Post Comment