This is a migrated thread and some comments may be shown as answers.

get_checkedNodes incorrect

8 Answers 199 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Antony asked on 15 May 2009, 03:45 PM

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

8 Answers, 1 is accepted

answered on 18 May 2009, 08:06 AM

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">

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

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

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

<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">

</telerik:RadTreeView>

</div>

</asp:Panel>

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

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

</div>

</telerik:RadAjaxPanel>

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>

answered on 18 May 2009, 09:12 AM

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