[Solved] Stacked Data bar in a DataTemplate

[Andrew]

Hi

When using a Databar inside a RadGrid along with a Data Templete the stacked Data bar will only display the first 2 items from the collections. Or am I missing something ?

<telerik:GridViewDataColumn Width="*" SortMemberPath="TotalTakingsValue" >
                                        <telerik:GridViewColumn.Header>
                                            <StackPanel>
                                                <TextBlock Text="Takings" />
                                            </StackPanel>
                                        </telerik:GridViewColumn.Header>
                                        <telerik:GridViewColumn.CellStyle>
                                            <Style TargetType="telerik:GridViewCell">
                                                <Setter Property="ContentTemplate">
                                                    <Setter.Value>
                                                        <DataTemplate>
                                                            <Grid>
                                                                <Grid.ColumnDefinitions>
                                                                    <ColumnDefinition Width="80" />
                                                                    <ColumnDefinition />
                                                                </Grid.ColumnDefinitions>
                                                                <TextBlock Text="{Binding TotalTakingsValue, StringFormat='{}{0:c}'}" HorizontalAlignment="Right" Margin="0 0 10 0" VerticalAlignment="Center" />
                                                                <StackPanel Orientation="Vertical" Grid.Column="1">
                                                                    <telerik:RadStackedDataBar  x:Name ="TakingsStackBar" Height="18" Margin="2" Maximum="9000"  ValuePath="Amount" ToolTipFormat="c" ToolTipPath="Amount"  ItemsSource="{Binding KPITakingsBarData}" ShowToolTips="True" >

                                                                    </telerik:RadStackedDataBar>
                                                                    <telerik:RadDataBar x:Name="TakingsTargetBar" Value="{Binding KPITakings}" Maximum="{Binding Path=Text, ElementName=MaxBarData}"  LabelVisibility="Collapsed" Height="2" Margin="0 0 3 0"  ToolTipService.ToolTip="{Binding KPITakings,StringFormat='{}{0:c}'}"  />
                                                                </StackPanel>

                                                            </Grid>
                                                        </DataTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </telerik:GridViewColumn.CellStyle>
                                        <telerik:GridViewDataColumn.AggregateFunctions>
                                            <telerik:SumFunction Caption="        " ResultFormatString="{}{0:c}" SourceField="TotalServiceValue" />
                                        </telerik:GridViewDataColumn.AggregateFunctions>
                                    </telerik:GridViewDataColumn>

[Petar Marchev]

Hello Andy,

Thank you for the attached code. I  created a small project based on the code you provided. I was not able to reproduce the behavior that you describe. I have attached to this post the project with which I tested, and a snapshot of the results that I get. Please examine the demo app and let us know if you get different results.

If you keep experiencing problems with this I will ask that you prepare a small project that reproduces this issue so that we can test and investigate its origins. The only thing that comes to my mind right now is that if you have negative values - then you would not see these bars because the Minimum of the StackedDataBar is 0 and negative values are drawn to the left.

Greetings,
Petar Marchev
the Telerik team

[Sudhir]

Hi,

Is there any way possible to make the bar coloring vertical instead of horizontal?

[Martin Ivanov]

Hello Sudhir,

To achieve your requirement you can rotate the control using a RotateTransform. For example:

<telerik:RadStackedDataBar RenderTransformOrigin="0.5, 0.5">
    <telerik:RadStackedDataBar.RenderTransform>
        <RotateTransform Angle="90" />
    </telerik:RadStackedDataBar.RenderTransform>
</telerik:RadStackedDataBar>

Regards,
Martin Ivanov
Progress Telerik