DataGrid and row details in Silverlight

Could you upload your soure please?

Great article !

Is this the only (easiest) way to catch a cell modification event ? (Best I've seen, for now ...)

@Necriis: Which event do you mean - the RowDetailsVisibilityChanged one? Or one of the events I used in the previous article about the Editing in the DataGrid? Sorry if I missunderstood you :)

@Frank: First the DataGrid has a collection only for the columns and second you can't access a specific cell using the DataGrid column. So do only thing I think of is to use the SelectedItem property of the DataGrid as it contains the DataContext for the entire row. From the DataContext you can easily gather the desired data. If I come into a better way to do this, I'll let you know.

You can find the index of the currently selected row in the SelectedIndex property of the DataGrid. Just note the indexing of the rows starts from 0.

If you have more questions, don't hesitate to ask! ;)

If you take a closer look at your sample you'll notice that clicking on the TextBox doesn't change the row selection, but if you click somewhere outside the TextBox in the cell the selection is changed. The same happens if you use another active control like button, radio button etc, so I guess that's the reason. I think it got something to do with the focus, but for now I don't have a concrete explanation. You can consider trying to use to use a TextBlock control and put the TextBox into the EditingTemplate of the cell, if this suits your application.

If you come with any other ideas, share them please! :)

My Sincere apologies about the above post.  I didn't realize it would post the way it did.

@Rajmund The height of the row details template depends on the height of the controls in it. In my example I can control the width and the height of the row details via the width and the height of the StackPanel control. So try setting the hegith of the layout control to Auto or choose a constant height that will suit all row details.

@Fernando Z I assume that you're trying to do the following thing: You want your control to be disabled, but when the cell is selected you want it to be active. I also have tried to do that, but I haven't found a way to access the selected cell and work with the controls in it. I have also tried the following: I have defined them as disabled in the XAML, but when disabled they doesn't get focus, so there is no event I could hook up in order to enable them again. I'm going to try the trick with the transparency, that you have shown in your code.

When I choose constant height it works fine, but setting height to Auto doesnt work. Thanks for your help

Hello,

I have a question, how should I know that "What Row holds the specified Control with the Specified data?"

My xaml code is:

        <my:DataGrid x:Name="dg1"
                                 RowDetailsVisibilityMode="Collapsed"
                                 AutoGenerateColumns="False"
                                 Margin="0,0,0,90"
                                 Style="{StaticResource DataGridStyle1}"
                                 SelectionChanged="dg1_SelectionChanged"
                                 SelectionMode="Single"
                                 >
            <my:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Background="White">
                        <!-- In the row details you can also use binding as in the column definitions,
                        because it shares the same DataContext as the row. -->
                        <TextBlock Margin="5,5,5,5" Width="350" Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum varius. Nullam felis purus, lacinia at, molestie non, porttitor sit amet, lectus. Fusce molestie, diam ac rutrum faucibus, nulla diam luctus. " TextWrapping="Wrap"/>
                    </StackPanel>
                </DataTemplate>
            </my:DataGrid.RowDetailsTemplate>
            <my:DataGrid.Columns >
                <my:DataGridTemplateColumn Header="Expand" >
                    <my:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate  >
                            <StackPanel Orientation="Horizontal">
                                <CheckBox x:Name="grdChkBox1" Height="17.334"
                                                HorizontalAlignment="Left"
                                                Style="{StaticResource CheckBoxStyle1}"
                                                VerticalAlignment="Bottom"
                                                Width="95.333" d:LayoutOverrides="Height" Click="grdChkBox1_Click"/>
                            </StackPanel>
                        </DataTemplate>
                    </my:DataGridTemplateColumn.CellTemplate>
                </my:DataGridTemplateColumn>
                <my:DataGridTextColumn Binding="{Binding Path=FirstName}" Header="First Name" IsReadOnly="True"/>
                <my:DataGridTextColumn Binding="{Binding Path=LastName}" Header="Last Name"/>
                <my:DataGridTextColumn Binding="{Binding Path=LastName}" Header="Age"/>
               
            </my:DataGrid.Columns>
        </my:DataGrid>
 

My xaml.cs code is :

    List<Data> source = new List<Data>();
            int itemsCount = 100;

            for (int i = 0; i < itemsCount; i++)
            {
                source.Add(new Data()
                {
                    FirstName = i+"First",
                    LastName = i + "Last",
                    Age = i,
                    Available = (i % 2 == 0)
                });
            }

            dg1.ItemsSource = source;

Now what I want is , when somebody clicked on my the "Chekbox" then I want 1) To see which "Row"  is need to be expanded, 2) Give me the "Row" detail so I can enable the "RowDetailsVisibilityMode="Collapsed"  to visible.

Any idea how I can acheive this via Event Handler?

Thanks,

Mudassir Azeemi

Uhm!  Hello All!

I am working with Datagrid of Silverlight  and I have a proplem with it . So I hope everyone who know it can help me!

My proplem is : I have a Datagrid,when the data is loaded,I want to change the Background and the Foreground of a cell.

I can't  take a cell in the grid , I have search in Google and now I can take a cell, but I can only change the Foreground of a cell  and I can't change the Background of a cell.

I used the code in the follow link : http://silverlight.net/forums/t/42372.aspx .  THANK YOU VERY MUCH !

First off, thanks for article!

I would like to use a datagrid to show multi table data that has an 1 to many relationship. There's no problem showing the parent row with DataBinding. I've put a DataGrid in my DataTemplate just fine. Using the RowDetailsVisibilityChanged event I can set the binding for the Detail DataGrid.

The problem I am experienceing is that the SelectedIndex seems to be a step behind what's happening.

For example, the first time it fires (on load of the parent grid) the value is -1. When I click on the fourth row, SelectedIndex is 0, and then if I click back to the first row, the SelectedIndex is 3. I'm guessing that the event is fired before the Index value is changed.

Another issue I am facing is that I would like to make the loading of the details grid conditional on a value in the parent row. Since the SelectedIndex seems to be a step behind, I tried to use the SelectionChanged event to get at the data. But that seems to be fired after the RowDetailsVisibilityChanged is.

I think I could code around these issues, but it doesn't seem to make sense that I would need to. Am I missing something here?

Thanks!

i want to display another datagrid by selecting the row of a another datagrid.........plz help me....am new in silverlight

Hi,

Article is really great. Can we have separate  row details for every column. Like in above case one detail for Group, another for Name and so on. Please reply me at guptarahulrk@gmail.com

-Rahul Gupta

Hi,

I am trying to create a Row Detail in DataGrid in Silverlight 4.I have a DataSource as

Public User parentUser{get;set;}  

Public List<User> childUsers{get;set;}

In the First Grid I have to display all the parentUser details and In the detaisl Grid I ahev to display all the childusers associated with the parentUser.

<sdk:DataGrid AutoGenerateColumns="False" HorizontalAlignment="Left" Name="UserViewModelDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top">  

   <sdk:DataGrid.Columns> 

       <sdk:DataGridTextColumn Header="Description" Binding="{Binding Description}" SortMemberPath="ActvityValue"/> 

    <sdk:DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" SortMemberPath="FirstName"/>

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

   </sdk:DataGrid.Columns>

<sdk:DataGrid.RowDetailsTemplate>

<DataTemplate>

<sdk:DataGrid HeadersVisibility="None" AutoGenerateColumns="False" DetailsVisibilityMode="VisibleWhenSelected" HorizontalAlignment="Left" Name="childUsersViewModelDataGrid" ItemsSource="ChildUsers"> 

 <DataGrid.Columns>

<sdk:DataGridTextColumn Header="First Name" Binding="{Binding ChildUsers.FirstName}" SortMemberPath="FirstName"/>

    <sdk:DataGridTextColumn Header="LastName" Binding="{Binding ChildUsers.LastName}" SortMemberPath="LastName"/>

</DataGrid.Columns>

....

By the above way I am only able to display the parent rows and non of the details show up..

i AM NOT ABLE TO UNDERSTAND WHERE i AM DOING WRONG.

i REQUEST SOME SOLUTIONS AND SUGGESTIONS PLEASE.

Thanks in Advance.

I have Row Details with an Image button to Collapsed selected RowDetails. I tried different options 

for example, i tried Search for parent row of a Rowdetails and collaps RowDetails to perticular Row.

any help will be appriciated.

Thanks