Search WebDataTree nodes using JavaScript

145

Michell J. Turley posted over 13 years ago

My existing WebDataTree uses server-side code to perform its Search function:

User enters search string in textbox; clicks "Search" button; code searches nodes for next occurrence of search string; click again, find next occurrence; until there are no more occurrences.

Due to the length of the tree, we're using Load On Demand, so there's really just the first layer of data being shown.

ASP.NET code:

ig:WebDataTree ID="tvwUserGroup" runat="server" CheckBoxMode="BiState" DataLoadingMessage="Loading ... Please be patient" EnableConnectorLines="True" EnableExpandOnClick="True" EnableSingleBranchExpand="True" Height="600px" InitialDataBindDepth="2" InitialExpandDepth="2" Width="300px">

<ig:DataTreeNodeBinding DataMember="drGroups" TextField="Name" ValueField="Guid" />

</DataBindings>

</ig:WebDataTree>

cs Code for Search:

protected void btnSearchUserGroup_Click(object sender, EventArgs e)

{

if (btnSearchUserGroup.Text == "Search")

{

mFoundCurrentIndex = 0;

ViewState[

"mFoundCurrentIndex"] = mFoundCurrentIndex;

FindNodesUserGroups();

}

// end if

else if (btnSearchUserGroup.Text == "Find Next")

{

if (ViewState["mFoundCurrentIndex"] != null)

mFoundCurrentIndex = (

int)ViewState["mFoundCurrentIndex"];

mFoundCurrentIndex += 1;

ViewState[

"mFoundCurrentIndex"] = mFoundCurrentIndex;

FindNext(tvwUserGroups.Nodes);

}

// end else if

}

// end method btnSearchUserGroup_Click

private void FindNodesUserGroups()

{

string searchFor = "";

searchFor = txtSearchUserGroup.Text;

DataTreeNodeCollection pNodes = new DataTreeNodeCollection();

pNodes = tvwUserGroups.Nodes;

if (searchFor.Length > 0)

{

mFoundNodes = WalkTree(searchFor, pNodes);

if (mFoundNodes.Count > 1)

{

btnSearchUserGroup.Text =

"Find Next";

lblUserSearchResults.Text = mFoundNodes.Count +

" results found";

}

else

{

btnSearchUserGroup.Text =

"Search";

}

// end else

FindNext(pNodes);

}

// end if

else

return;

}

// end method FindNodes

private void FindNext(DataTreeNodeCollection pNodes)

{

DataTreeNode foundNode = new DataTreeNode();

string foundNodeText = "";

if (mFoundNodes == null)

FindNodesUserGroups();

if (mFoundCurrentIndex >= -1)

{

if (mFoundNodes != null && mFoundNodes.Count - 1 >= mFoundCurrentIndex)

{

foundNode = (

DataTreeNode)mFoundNodes[mFoundCurrentIndex];

foundNodeText = foundNode.Text;

for (int i = 0; i < pNodes.Count; i++)

{

if (pNodes[i].Text == foundNodeText)

{

pNodes[i].Selected =

true;

pNodes[i].Expanded =

true;

pNodes[i].CheckState =

CheckBoxState.Checked;

return;

}

// end if

else

{

pNodes[i].Selected =

false;

pNodes[i].CheckState =

CheckBoxState.Unchecked;

}

// end else

FindNext(pNodes[i].Nodes);

}

// end for

}

// end if

else

{

btnSearchUserGroup.Text =

"Search";

lblUserSearchResults.Text =

"No further results found.";

ViewState[

"mFoundCurrentIndex"] = null;

for (int i = 0; i < pNodes.Count; i++)

{

pNodes[i].CheckState =

CheckBoxState.Unchecked;

pNodes[i].Selected =

false;

FindNext(pNodes[i].Nodes);

}

// end for

}

// end else

}

// end if

}

// end method FindNext

private ArrayList WalkTree(string searchFor, DataTreeNodeCollection pNodes)

{

ArrayList oRet;

ArrayList iTemp;

oRet =

new ArrayList();

foreach (DataTreeNode node in pNodes)

{

if (node.Text.ToLower().Contains(searchFor.ToLower()))

oRet.Add(node);

iTemp = WalkTree(searchFor, node.Nodes);

oRet.AddRange(iTemp.ToArray());

}

// end foreach

return oRet;

}

// end method WalkTree

I've been able to work this on client-side using a regular asp:TreeView, but I see that the HTML Source for the asp:TreeView translates to a table, while the WebDataTree is an unordered list. I also see that the asp:TreeView uses actual "<input type='checkbox'>" tags for its checkboxes, while the WebDataTree uses <img> tags.

Any ideas on how to make this work on client-side?

Thanks,

Michell

145

Suggested Answer
Michell J. Turley posted over 13 years ago

Believe it or not, I actually figured this one out on my own.

By the way, I apologize for all the white spa

I used the followig JavaScript to walk the tree and find each entry that matched my searchString. Note that I've added a couple of <asp:Hidden> controls to keep track of how far down the tree the search had gotten and when the search of the tree was complete:

function
UserGroupSearch() {

var searchString = document.getElementById('<%= txtSearchUserGroup.ClientID %>').value.toLowerCase();

var objTree = document.getElementById('<%= tvwUserGroups.ClientID %>');

var liArray = objTree.getElementsByTagName("LI");

var itemCount = document.getElementById('<%= hdnCounter.ClientID %>').value;

if (itemCount == "") {
itemCount = -1;

document.getElementById(

'<%= hdnCounter.ClientID %>').value = itemCount;
}

for (var i = 1; i <= liArray.length; i++) {

if (parseInt(itemCount) < i && i < liArray.length) {

var liItem = liArray[i].outerText.toLowerCase();

if (liItem.indexOf(searchString) > -1) {
itemCount = i;

document.getElementById(

'<%= hdnCounter.ClientID %>').value = itemCount;
document.getElementById(

"SearchUserGroup").value = "Find Next";
document.getElementById(

'<%= hdnComplete.ClientID %>').value = "";
liArray[i].style.backgroundColor =

"lightBlue";

break;
}

// end if

}

// end if

else {

if (i == liArray.length) {
document.getElementById(

'<%= hdnComplete.ClientID %>').value = "Complete";
}

else

{
document.getElementById(

'<%= hdnComplete.ClientID %>').value = "";
liArray[i].style.backgroundColor =

"transparent";

} // end else

}

// end else

}

// end for

if (document.getElementById('<%= hdnComplete.ClientID %>').value == "Complete") {
document.getElementById(

"SearchUserGroup").value = "Search";
document.getElementById(

'<%= hdnCounter.ClientID %>').value = "";
}

document.getElementById(

'<%= txtSearchIndex.ClientID %>').value = itemCount.toString();
Cancel
Reply

Reject Answer

Cancel