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

7 posts, 1 answers
  1. R
    R avatar
    13 posts
    Member since:
    Jun 2014

    Posted 30 Jul 2014 Link to this post

    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
  2.
  3. Yoan
    Admin
    Yoan avatar
    1213 posts

    Posted 04 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. R
    R avatar
    13 posts
    Member since:
    Jun 2014

    Posted 05 Aug 2014 Link to this post

    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?
  7. Yoan
    Admin
    Yoan avatar
    1213 posts

    Posted 05 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  8.
  9. R
    R avatar
    13 posts
    Member since:
    Jun 2014

    Posted 05 Aug 2014 Link to this post

    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
  11. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1251 posts

    Posted 06 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  13. R
    R avatar
    13 posts
    Member since:
    Jun 2014

    Posted 06 Aug 2014 in reply to Pavel R. Pavlov Link to this post

    Thanks a lot.
  14.
Back to Top