Highlight border of selected thumbnail

5 posts, 0 answers
  1. Romel
    Romel avatar
    23 posts
    Member since:
    May 2012

    Posted 14 Dec 2018 Link to this post

    Is there a way to highlight the border of the currently selected thumbnail on the pdf viewer?

    I simply want my users to know which thumbnail they've clicked on (which page they are on) since a lot of the documents they view look the same from page to page.

    Thanks.

  2. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 17 Dec 2018 Link to this post

    Hello Romel,

    A possible solution is to sync the current page in the control with the thumbnail. Additionally, it will be also necessary to handle the ValueChanged event of the scrollbar. As the container holding the thumbnails is virtualized you will need to reset the changed settings: 
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        public RadForm1()
        {
            InitializeComponent();
     
            this.radPdfViewer1.LoadDocument(@"..\..\sample.pdf");
            this.radPdfViewer1.ShowThubnails();
     
            this.radPdfViewer1.PdfViewerElement.Scroller.ScrollerUpdated += Scroller_ScrollerUpdated;
            this.radPdfViewer1.ContainerElement.ThumbnailList.VScrollBar.ValueChanged += VScrollBar_ValueChanged;
        }
     
        private void Scroller_ScrollerUpdated(object sender, EventArgs e)
        {
            this.SyncThumbNails();
        }
     
        private void VScrollBar_ValueChanged(object sender, EventArgs e)
        {
            this.SyncThumbNails();
        }
     
        private void SyncThumbNails()
        {
            int currentPage = this.radPdfViewer1.PdfViewerElement.CurrentPage.PageNo;
            foreach (RadFixedPageElement item in this.radPdfViewer1.ContainerElement.ThumbnailList.ViewElement.Children)
            {
                RadButtonElement buttonElement = item.FindDescendant<RadButtonElement>();
                if (buttonElement == null)
                {
                    continue;
                }
     
                int pageNo = item.Page.PageNo;
                if (pageNo == currentPage)
                {
                    buttonElement.SetThemeValueOverride(Telerik.WinControls.Primitives.BorderPrimitive.ForeColorProperty, Color.Red, "", typeof(Telerik.WinControls.Primitives.BorderPrimitive));
                }
                else
                {
                    buttonElement.ResetThemeValueOverrides();
                }
            }
        }
    }

    I hope this will help. Let me know if you have other questions.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Romel
    Romel avatar
    23 posts
    Member since:
    May 2012

    Posted 18 Dec 2018 in reply to Hristo Link to this post

    That worked really well for me, except that I am having a difficult time trying to find how I can make the border width wider. Is there a property on the tool I need to be looking at more specifically? Thank you very much.

     

    Romel

  4. Romel
    Romel avatar
    23 posts
    Member since:
    May 2012

    Posted 18 Dec 2018 in reply to Hristo Link to this post

    Hristo, Thank you once again. Please disregard my last post. Apparently, I had a brain fart and forgot about the 'WIDTH" property.... =)  I did my code like this in the SyncThumbnails() method, incase anyone else is interested or maybe facing the same issue as me. 

    buttonElement.SetThemeValueOverride(Telerik.WinControls.Primitives.BorderPrimitive.ForeColorProperty, Color.Red, "", typeof(Telerik.WinControls.Primitives.BorderPrimitive));
                        buttonElement.SetThemeValueOverride(Telerik.WinControls.Primitives.BorderPrimitive.WidthProperty, 5f, "", typeof(Telerik.WinControls.Primitives.BorderPrimitive));

     

    Thanks again for the help and enjoy your Holidays.

     

    Romel

     

  5. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 19 Dec 2018 Link to this post

    Hello Romel,

    I am glad that the suggested approach is working well in your project. Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top