This is a migrated thread and some comments may be shown as answers.

Stacked Data bar in a DataTemplate

3 Answers 133 Views
DataBar
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 25 May 2012, 07:28 AM
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>

3 Answers, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 29 May 2012, 10:01 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Sudhir
Top achievements
Rank 1
answered on 06 Sep 2018, 04:57 AM

Hi,

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

0
Martin Ivanov
Telerik team
answered on 10 Sep 2018, 10:14 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DataBar
Asked by
Andrew
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Sudhir
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or