Hi,
I have a xamdatagrid with few columns, I have put ToggleButton in one column header , when you click on the ToggleButton, it expands and It shows 6 columns which were there in Collapsed state. they become visible. similarly when you click it once again, 6 expanded columns are collapsed again.
Column which has toggle button on; it is marked bold in below xaml,
and is displayed with rowspan=2 & row=0, columns with width=200 & 20 are always displayed when 6 columns are expanded they are displayed in last, when 6 columns are collapsed then these 2 columns are displayed after the column which is marked in bold.
<igDP:FieldLayoutSettings.DataRecordCellAreaGridTemplate
>
="gridDataRecordCellAreaGridTemplate">
="80"/>
="250"/>
="50"/>
="200"/>
="20"/>
Now, my problem is I want to set Column Width for each and every column, so i used DataRecordCellAreaGridTemplate, i have put ComunDefinitions for all columns, but when 6 columns are collapsed, how can I maintain the same column width i.e. 200 & 20. what happens it these 2 column are displayed with width = 50!
Please give me some solution, how can we handle the column width, some style or my guess is we can do that in code behind, i have a function named "ToggleButtonPressed" which does this job of expanding & collapsing, we could add some code there, but i dont know how to access DataRecordCellAreaGridTemplate in code behind.
Hello,
You can access that Grid element using the Infragistics.Utilities.GetAncestorFromName/ GetDescendantFromName methods as you have specified a name already. Another way to do this, without the DataRecordCellAreaGridTemplate is by setting CellWidth and LabelWidth properties of the Fields in the FieldLayout.
Thanks Alex, You are simply great!
Alex,
One more question, the xamdatagrid that we talked about is now placed under an Expander control.
Expander Style that I am using:-
<ControlTemplate x:Key="newToggleButtonControlTemplate" TargetType="{x:Type ToggleButton}"> <Grid Background="{TemplateBinding Background}"> <Rectangle x:Name="Rectangle" Margin="0,0,0,0" Fill="Transparent" Stroke="{DynamicResource NormalBorderBrush}"/> <Image x:Name="Up_Arrow" Width="15" Height="15" HorizontalAlignment="Left" Margin="1,1,1,1" VerticalAlignment="Stretch" Opacity="1" RenderTransformOrigin="0.5,0.5" Source="..\Images\indic.jpg"/> <Image x:Name="Down_Arrow" Width="15" Height="15" HorizontalAlignment="Left" Margin="1,1,1,1" VerticalAlignment="Stretch" Opacity="1" RenderTransformOrigin="0.5,0.5" Source="..\Images\indicC.jpg"/> <TextBlock x:Name="ExpanderHeader" Margin="20,5,10,0" FontSize="12" HorizontalAlignment="Stretch" FontWeight="Bold" Text="{Binding Path=GridHeader}"> </TextBlock> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="Rectangle" Property="Fill" Value="{DynamicResource MouseOverBrush}"/> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter TargetName="Rectangle" Property="Fill" Value="{DynamicResource PressedBrush}"/> </Trigger> <Trigger Property="IsChecked" Value="true"> <Setter TargetName="Down_Arrow" Property="Visibility" Value="Visible"/> <Setter TargetName="Up_Arrow" Property="Visibility" Value="Collapsed"/> </Trigger> <Trigger Property="IsChecked" Value="false"> <Setter TargetName="Down_Arrow" Property="Visibility" Value="Collapsed"/> <Setter TargetName="Up_Arrow" Property="Visibility" Value="Visible"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <Style x:Key="FlexibleDisplayExpanderStyle" TargetType="{x:Type Expander}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Expander}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition x:Name="ContentRow" Height="*"/> </Grid.RowDefinitions> <Border x:Name="Border" Grid.Row="0" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,0,0"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <ToggleButton Background="{TemplateBinding Background}" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource= {RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Template="{DynamicResource newToggleButtonControlTemplate}"/> <ContentPresenter Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" ContentSource="Header" RecognizesAccessKey="True"/> </Grid> </Border> <Border x:Name="ExpandSite" Grid.Row="1" BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" Visibility="Collapsed"> <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Focusable="false"/> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsExpanded" Value="True"> <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
and this how XAMdatagrid is placed under Expander:-
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch"> <StackPanel HorizontalAlignment="Left" Margin="10,10,10,10" VerticalAlignment="Top"> <Expander Name="GridExpander" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#FFD9D9D9" Width="Auto" ClipToBounds="True" DataContext="{Binding ElementName=root}" HorizontalContentAlignment="Stretch" IsExpanded="True" Style="{DynamicResource FlexibleDisplayExpanderStyle}"> <StackPanel HorizontalAlignment="Stretch"> <igDP:XamDataGrid x:Name="xamDataGrid" Width="Auto" HorizontalAlignment="Stretch" Margin="0,0,0,0" ClipToBounds="True" DataSource="{Binding ElementName=root, Path=ObjectCollection,UpdateSourceTrigger=PropertyChanged}" GroupByAreaLocation="None">
Now, My problem is, in collapsed state, Expander does not "Autofit" the content i.e. XAMdatagrid width, but when I expand by clicking on togglebutton, width is properly set to the width of XAMdatagrid. when collapsed, i can see ToggleButton & Header Text & expander width is equal width of ToggleButton & Header Text.
what could be wrong here?