SchrolIntoView from Serverside

[Andy]

Hello,

I really need your help...  I am using a "demo/trial" version of Asp.Net Ajax radtreeview control to load a hierarchy.  I am doing this as a proof of concept... before deciding to by the package.

Here is what I am struggling with:

I load the control with let say 1000 users.  I have a search textbox... where the user can enter a search criteria then click on a search button.

This search can result in multiple hits... lets say someone enter a search by first name ("kevin") and I found 10 hits.  I would like to find the first node... and scroll into view.  The user clicks on a "find next" button... and the next node will be selected and scroll into view ... etc. etc.

I would like to do this from serverside... this will make things easier for me.
If this is not doable... then my problem is mainly passing the 10 Ids from serverside to clientside... and use the clientside function. How can I do this?

Again... my first choice is to do this from serverside.  I'd appreciate any help.

Thanks
Andy.

[Nikolay Tsenkov]

Hi Andy,

You can not call ScrollIntoView server-side. You can only register script calling scrollIntoView on the client.

That's why I recommend that you implement this scenario on the client-side.

Here is an example of almost the same scenario (search from a textbox, when absolute hit all nodes are collapsed and only the matched node is expanded and selected), which you can adjust for your needs:
1. markup:

<telerik:RadTextBox runat="server" ID="txtSearch">
    <ClientEvents OnKeyPress="onKeyPress" />
</telerik:RadTextBox>
<telerik:RadTreeView ID="RadTreeView1" runat="server">
// ...
</telerik:RadTreeView>

2. JavaScript:

function onKeyPress(sender,args) {
    setTimeout(function () {
        var tree=$telerik.findTreeView('<%= RadTreeView1.ClientID %>');
        var textBox=sender;
        var text=textBox.get_textBoxValue();
        var nodeWithThisText=tree.findNodeByText(text);
        if(nodeWithThisText!='undefined'&&nodeWithThisText!=null) {
            collapseNodesInCollection(tree.get_nodes());

            var parentNode=nodeWithThisText.get_parent();
            for(var i=0;i<nodeWithThisText.get_level();i++) {
                parentNode.set_expanded(true);
                parentNode=parentNode.get_parent();
            }
            setTimeout(function () { nodeWithThisText.set_selected(true); },0);
        }
    },0);
}

function collapseNodesInCollection(children) {
    for(var i=0,count=children.get_count();i<count;i++) {
        var node=children.getNode(i);
        collapseNodesInCollection(node.get_nodes());
        node.set_expanded(false);
    }
}

Also, there is a KB article that should additionally help you out (especially, how to deal with multiple hits, highlights etc.): http://www.telerik.com/support/kb/aspnet-ajax/treeview/how-to-manage-search-select-all-and-deselect-all-functionality-for-radtreeview-in-radcombobox.aspx
(As you will see in the example the TreeView is inside ComboBox, but this will not be a problem for you since you have the example provided above where a RadTextBox is used).

Hope this is going to help you!


Regards,
Nikolay Tsenkov
the Telerik team

[Andy]

I thank you for your help and guidance.   I will give it a try and provide feeback.

Thanks again.

[Nikolay Tsenkov]

Hi Andy,

You are welcome!

Hope that you will not experience any hard time with our controls in future!
Anyway, feel free to ask, if there are some difficulties!


Regards,
Nikolay Tsenkov
the Telerik team

[Andy]

Hello again...
I am back because I am struggling to figue this out.

To give you a better idea of what I am having diffictulty with see this thread:
http://www.telerik.com/community/forums/aspnet-ajax/treeview/treeview-search-on-node-level.aspx
My requrement are similar...
1.  Load one or two level tree nodes.
2   As the client click on a particular node... Load on demand.
all is good so far.
3.  The user can enter a search criteria in a textbox then click on a "search button"... that can result in multiple hits.
      I can populate all appropriate nodes serverside and the treeview is "refreshed" since it's in an update panel.
all is good so far.
Still in codebehind I want to scrollintoview ... to the first hit.

You suggested that I do this clientside since scrollintoview is not possible from codebehind.
I can't figrue this out... I understand that if ALL nodes were loaded say at pageLoad (no load on demand necessary) then
scrollintoview from clientside would be easy.

Is there any way... from serverside buttonclick to execute a javascript function to scrollintoview??
Pls, I really can use some help with this.

Thanks,
Andy.

[Nikolay Tsenkov]

Hi Andy,

As I previously said:
"You can not call ScrollIntoView server-side. You can only register script calling scrollIntoView on the client."

This is a reference for the usage of the method ScriptManager.RegisterStartupScript, which you should call inside the server-side handler of the button click event:
http://msdn.microsoft.com/en-us/library/bb359558.aspx

Hope this is helpful for you!


Regards,
Nikolay Tsenkov
the Telerik team