get_checkedNodes incorrect

[Antony]

Hi Everyone,

I have a treeview which has one root node and 2 child nodes each of whom has many children but they do not contain any children.
I have a button on the page which I would like to enable when a user has checked one of the nodes or disable if the user has unchecked all nodes.

I have added the following script:

function

 

 OnNodeChecked(sender,eventArgs) {

 

 

 

var tree = $find('rdtOutputColumns');

 

 

var button = $get("btnOK");

 

 

 

if (tree.get_checkedNodes().length > 0) {

 

 

button.disabled = false;

 

}

 

else {

 

button.disabled =

true;

 

}

}

This works fine for intially enabling the button when a user checks one or more of the child nodes but if previously checked nodes are unchecked then the get_checkedNodes().length reports that 1 node is still checked and so my button is never disabled again.

Has anybody got any ideas as to why the get_checkNodes() function is returning a node that is no longer checked?

Many thanks
Antony

[Veselin Vasilev]

Hi Antony,

I could not reproduce the problem locally.
Here is the video I captured for you.

What is different in your case?

Kind regards,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Antony]

Hi Veselin,

Thanks for the reply, there are a few things that are different.
1) I have a single root node which has children
2) I am using the load on demand via a webservice for all nodes except the Root node and it's immediate children
3) I am using Tristate checkboxes.
4) I have the CheckChildNodes=true

I have tracked the problem further, if I check one of the root node's immediate children the OK button is enabled, if I then uncheck the child node the OK button is not disabled again.

 if I remove the checkbox from the root node everything works fine,

Please see below for my page markup.

<

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

head id="Head1" runat="server">

 

 

<title>Choose Output Columns</title>

 

</

 

head>

 

<

 

body id="body" runat="server">

 

 

<form id="frmChooseOutputColumns" runat="server">

 

 

<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>

 

 

<telerik:RadAjaxPanel ID="rapChooseOutputColumns" runat="server" HorizontalAlign="NotSet">

 

 

<div class="outercontentcontainer">

 

 

<asp:Panel ID="pnlLastModified" runat="server" GroupingText="Choose" Width="100%">

 

 

<div class="innercontentcontainer">

 

 

<telerik:RadTreeView ID="rdtOutputColumns" MultipleSelect="True" runat="server" Height="350px"

 

 

Width="100%" CheckBoxes="True" CheckChildNodes="True" TriStateCheckBoxes="True"

 

 

PersistLoadOnDemandNodes="true"

 

 

OnClientNodePopulating="nodePopulating"

 

 

OnClientNodePopulated="nodePopulated"

 

 

OnClientNodeChecked ="nodeCheckboxStateChanged">

 

 

<ExpandAnimation Duration="100" />

 

 

<CollapseAnimation Duration="100" Type="OutQuint" />

 

 

</telerik:RadTreeView>

 

 

</div>

 

 

</asp:Panel>

 

 

<div style="text-align:right; width: 100%; padding-top:8px">

 

 

<asp:Button ID="btnOK" Text ="Ok" Enabled ="false" runat="server" OnClick ="btnOk_Click"

 

 

CssClass="button"/>&nbsp;&nbsp;<input type="button" class="button" id="Button1" runat="server" value="Cancel" onclick="closeWindow(null);" />

 

 

</div>

 

 

</div>

 

 

</telerik:RadAjaxPanel>

 

 

<script language="javascript" type="text/javascript">

 

 

function nodeCheckboxStateChanged(sender,eventArgs) {

 

 

var node = eventArgs.get_node()

 

 

if (node.get_checked()) {

 

 

if (!node.get_expanded()) {

 

 

// If parent node has been checked expand parent to show child nodes

 

 

// this will load children if they have not already been loaded

 

 

if ((node.get_expandMode() == 3) || (node.get_nodes().get_count() > 0)) {

 

node.expand();

}

}

}

 

 

var tree = $find('rdtOutputColumns');

 

 

var button = $get("btnOK");

 

 

 

if (tree.get_checkedNodes().length > 0) {

 

 

var checknodes = tree.get_checkedNodes();

 

button.disabled =

false;

 

}

 

else {

 

button.disabled =

true;

 

}

}

 

 

function nodePopulating(sender,eventArgs){

 

 

var node = eventArgs.get_node();

 

 

var context = eventArgs.get_context();

 

 

context[

"NodeLevel"] = node.get_attributes().getAttribute("NodeLevel");

 

context[

"NodeChecked"] = node.get_checked();

 

node.get_attributes().setAttribute(

"NodeChecked",node.get_checked());

 

}

 

 

function nodePopulated(sender, eventArgs){

 

 

var node = eventArgs.get_node();

 

 

var bChecked = node.get_attributes().getAttribute("NodeChecked");

 

 

if(node.get_checkable()){

 

node.set_checked(bChecked);

}

 

else{

 

hideCheckBoxElement(node);

}

 

 

var childnodes = node.get_nodes();

 

 

for(var i = 0; i < childnodes.get_count();i++){

 

 

var childnode = childnodes.getNode(i);

 

childnode.set_checkable(childnode.get_attributes().getAttribute(

"Checkable"));

 

 

if(childnode.get_checkable()){

 

childnode.set_checked(bChecked);

}

 

else{

 

hideCheckBoxElement(childnode);

}

childnode.scrollIntoView();

}

}

 

 

function hideCheckBoxElement(node){

 

 

var checkBoxElement = node.get_checkBoxElement();

 

 

if(checkBoxElement != null){

 

checkBoxElement.disabled =

true;

 

checkBoxElement.style.visibility =

'hidden';

 

checkBoxElement.style.display =

'none';

 

checkBoxElement.style.width =

"0px";

 

}

}

 

</script>

 

 

</form>

 

[Antony]

Hi Veselin

I have tracked the problem further, my root node and it's immediate children are preloaded, the children of the root child nodes are loaded via a web service.
If I check one of the Root Node children without expanding it first to load the children via the webservice, then the issue with get_checkedNodes occurs, if I expand the Root node child before checking it and then check the node the OK button is enabled/disabled as expected.

It therefore appears to be something to do with the LoadOnDemand that is causing this behaviour.

I hope this is sufficient information for you to be able to produce this locally.

Many thanks
Antony

[Antony]

Hi Veselin ,

I have submitted a sample project demonstrating this behaviour via support ticket no:213105

Many thanks
Antony

[Veselin Vasilev]

Hi Antony,

I have already replied to your support ticket:

Hello Antony,

Thank you for the provided project. I managed to reproduce the problem locally.
We will fix the problem in the next versions of the product.

In the meantime, I have modified your page with a fix so now it works correctly.

Please download it and give it a go.

Project

All the best,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Phil]

Was this bug addressed as of Q2 2010? I seem to be having the same kind of problem as I am getting an error that the "getNodes" function doesn't exists with the following script:

function AddButton_Click(sender, args)
{
     treeView = $find("<%= RadTreeView1.ClientID %>");
     nodes = treeView.get_checkedNodes();
     for (i = 0; i < nodes.length; i++)
     {
         node = nodes.getNode(i);
         alert(node.get_value(), node.get_text());
     }
}

[Phil]

Solved my initial problem by using an array value instead of the "getNode" function. However, I cant seem to find the function that will return the text. My code is as follows:

function AddButton_Click(sender, args)
{
     treeView = $find("<%= RadTreeView1.ClientID %>");
     nodes = treeView.get_checkedNodes();
     for (i = 0; i < nodes.length; i++)
     {
         node = nodes[i];
         alert(node.get_value(), node.get_text());
     }
}

Any one have any ideas?

[Phil]

My mistake. Can't pass two parameters in an alert. Problem solved.