I was working on a task where I was using Telerik RAD
TreeView Control in an ASP.Net Ajax Enabled Web page. I faced a small problem and found a solution for it which I think might be helpful and saves some time if you face the same problem
Here is the scenario of the problem:
- I was working with Ajax CallBacks and not Postbacks
- I wanted to enable multiple checkboxes selection on the RAD TreeView
- The treeview load with the load-on-demand concept. Which means the
first node is loaded and rendered an OnExpand, the child nodes are loaded from
DB using the expanded node ID. The initial state starts with only one node.
- After checking some nodes and hitting the OK button, the tvLocations1.CheckedNodes.Count property returned Zero at the server.
- I tried setting the AutoPostBackOnCheck property to true, the Tree posts back setting itself to its initial state (with only one node)
To ovecome being unable to read the checked nodes in the
server, I thought of this solution:
- Adding 3 hidden fields in the page to hold the checked nodes texts,
levels and values
<asp:HiddenField ID="hfSelectedNodeText" runat="server" />
<asp:HiddenField ID="hfSelectedNodeLevel" runat="server" />
<asp:HiddenField ID="hfSelectedNodeValue" runat="server" />
- Adding a script function to AfterClientCheck event that uses string concatenation to add the checks and unchecked nodes to the hidden fields
AfterClientCheck="AfterCheck"
function AfterCheck1(node)
{
if (node.Checked)
{
document.getElementById("<%= hfSelectedNodeText.ClientID%>").value += node.Text + '$';
document.getElementById("<%= hfSelectedNodeLevel.ClientID%>").value += node.Level + '$';
document.getElementById("<%= hfSelectedNodeValue.ClientID%>").value += node.Value + '$';
}
else
{
document.getElementById("<%= hfSelectedNodeText.ClientID%>").value = document.getElementById("<%= hfSelectedNodeText.ClientID%>").value.replace(node.Text+'$', "");
document.getElementById("<%= hfSelectedNodeLevel.ClientID%>").value = document.getElementById("<%= hfSelectedNodeLevel.ClientID%>").value.replace(node.Level+'$', "");
document.getElementById("<%= hfSelectedNodeValue.ClientID%>").value = document.getElementById("<%= hfSelectedNodeValue.ClientID%>").value.replace(node.Value+'$', "");
}
}
- Reading the hidden fields from code behind in the Ok button OnClick event and splitting the value of the fields into string array:
string[] nodesText = SplitString(hfSelectedNodeText.Value);
string[] nodesLevel = SplitString(hfSelectedNodeLevel.Value);
string[] nodesValue = SplitString(hfSelectedNodeValue.Value);
Split Method (Server-Side):
private string[] SplitString(string sText)
{
string[] splittedArray = sText.Split(char.Parse('$'));
return splittedArray;
}
- Note that each array contains an empty element at the end as the last character is $
and the split string after it is empty string. This issue can be overcome by
looping on the array.Length – 1 like this:
for (int i = 0; i < nodesText.Length - 1; i++)
{
//your code here
}
Hope this was useful...
