design issue in nested gridview( horizontal scroll bar).

[kumar p]

hi,
 i have  an nested gridview   where i have four  grids  placed. right now i have an design issue.
 right now  here  i am showing two  gridview. to keep it  simple  for understanding
 the  first gridview     shows data with all the coumns .
 once i click the button to expand further . i show  second gridview   here  the  columns Address,City ,state  are  going to  far away from the first gridview . which in turns  leaves  an a  horizontal scroll bar.
to make  it clear
firstgridview        Name      city    state
Secondgridview  Name                                 city           state
 hope  my  issue is  clear.

 how can i fix the issue . is there any setting  or any property need  to enable.
 any help  would be grealty appreciated

 the  below is  my xaml code.

   <telerik:RadGridView x:Name="RadGrid1"   CanUserResizeColumns="False" RowHeight="24" ShowGroupPanel="False"  RowIndicatorVisibility="Collapsed"   CanUserFreezeColumns="False" SelectionMode="Extended"  RowDetailsVisibilityMode="Collapsed"  GridLinesVisibility="Horizontal"   IsReadOnly="True" AutoGenerateColumns="False" RowDetailsVisibilityChanged="RadGrid1_RowDetailsVisibilityChanged" SelectionChanged="RadGrid1_SelectionChanged"    RowLoaded="RadGrid1_RowLoaded" RowUnloaded="RadGrid1_RowUnloaded">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn>
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="btn1"   
                          Click="btn1_Click"    >
                                <Image  x:Name="img1" Source="Images/a1.png" Stretch="None" />
                            </Button>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding EMPID}"   IsVisible="False"  />
                <telerik:GridViewDataColumn Header="Name"  Width="*" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <my:Label Content="{Binding Name}"  />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Address"   Width="100"  >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <my:Label  Content="{Binding Address}" />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="City" Width="100" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel  Loaded ="SPCity_Loaded" Orientation="Horizontal" Background="Transparent">
                                <TextBlock Text="{Binding City}" TextWrapping="NoWrap"   HorizontalAlignment ="Left" Margin="10,0,10,0" Width="25" Foreground="Blue"  ></TextBlock>
                                <Image x:Name ="img" Source ="{Binding CityColor}" Stretch ="None"  />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="State"   Width="100" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Loaded ="SPState_Loaded" Orientation="Horizontal" Background="Transparent" >
                                <TextBlock Text="{Binding State}" TextWrapping="NoWrap" HorizontalAlignment ="Left" Margin="10,0,10,0"  Width="25" Foreground="Blue" ></TextBlock>
                                <Image  x:Name="img"  Stretch="None"
                  Source ="{Binding StateColor}"  />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <telerik:RadGridView x:Name="RadGrid2"   RowHeight="24"     ShowColumnHeaders="False"  RowIndicatorVisibility="Collapsed"  ShowGroupPanel="False"    CanUserFreezeColumns="False" AutoGenerateColumns="False"  SelectionMode="Extended"    RowDetailsVisibilityMode ="Collapsed"  IsReadOnly="True"  RowDetailsVisibilityChanged="RadGrid2_RowDetailsVisibilityChanged" SelectionChanged="RadGrid2_SelectionChanged" >
                        <telerik:RadGridView.Columns>
                            <telerik:GridViewDataColumn>
                                <telerik:GridViewDataColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel   Orientation="Horizontal" >
                                            <my:Label Content=" " Background="#3F9ADFF3" Width="24"  BorderThickness="0"/>
                                            <Button x:Name="btn2" Width="24" HorizontalAlignment="Right"   Visibility="{Binding node, Converter={StaticResource LevelToVisibility}}"
                            Click="btn2_Click" >
                                                <Image  x:Name="img2" Source="Images/a1.png" Stretch="None"
                Visibility="{Binding Node, Converter={StaticResource LevelToVisibility}}"  />
                                            </Button>
                                        </StackPanel>
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellTemplate>
                            </telerik:GridViewDataColumn>
                             <telerik:GridViewDataColumn DataMemberBinding="{Binding EMPID}"   IsVisible="False"  />
                <telerik:GridViewDataColumn Header="Name"  Width="*" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <my:Label Content="{Binding Name}"  />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Address"   Width="100"  >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <my:Label  Content="{Binding Address}" />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="City" Width="100" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel  Loaded ="SPCity2_Loaded" Orientation="Horizontal" Background="Transparent">
                                <TextBlock Text="{Binding City}" TextWrapping="NoWrap"   HorizontalAlignment ="Left" Margin="10,0,10,0" Width="25" Foreground="Blue"  ></TextBlock>
                                <Image x:Name ="img Source ="{Binding CityColor}" Stretch ="None"  />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="State"   Width="100" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Loaded ="SPState2_Loaded" Orientation="Horizontal" Background="Transparent" >
                                <TextBlock Text="{Binding State}" TextWrapping="NoWrap" HorizontalAlignment ="Left" Margin="10,0,10,0"  Width="25" Foreground="Blue" ></TextBlock>
                                <Image  x:Name="img"  Stretch="None"
                  Source ="{Binding StateColor}"  />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                        </telerik:RadGridView.Columns>
</telerik:RadGridView>

                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>
        </telerik:RadGridView>

[kumar p]

i  solved the issue  by getting  first grid view  width and then  assigning them  to  second, third  grid view
like this
 before  binding second  grid view  we  will  set  its  width
  RadGrid2.Width = ((System.Windows.FrameworkElement)(RadGrid1)).ActualWidth-5;