Searching a RadPane with ContentURL set

[Jason Bourdette]

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

[Dobromir]

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

[Jason Bourdette]

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

[Dobromir]

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

[Jason Bourdette]

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

[Dobromir]

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

[Jason Bourdette]

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!!!

[Dobromir]

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

[Jason Bourdette]

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