Hello,
I have a radwindow in which I have putted an aspx page that contains a user control inside. the user control have a treeview and a RadTextBox control. I want the filter functionality for treeview nodes. When I type characters in search box, it will hide the nodes which does not contains that characters and matching characters in remaining nodes gets bold. I have made javascript functions for this and working fine. I wraps the matching characters with <b></b> tags with regular expression. Here problem I am facing is it is showing <b></b> instead of making matching characters bold. I used same in listbox and it is working fine. Any idea regarding this? The code is as below :
For Javascript :
function filterList() {
var treeview = $find("<%=RadTreeViewMain.ClientID%>");
var textbox = $find("<%=txtSearchItems.ClientID%>");
clearListEmphasis(treeview);
createMatchingList(treeview, textbox.get_textBoxValue());
}
// Remove emphasis from matching text
function clearListEmphasis(treeview)
{
var re = new RegExp("</{0,1}b>", "gi");
var itemText;
var allNodes = treeview.get_allNodes();
for (var i = 0; i < allNodes.length; i++) {
var node = allNodes[i];
itemText = node.get_text();
node.set_text(itemText.replace(re, ""));
//node.collapse();
}
}
// Emphasize matching text and hide non-matching items
function createMatchingList(treeview, filterText)
{
if (filterText != "") {
filterText = escapeRegExCharacters(filterText);
var re = new RegExp(filterText, "i");
var allNodes = treeview.get_allNodes();
for (var i = 0; i < allNodes.length; i++)
{
var node = allNodes[i];
var itemText = node.get_text();
if (itemText.match(re))
{
if (node.get_level() != 0)
{
var pNode = node.get_parent();
pNode.set_expanded(true);
pNode.set_visible(true);
}
node.set_text(itemText.replace(re, "<b>" + itemText.match(re) + "</b>"));
node.set_visible(true);
}
else {
node.set_visible(false);
}
}
}
else {
var allNodes = treeview.get_allNodes();
for (var i = 0; i < allNodes.length; i++) {
var node = allNodes[i];
var itemText = node.get_text();
node.set_visible(true);
node.set_expanded(false);
}
}
}
// Clears the text from the filter.
function clearFilterText() {
var textbox = $find("<%=RadTreeViewMain.ClientID%>");
textbox.clear();
}
// Escapes RegEx character classes and shorthand characters
function escapeRegExCharacters(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
And for use ascx :
<telerik:RadTextBox ID="txtSearchItems" runat="server" EmptyMessage="Search..." width="180px" BackColor="WhiteSmoke" autocomplete="off" onkeyup="filterList();" ></telerik:RadTextBox>
<telerik:RadTreeView ID="RadTreeViewMain" runat="server" EnableDragAndDrop="True" TabIndex="1" AccessKey="T"
EnableDragAndDropBetweenNodes="True" CollapseAnimation-Type="Linear" MultipleSelect="true"
CollapseAnimation-Duration="200" ExpandAnimation-Duration="200"
ExpandAnimation-Type="Linear" AllowNodeEditing="True" Skin="Telerik" >
</telerik:RadTreeView>
Thank you,
Dev
I have a radwindow in which I have putted an aspx page that contains a user control inside. the user control have a treeview and a RadTextBox control. I want the filter functionality for treeview nodes. When I type characters in search box, it will hide the nodes which does not contains that characters and matching characters in remaining nodes gets bold. I have made javascript functions for this and working fine. I wraps the matching characters with <b></b> tags with regular expression. Here problem I am facing is it is showing <b></b> instead of making matching characters bold. I used same in listbox and it is working fine. Any idea regarding this? The code is as below :
For Javascript :
function filterList() {
var treeview = $find("<%=RadTreeViewMain.ClientID%>");
var textbox = $find("<%=txtSearchItems.ClientID%>");
clearListEmphasis(treeview);
createMatchingList(treeview, textbox.get_textBoxValue());
}
// Remove emphasis from matching text
function clearListEmphasis(treeview)
{
var re = new RegExp("</{0,1}b>", "gi");
var itemText;
var allNodes = treeview.get_allNodes();
for (var i = 0; i < allNodes.length; i++) {
var node = allNodes[i];
itemText = node.get_text();
node.set_text(itemText.replace(re, ""));
//node.collapse();
}
}
// Emphasize matching text and hide non-matching items
function createMatchingList(treeview, filterText)
{
if (filterText != "") {
filterText = escapeRegExCharacters(filterText);
var re = new RegExp(filterText, "i");
var allNodes = treeview.get_allNodes();
for (var i = 0; i < allNodes.length; i++)
{
var node = allNodes[i];
var itemText = node.get_text();
if (itemText.match(re))
{
if (node.get_level() != 0)
{
var pNode = node.get_parent();
pNode.set_expanded(true);
pNode.set_visible(true);
}
node.set_text(itemText.replace(re, "<b>" + itemText.match(re) + "</b>"));
node.set_visible(true);
}
else {
node.set_visible(false);
}
}
}
else {
var allNodes = treeview.get_allNodes();
for (var i = 0; i < allNodes.length; i++) {
var node = allNodes[i];
var itemText = node.get_text();
node.set_visible(true);
node.set_expanded(false);
}
}
}
// Clears the text from the filter.
function clearFilterText() {
var textbox = $find("<%=RadTreeViewMain.ClientID%>");
textbox.clear();
}
// Escapes RegEx character classes and shorthand characters
function escapeRegExCharacters(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
And for use ascx :
<telerik:RadTextBox ID="txtSearchItems" runat="server" EmptyMessage="Search..." width="180px" BackColor="WhiteSmoke" autocomplete="off" onkeyup="filterList();" ></telerik:RadTextBox>
<telerik:RadTreeView ID="RadTreeViewMain" runat="server" EnableDragAndDrop="True" TabIndex="1" AccessKey="T"
EnableDragAndDropBetweenNodes="True" CollapseAnimation-Type="Linear" MultipleSelect="true"
CollapseAnimation-Duration="200" ExpandAnimation-Duration="200"
ExpandAnimation-Type="Linear" AllowNodeEditing="True" Skin="Telerik" >
</telerik:RadTreeView>
Thank you,
Dev