Searching a RadPane with ContentURL set

9 posts, 2 answers
  1. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 29 Jun 2010 Link to this post

    Not sure how to go about this so I'm looking for any tips or ideas. Thanks

    Basically I have a RadPane and I set the contentURL property to a text file on a fileshare. That is all currently working just fine. The contents of the text file show up in the RadPane.

    What i have is a search variable passed into the page from a previous page and I want to search the contents of the RadPane for the search term and highlight the search term in the text document in yellow.

    In addition I would really like to have a couple buttons on top (back, and next) that when clicked would automatically scroll the user to the next or previous instance of the search term within the RadPane.

    Any examples or pointers would be great. I'm not even sure where to start with this.

    thanks
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 02 Jul 2010 Link to this post

    Hi Jason,

    When loading content inside RadPane using ContentUrl property that URL is loaded inside an <iframe>. You can get reference to this <iframe> using the getExtContentElement() method. You can find more information regarding the Client-side API of RadPane in the following help article:
    RadPane Client Object

    In order to achieve the required functionality I suggest you examine the DOM element of the <iframe> and wrap the searched items in a <span> elements in order to highlight them using W3C Range / TextRange methods. Information regarding W3C Range / TextRange Objects is available in the following articles:
    http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
    http://www.quirksmode.org/dom/range_intro.html
    http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx

    Best wishes,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 02 Jul 2010 Link to this post

    Thanks for the reply.

    I did some reading on the links you sent. I'm no javascript master. My code is posted below but it currently doesnt work.

    <script type="javascript">
        function pageLoad(sender, args)
        {
             var oPane = $find("<%= myPane.ClientID %>");
             var paneDOM = oPane.getExtContentElement();
             var html = paneDOM.outerHTML;
             var search = document.getElementById("ContentPlaceHolder1_searchfor").innerText;

             html = html.replace( searchfor, "<span style='background:yellow;'>"+searchfor+"</span>" );
        }
    </script>

    when debugging this code the var html seems to equal the right content (starts with <iframe.....) and my search var equals the right value, but after the page is rendered the search works inside the radpane are not highlighted in yellow.

    i'm i missing something. thanks
  5. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 07 Jul 2010 Link to this post

    Hi Jason,

    The provided sample code looks OK . The only problem I can see that you do not change the actual body content but the string variable. In order to 'highlight' part of the page you need to modify the actual content.

    However, this might cause some problem due to browser security restrictions. For this specific scenario, I recommend you to read the text file on the server and provide the set its content as plain text inside the pane.
     
    For your convenience I have attached a sample page with the above mentioned approach.


    Greetings,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 07 Jul 2010 Link to this post

    Thanks that worked perfect.

    I had a small issue where using a literal did not respect the \n character but i wrapped the literal in <pre></pre> tag and set style and scrollbars on this tag.

    building on the previous code I would really like to have a way to do (next, previous) buttons and auto scroll down or up to the next or previous search term.

    I have some asp.net buttons and can wire up some javascript onclick events but not sure how to get access to the scrollbar to set position and not sure how to figure out even what to set the scrollbar position too. The scrollbar on the radpane didnt work so i got a scrollbar by just setting the style="overflow:auto;" on the <pre> element.

    any ideas or advise would be very helpful.

    thanks
    jason
  7. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Jul 2010 Link to this post

    Hi Jason,

    You can implement the required functionality using RadPane's setScrollPos(x, y) client-side method, where Y should be the value of the offsetTop property, of the current element. You can use the following function as a base:
    var currentSelectedIndex = 0;
     
    function selectSearchedItem(direction)
    {
        var contentPane = $find("<%= RadPane2.ClientID %>"); //get refence to RadPane
     
        var highlights = $telerik.$(".highlighter"); //get reference to all highlighted spans using jQuery
         
        if (direction == "next")
        {
            if (currentSelectedIndex > 0)
                $telerik.$(highlights[currentSelectedIndex - 1]).removeClass("selected"); //remove CSS class of the previously 'selected' item using jQuery
            $telerik.$(highlights[currentSelectedIndex]).addClass("selected"); //add CSS class to change the background color of current item using jQuery
     
            contentPane.setScrollPos(0, highlights[currentSelectedIndex].offsetTop); //scroll the pane
     
            if (currentSelectedIndex < highlights.length - 1)
                currentSelectedIndex++;
            else
            {
                alert('Last item is reached!');
            }         
        }
        else if (direction == "prev")
        {
            if (currentSelectedIndex > 0)
                currentSelectedIndex--;
            else
            {
                alert('First item is reached!');
            }
     
            $telerik.$(highlights[currentSelectedIndex]).addClass("selected");//add CSS class to change the background color of current item
     
            if (currentSelectedIndex < highlights.length - 1)
                $telerik.$(highlights[currentSelectedIndex + 1]).removeClass("selected"); //remove CSS class of the previously 'selected' item
             
            contentPane.setScrollPos(0, highlights[currentSelectedIndex].offsetTop); //scroll the pane
        }
    }

    I hope this helps.

    Best wishes,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 09 Jul 2010 Link to this post

    Thanks for the code sample. It makes perfect sense to me except the scrollbars for the RadPane dont seem to work when using

    <pre...>
         <literal...>
    </pre>

    within a RadPane. The only way I was able to get scrollbars to appear was to set the style element on the <pre> tag. style="overflow:auto;"

    so i don't think contentPane.setScrollPos   will work? maybe i'm wrong.


    why don't the scrollbar work in radpane when using a literal. Is this a bug or a limitation of RadPane?


    Thanks again!!!
  9. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 14 Jul 2010 Link to this post

    Hi Jason,

    I tried to reproduce the problem with the scrollbars on my side but to no avail. Could you please open a support ticket and provide a sample project demonstrating the problem so we can investigate it further?

    For your convenience I have attached my test page with the function from my previous post implemented. Could you please modify it to the point where the problem occurs and send it back?

    Best wishes,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 14 Jul 2010 Link to this post

    Thanks for the reply.

    I found the problem. Not sure why I didnt catch this in your first example, but I had a typo in my code.

    Thanks so much for teh example. The highlighting and the next and previous buttons work perfect!

    Jason
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017