Hello there,
I have seen this situation being addressed before, but my approach here is a bit different, hence, worth presenting (I think).
Overview:The situation is simple: a TreeView on left with some TextBox controls and a DropDownList on right to display particulars of a selected Node. My TV has only 2 levels: 17 Root Nodes (L0) and various LeafNodes (L1) per Root Node. TreeView and displaying block are placed inside 2 adjacent table cells.
Node
Text should come in 2 flavours: Arabic & English depending on user selected language/culture. Therefore, I used a global localised resource to hold among others language Name & Code. During population, culture-related resources are dynamically set and passed to DB query.
Since I also need to maintain Node ID (from DB), I'm storing it as Node's
Value. TV switches direction and works fine, fully localised.
Previously:With ASP TreeView leveraging solely server-side handlers things are straightforward. Upon Node selection,
SelectedNodeChanged was fired, through which I retrieve Node
Value &
ValuePath in order to pass to displaying block of controls. Once retrieved, I had to construct another DB query to retrieve remaining particulars of selected Node, like the Text in other language then fill associated TextBoxes and set DDL index to selected Node's parent ID in order to show parent Text.
However, due to annoying page reload on every pastback, I attempted using CallbackPanels but that wasn't successful. Then tried iFrames; worked but hated extra work for nothing.
Current:It was evident that the only way forward is Client Scripting. So, spent sometime reviewing your documentation, in particular, supported ClientSide features, which encouraged me to go ahead. Consequently, I began my quest by switching to EO TreeView due to the great collection of ClientSide functionalities it supports and the rich Client API available. you won't believe guys the outcome; even my tough Boss was pleased!
To start with, here is my TV declaration:
Code: HTML/ASPX
<eo:TreeView id="codesTV" runat="server" EnableViewState="false"
RaisesServerEvent="false" ClientSideOnItemClick="getSelectedInfo">
</eo:TreeView>
Although not required being the default, I kept the
RaisesServerEvent="false" for illustration purposes, and in case I wish to utilise it later on.
And the JS block:
Code: JavaScript
function getSelectedInfo(e, info)
{
var node = info.getItem();
var parent = info.getItemGroup().getParentItem();
var parentID = parent.getItemId();
var nodeID = node.getItemId();
var nodeText = node.getText();
var nodeValue = node.getValue();
passInfo(parentID, nodeID, nodeText, nodeValue);
}
function passInfo(pID, nID, nText, nValue)
{
document.getElementById('<%= recFlag.ClientID %>').value = "U";
document.getElementById('<%= codeCatDDL.ClientID %>').value = pID;
document.getElementById('<%= codeValue.ClientID %>').value = nID;
var activeLang = document.getElementById('<%= setCulture.ClientID %>').value;
var txtSplit = nText.split("-");
var txtOnly = txtSplit[1].slice(1);
var arDesc = "";
var enDesc = "";
if (activeLang == "ar")
{
arDesc = txtOnly;
enDesc = nValue;
}
else
{
enDesc = txtOnly;
arDesc = nValue;
}
document.getElementById('<%= arDesc.ClientID %>').value = arDesc;
document.getElementById('<%= enDesc.ClientID %>').value = enDesc;
}
With such approach, I had to revisit my Server-Side strategy, in particular, node population. The presence of
ItemID was indeed very helpful which I used to hold required Node ID, thus, freeing node's
Value property. That was a great catch.
Instead of querying DB to retrieve Text in other language as was the case before, I utilsed empty node's
Value to store said Text during Tree population, which resulted in dropping a significant server round-trip. With that accomplished, I have all needed info stored along with the Node, thus, no further need to server-side handling after the Tree is populated, which paved the road to only utilise Client Scripting to retrieve Node particulars (
getSelectedInfo) then pass them to displaying block of controls and assign them to subsequent control properties (
passInfo).
At present, a user can click a Node and view its particulars instantly on a fly--no postback or page/component reload; an achievement that wasn't possible without provided Client API, Objects and Methods, especially that little yet powerful object
NavigationItem:-)
Conclusion:If you can achieve a task via Client Scripting, go for it. Don't use Server-Side unless it is very necessary. Ditto with using asp Controls vs HTML counterparts.
Utilise your resources thoroughly and effectively. EO products are rich with features supporting both sides of the stream. Take your time to research and read a lot. Once mastered, you will be amazed how your handling of tasks will significantly improve.
That's said, I end up with the 2 populating routines I used. Hope you find them useful:
Code: Visual Basic.NET
Protected conn As OleDbConnection = setConnection()
Public actDesc As String = setDesc()
Public altDesc, sql As String
Public imgBase As String = "~/images/objects/tree/nodes/set1/"
...
Private Sub fillTree()
' Initialise Tree View and Set its Title
Dim tvIndex As UInt16
tvIndex = 1
tvTitle.Text = initEoTV(codesTV, tvIndex, conn)
codesTV.Nodes.Clear()
' Populate the Tree
populateLevel_0(codesTV)
End Sub
' ***** Populate LEVEL 0 Nodes
Private Sub populateLevel_0(ByVal thisTV As EO.Web.TreeView)
Try
thisTV.Nodes.Clear()
Dim L1data As New DataTable
Dim nodeFocus As String
If actDesc = "description_ar" Then
altDesc = "description_en"
Else
altDesc = "description_ar"
End If
sql = "SELECT maj_id, description_ar, description_en FROM t_Codes "
sql &= "WHERE min_id = 0 ORDER BY maj_id"
L1data = FetchData(sql, conn)
' Create Level nodes.
If L1data.Rows.Count > 0 Then
nodeFocus = "maj_id"
Dim row As DataRow
For Each row In L1data.Rows
Dim newNode As EO.Web.TreeNode = New EO.Web.TreeNode()
newNode.ItemID = row(nodeFocus)
newNode.Text = newNode.ItemID & "- " & row(actDesc)
newNode.Value = row(altDesc)
newNode.ImageUrl = imgBase & "cL1.png"
newNode.PopulateOnDemand = True
newNode.Selected = False
' Add the new Node
thisTV.Nodes.Add(newNode)
' Populate Child Nodes of current Node
populateLevel_1(newNode)
Next
End If
Catch ex As Exception
MsgBox(getMsgText(50, conn) & " [" & ex.ToString & "]", MsgBoxStyle.Exclamation, getMsgTitle(50, conn))
End Try
End Sub
' ***** Populate LEVEL 1 Nodes
Private Sub populateLevel_1(ByVal node As EO.Web.TreeNode)
Try
Dim L2data As New DataTable
Dim nodeFocus As String
If actDesc = "description_ar" Then
altDesc = "description_en"
Else
altDesc = "description_ar"
End If
sql = "SELECT maj_id, min_id, description_ar, description_en FROM t_Codes "
sql &= "WHERE min_id > 0 and maj_id = " & node.ItemID & " ORDER BY min_id"
L2data = FetchData(sql, conn)
' Create Level nodes.
If L2data.Rows.Count > 0 Then
nodeFocus = "min_id"
Dim row As DataRow
For Each row In L2data.Rows
Dim childNode As EO.Web.TreeNode = New EO.Web.TreeNode
childNode.ItemID = row(nodeFocus)
childNode.Text = childNode.ItemID & "- " & row(actDesc)
childNode.Value = row(altDesc)
childNode.ImageUrl = imgBase & "cL2.png"
childNode.EnsureVisible()
' Add the new Node to the ChildNodes collection of its Parent Node
node.ChildNodes.Add(childNode)
Next
End If
Catch ex As Exception
MsgBox(getMsgText(50, conn) & " [" & ex.ToString & "]", MsgBoxStyle.Exclamation, getMsgTitle(50, conn))
End Try
End Sub
Hope this helps.
Regards,
Saed Hamdan"Man may be destroyed but not defeated" -Hemmingway