Inside a RadGridView how do I overlay the value on the RadProgressBar control?

[R]

Hi, inside a RadGridView how do I overlay the value on a RadProgressBar control?

So the PercentFilled value below, say 75, will be displayed at 75% on top of the progressbar.

What I have but I can't get it to work:

            <telerik:RadGridView.Columns >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadProgressBar Minimum="0" Maximum="100" Value="{Binding PercentFilled}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>

Thanks

[Yoan]

Hi Russell,

Indeed this is the correct approach. However, you have missed the following line:

<telerik:RadGridView.Columns>
             <telerik:GridViewDataColumn>
                 <telerik:GridViewDataColumn.CellTemplate>
                     <DataTemplate>
                         <telerik:RadProgressBar Minimum="0" Maximum="100" Value="{Binding Percent}"/>
                     </DataTemplate>
                 </telerik:GridViewDataColumn.CellTemplate>
             </telerik:GridViewDataColumn>
         </telerik:RadGridView.Columns>

For your convenience, I have attached a sample project which demonstrates the approach. I hope it helps.

Regards,
Yoan
Telerik

 

 

[R]

Hi, I don't think you understood the question. I can get the progress bar to work - just like your example code but I would like to overlay a text value, '99%', on top of the progress bar.

Can you help with this?

[Yoan]

Hello Russell,

Indeed, I can not fully understand your question. May I ask you to clarify where you want to show the value. It would be great if can provide a simple image illustrating your scenario.

Thank you in advance.

Regards,
Yoan
Telerik

 

 

[R]

Hi, thanks for the quick reply.

Basically I want to string format the Value field to appear on top of the progress bar. So using the example below right now it shows the progress bar as 75% complete with no text just a plain progress bar. I want to put the text "75%" on top the bar so the bar remains as-is but with some text overlaid on top to say "75% (so string.format("{0} %", Value);).

  <telerik:RadProgressBar Minimum="0" Maximum="100" Value="75"/>


I hope this is clear now?

thanks

[Pavel R. Pavlov]

Hello,

In order to achieve your requirement you can wrap the RadProgressBar in a Grid control and use a TextBlock to visualize the RadProgressBar.Value. Basically, instead of using just the control you can use this definition.

<Grid>
    <telerik:RadProgressBar x:Name="progress"/>
    <TextBlock FontWeight="Bold" Foreground="Red" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Run Text="{Binding ElementName=progress, Path=Value, StringFormat=n2}"/>
        <Run Text="%"/>
    </TextBlock>
</Grid>

If this approach is not convenient for you, please let us know and I will suggest another approach.

Regards,
Pavel R. Pavlov
Telerik

 

 

[R]

Thanks a lot.