Hi,
I have followed the example code for filtering a RadTreeView using a RadTextBox as you type into the box, and it works a charm. The link to that example is here: Filter Tree
I am using Telerik version: 2013.2.611.40
The issue I have is that my tree and textbox are in a user control, and on the same page I have two versions of this control. When I type into the first textbox to filter the first tree nothing happens, but the second tree does expand. The second tree works fine.
I know this is an issue with the valueChanged javascript function being called twice, but I cannot figure out a way around it, as this is hooked up the the keydown event on the textbox as a delegate (i think).
I have looked through plenty of articles saying to pass through the target, or to implement INamingContainer but nothing I do seems to sort this issue out.
Can anyone point me in the right direction?
Screenshots attached showing issue:
Screen 1 - page first loaded and both tree, fully collapsed.
Screen 2 - enter character into first textbox, and second tree expands.
Screen 3 - enter character into second textbox, and second tree filters as expected.
Demo project code below:
Master Page:
Web Page:
UserControl:
VB
XML Data:
Thanks
Dale
I have followed the example code for filtering a RadTreeView using a RadTextBox as you type into the box, and it works a charm. The link to that example is here: Filter Tree
I am using Telerik version: 2013.2.611.40
The issue I have is that my tree and textbox are in a user control, and on the same page I have two versions of this control. When I type into the first textbox to filter the first tree nothing happens, but the second tree does expand. The second tree works fine.
I know this is an issue with the valueChanged javascript function being called twice, but I cannot figure out a way around it, as this is hooked up the the keydown event on the textbox as a delegate (i think).
I have looked through plenty of articles saying to pass through the target, or to implement INamingContainer but nothing I do seems to sort this issue out.
Can anyone point me in the right direction?
Screenshots attached showing issue:
Screen 1 - page first loaded and both tree, fully collapsed.
Screen 2 - enter character into first textbox, and second tree expands.
Screen 3 - enter character into second textbox, and second tree filters as expected.
Demo project code below:
Master Page:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="TestTree.master.vb" Inherits="TestTreeViewFiltering.TestTree" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
div
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
div
>
</
form
>
</
body
>
</
html
>
Web Page:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/TestTree.Master" CodeBehind="TestFilterTree.aspx.vb" Inherits="TestTreeViewFiltering.TestFilterTree" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Src="~/ucFilterTree.ascx" TagName="ucFilterTree" TagPrefix="uc1" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"server"
>
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
>
<
telerik:RadPane
ID
=
"rpLeft"
runat
=
"server"
>
<
uc1:ucFilterTree
ID
=
"ucFilterTreeLeft"
runat
=
"server"
/>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"rsbSplit"
runat
=
"server"
></
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"rpRight"
runat
=
"server"
>
<
uc1:ucFilterTree
ID
=
"ucFilterTreeRight"
runat
=
"server"
/>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
asp:Content
>
UserControl:
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ucFilterTree.ascx.vb" Inherits="TestTreeViewFiltering.ucFilterTree" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:UpdatePanel
ID
=
"upFilterTree"
runat
=
"server"
>
<
ContentTemplate
>
<
telerik:RadTextBox
ID
=
"rtbFilterText"
runat
=
"server"
>
<
ClientEvents
OnLoad
=
"clientLoad"
/>
</
telerik:RadTextBox
>
<
telerik:RadTreeView
ID
=
"rtvFilterTree"
runat
=
"server"
></
telerik:RadTreeView
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
String.prototype.startsWith = function (string) {
return (this.lastIndexOf(string, 0) === 0);
}
var _timer = null;
function clientLoad(sender) {
$telerik.$(".riTextBox", sender.get_element().parentNode).bind("keydown", valueChanging);
}
function valueChanging(sender, args) {
if (_timer) {
clearTimeout(_timer);
}
_timer = setTimeout(function () {
var _tree = $find("<%= rtvFilterTree.ClientID%>");
var _textBox = $find("<%= rtbFilterText.ClientID%>");
var _searchString = _textBox.get_element().value;
for (var _ii = 0; _ii <
_tree.get_nodes
().get_count() ; _ii++) {
findNodes(_tree.get_nodes().getNode(_ii), _searchString);
}
}, 100);
}
function findNodes(node, searchString) {
node.set_expanded(true);
var
_hasChildren
=
false
;
for (var
_ii
=
0
; _ii < node.get_nodes().get_count() ; _ii++) {
_hasChildren
=
findNodes
(node.get_nodes().getNode(_ii), searchString) || _hasChildren;
}
var
_textToCheck
=
node
.get_textElement().textContent;
if (_hasChildren || _textToCheck.toLowerCase().startsWith(searchString.toLowerCase())) {
node.set_visible(true);
return true;
} else {
node.set_visible(false);
return false;
}
}
</script>
</
telerik:RadScriptBlock
>
VB
Public
Class
ucFilterTree
Inherits
System.Web.UI.UserControl
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
If
Not
IsPostBack
Then
rtvFilterTree.LoadContentFile(
"~/TreeData.xml"
)
End
If
End
Sub
End
Class
XML Data:
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
Tree
>
<
Node
Text
=
"Desktop"
ToolTip
=
"Desktop"
>
<
Node
Text
=
"Administrator"
>
<
Node
Text
=
"AppData"
>
<
Node
Text
=
"Microsoft"
/>
</
Node
>
<
Node
Text
=
"Contacts"
/>
<
Node
Text
=
"Downloads"
/>
<
Node
Text
=
"Documents"
/>
<
Node
Text
=
"Favorites"
>
<
Node
Text
=
"Links"
/>
</
Node
>
<
Node
Text
=
"Music"
/>
<
Node
Text
=
"Pictures"
/>
<
Node
Text
=
"Saved Games"
/>
<
Node
Text
=
"Searches"
>
<
Node
Text
=
"History"
/>
</
Node
>
<
Node
Text
=
"Videos"
/>
</
Node
>
<
Node
Text
=
"Computer"
ToolTip
=
"My Computer"
>
<
Node
Text
=
"WebServer (\\10.0.0.80) (W:)"
/>
<
Node
Text
=
"Local Disk (C:)"
>
<
Node
Text
=
"inetpub"
>
<
Node
Text
=
"AdminScripts"
></
Node
>
</
Node
>
</
Node
>
<
Node
Text
=
"Local Disk (D:)"
>
<
Node
Text
=
"Movies"
/>
<
Node
Text
=
"Music"
/>
<
Node
Text
=
"Games"
/>
</
Node
>
</
Node
>
</
Node
>
</
Tree
>
Thanks
Dale