I have a datatree with many nodes and child nodes. I use check boxes in a template. I have it set so that when you click on a node it expands and collapses. However when there is a child node that is checked I want to cancel the collapse method...
Can you help with this?
Hi Daryl007,
You can use something similar to this function for NodeCollapsing client-side event:
function WebDataTree1_NodeCollapsing(sender, eventArgs)
{
var node = eventArgs.getNode();
var childrenCount = node.get_childrenCount();
for (var i = 0; i < childrenCount; i++) {
if (node.get_childNode(i).get_checkState() == 1) {
eventArgs.set_cancel(true);
}
Let me know if this helps.
Okay i have some more info..
I am using this:
<script type="text/javascript" language="javascript"> function wdtGeneral_NodeCollapsing(sender, e) { //Gets the node object that is collapsing var node = e.getNode(); var childrenCount = node.get_childrenCount(); alert('nodes ' + childrenCount) for (var i = 0; i < childrenCount; i++) { alert(i) alert(node.get_childNode(i).get_checkState()) if (node.get_childNode(i).get_checkState() == 1) { e.set_cancel(true); } } } </script>the first alert gives me the childnode count.second alert always give me a 0 as does the third alert..could this because I am using a checkbox template in each node?
<Nodes> <ig:DataTreeNode Draggable="False" Droppable="False" Editable="Off" TemplateId="chkOne" Key="chkOne" Value="chkOne" CssClass="options" > <Template> <asp:CheckBox ID="chkOne" Text="This is check one" runat="server" CssClass="options" TabIndex="1" /> </Template> </ig:DataTreeNode>
Hello Daryl007,
The code will work if the CheckBoxMode is enabled for the WebDataTree. Set it to BiState or TriState and you should have the desired functionality. In this case you wouldn't need to use node templates with checkboxes.
Let me know if you have any questions.
Hi,
Thanks for the response. But I need to use templated checkboxes in this application.
Is there a way in the javascript to get deeper into the node to find out if the templated checkbox has been checked?
This could be achieved for example using jQuery:
function WebDataTree1_NodeCollapsing(sender, eventArgs){ var node = eventArgs.getNode().get_element(); var childNodes = $(node).children("ul.igdt_NodeGroup").children("li.igdt_NodeHolder"); for (var i = 0; i < childNodes.length; i++) { if (childNodes.find('[type=checkbox]')[i].checked) { eventArgs.set_cancel(true); } }}
Feel free to contact me if you have any questions.
thanks, I ran the code, and even clicking on a parent node. I get an error.
<script type="text/jscript" language="jscript"> function wdtGeneral_NodeCollapsing(sender, eventArgs) { var node = eventArgs.getNode().get_element(); var childNodes = $(node).children("ul.igdt_NodeGroup").children("li.igdt_NodeHolder"); for (var i = 0; i < childNodes.length; i++) { if (childNodes.find('[type=checkbox]')[i].checked) { eventArgs.set_cancel(true); } } } </script>Microsoft JScript runtime error: Object expected
childNodes is undefined.
Hello Daryl,
Let me know if you still need assistance with the matter.
Hi Daryl,
I could not reproduce this error using the code you have provided. Please make sure you have added a reference to jQuery. In order to be able to investigate this further I would need a complete sample website and the version of the controls you are using. Thank you.
<script type= "text/javascript" language= "javascript"> function wdtGeneral_NodeCollapsing(sender, eventArgs) { var currentNode = eventArgs.getNode(); var a = 0; for (var i = 0; i < $(currentNode.get_element()).find('[type=checkbox]').length; i++) { if ($(currentNode.get_element()).find('[type=checkbox]')[i].checked) { eventArgs.set_cancel(true); } } } </script>
<ig:WebTab ID="wtEvalOptions" runat="server" Height="538px" Width="100%" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" EnableTheming="False" StyleSetName="Default" Font-Bold="False"> <Tabs> <ig:ContentTabItem runat="server" Key="General" Text="General" Font-Names="Calibri" Font-Size="12pt"> <Template> <ig:WebDataTree ID="wdtGeneral" runat="server" EnableConnectorLines="True" EnableExpandImages="False" EnableExpandOnClick="True" Height="300px" SelectionType="Multiple" StyleSetName="Default" Width="90%" EnableTheming="False" CssClass="options"> <DragDropSettings EnableDropInsertion="False" EnableExpandOnDrop="False"> </DragDropSettings> <Nodes> <ig:DataTreeNode Draggable="False" Droppable="False" Editable="Off" TemplateId="chkCoEvaluate" Key="chkCoEvaluate" Value="chkCoEvaluate" CssClass="options" > <Template> <asp:CheckBox ID="chkCoEvaluate" Text="The CO is evaluating" runat="server" CssClass="options" TabIndex="1" /> </Template> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkTeams" Key="chkTeams" Value="chkTeams"> <Template> <asp:CheckBox ID="chkTeams" Text="Teams are used in this evaluation" runat="server" CssClass="options" TabIndex="2" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkTeamLeaders" Key="chkTeamLeaders" Value="chkTeamLeaders"> <Template> <asp:CheckBox ID="chkTeamLeaders" Text="Team leaders are evaluating" runat="server" CssClass="options" TabIndex="3" /> </Template> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkMessage" Key="chkMessage" Value="chkMessage"> <Template> <asp:CheckBox ID="chkMessage" Text="Messaging is enabled" runat="server" CssClass="options" TabIndex="4" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkTimerInterval" Key="chkTimerInterval" Value="chkTimerInterval"> <Template> <table> <tr> <td valign="middle"> <asp:CheckBox ID="chkTimerInterval" Text="interval to check for new messages" runat="server" CssClass="options" TabIndex="5" /> <asp:RadioButtonList ID="optTimerInterval" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="options" TabIndex="6" EnableTheming="False"> <asp:ListItem Text="3" Value="3">3 Min </asp:ListItem> <asp:ListItem Value="5">5 Min </asp:ListItem> <asp:ListItem Value="10">10 Min </asp:ListItem> <asp:ListItem Value="15">15 Min </asp:ListItem> </asp:RadioButtonList> </td> </tr> </table> </Template> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkAdvisor" Key="chkAdvisor" Value="chkAdvisor"> <Template> <asp:CheckBox ID="chkAdvisor" Text="Advisors are used in this evaluation" runat="server" CssClass="options" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkAdvView" Key="chkAdvView" Value="chkAdvView"> <Template> <asp:CheckBox ID="chkAdvView" Text="Advisors view other Advisors comments" runat="server" CssClass="options" /> </Template> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkAdvViewEval" Key="chkAdvViewEval" Value="chkAdvViewEval"> <Template> <asp:CheckBox ID="chkAdvViewEval" Text="Add view Evaluator comments" runat="server" CssClass="options" /> </Template> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkAdvEval" Key="chkAdvEval" Value="chkAdvEval"> <Template> <asp:CheckBox ID="chkAdvEval" Text="Advisor comments move to consensus" runat="server" CssClass="options" /> </Template> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkAdvRate" Key="chkAdvRate" Value="chkAdvRate"> <Template> <asp:CheckBox ID="chkAdvRate" Text="Advisors assign a rating" runat="server" CssClass="options" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkAdvRateShow" Key="chkAdvRateShow" Value="chkAdvRateShow"> <Template> <asp:CheckBox ID="chkAdvRateShow" Text="Show Advisor ratings" runat="server" CssClass="options" /> </Template> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkCommentRef" Key="chkCommentRef" Value="chkCommentRef"> <Template> <asp:CheckBox ID="chkCommentRef" Text="Evaluator comments must reference proposal" runat="server" CssClass="options" /> </Template> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkRndCons" Key="chkRndCons" Value="chkRndCons"> <Template> <asp:CheckBox ID="chkRndCons" Text="Show previous rounds comments in Consensus Module" runat="server" CssClass="options" /> </Template> </ig:DataTreeNode> </Nodes> <ClientEvents NodeCollapsing="wdtGeneral_NodeCollapsing" /> </ig:WebDataTree> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Key="Factors" Text="Factors" Font-Names="Calibri" Font-Size="12pt"> <Template> <br /> <ig:WebDataTree ID="wdtFactors" runat="server" EnableConnectorLines="True" EnableExpandImages="False" EnableExpandOnClick="True" Font-Size="10pt" Height="300px" SelectionType="Multiple" StyleSetName="Default" Width="90%" EnableAutoChecking="False" EnableTheming="False" ForeColor="Black" CssClass="options"> <Nodes> <ig:DataTreeNode Draggable="False" Droppable="False" Editable="Off" TemplateId="chkSubFactor" Key="chkSubFactor" Value="chkSubFactor"> <Template> <asp:CheckBox ID="chkSubFactor" Text="SubFactors are used in this evaluation" runat="server" CssClass="options" TabIndex="7"/> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkSubFactorRate" Key="chkSubFactorRate" Value="chkSubFactorRate"> <Template> <asp:CheckBox ID="chkSubFactorRate" Text="SubFactors are evaludated and assigned a rating" runat="server" CssClass="options" TabIndex="8" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkGroup" Key="chkGroup" Value="chkGroup"> <Template> <asp:CheckBox ID="chkGroup" Text="Groups are used in this evaluation" runat="server" CssClass="options" TabIndex="9" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkGroupReq" Text="chkGroupReq" Value="chkGroupReq"> <Template> <asp:CheckBox ID="chkGroupReq" Text="Groups are required" runat="server" CssClass="options" TabIndex="10" /> </Template> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> <ig:DataTreeNode Draggable="False" Droppable="False" Editable="Off" TemplateId="chkRisk" Key="chkRisk" Value="chkRisk"> <Template> <asp:CheckBox ID="chkRisk" Text="Risk is evaluated separately" runat="server" CssClass="options" TabIndex="11" /> </Template> </ig:DataTreeNode> </Nodes> <ClientEvents NodeCollapsing="wdtGeneral_NodeCollapsing" /> </ig:WebDataTree> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Key="PastPerformance" Text="Past Performance" Font-Names="Calibri" Font-Size="12pt"> <Template> <ig:WebDataTree ID="wdtPastPerformance" runat="server" EnableConnectorLines="True" EnableExpandImages="False" EnableExpandOnClick="True" Height="300px" SelectionType="Multiple" StyleSetName="Default" Width="90%" EnableAutoChecking="False" EnableTheming="False" CssClass="options"> <Nodes> <ig:DataTreeNode Draggable="False" Droppable="False" Editable="Off" TemplateId="chkPastPerf" Key="chkPastPerf" Value="chkPastPerf"> <Template> <asp:CheckBox ID="chkPastPerf" Text="Past Performance is evaluated." runat="server" CssClass="options" TabIndex="12" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkPastPerfRate" Key="chkPastPerfRate" Value="chkPastPerfRate"> <Template> <asp:CheckBox ID="chkPastPerfRate" Text="Overall past performance is assigned a rating." runat="server" CssClass="options" TabIndex="13" /> </Template> </ig:DataTreeNode> <ig:DataTreeNode TemplateId="chkAreaEval" Key="chkAreaEval" Value="chkAreaEval"> <Template> <asp:CheckBox ID="chkAreaEval" Text="Past Performance Areas (e.g. Recency, Relevancy, Quality) are evaluated." runat="server" CssClass="options" TabIndex="14" /> </Template> <Nodes> <ig:DataTreeNode TemplateId="chkAreaRate" Text="" Value="chkAreaRate"> <Template> <asp:CheckBox ID="chkAreaRate" Text="Past Performance Areas are assigned a rating." runat="server" CssClass="options" TabIndex="15" /> </Template> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> </Nodes> <ClientEvents NodeCollapsing="wdtGeneral_NodeCollapsing" /> </ig:WebDataTree> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Key="Reports" Text="Reports" Font-Names="Calibri" Font-Size="12pt"> <Template> <br /> <table width="100%"> <tr> <td align="center" valign="middle"> <asp:Label ID="Label1" runat="server" Text="Note: Changes made here will affect all Reports" Height="0.2188in" Width="3.8854in" BorderColor="Black" Font-Names="Lucida Sans" Font-Size="11pt" Font-Bold="True" ForeColor="Maroon" EnableTheming="False"></asp:Label> </td> </tr> </table> <br /> <table width="100%"> <tr> <td> <asp:Label ID="Label2" runat="server" Text="Reports Footer" Font-Names="Lucida Sans" Font-Size="11"></asp:Label> </td> </tr> <tr> <td> <ig:WebTextEditor ID="txtReportFooter" runat="server" Font-Names="Tahoma" Font-Size="12" Height="100px" StyleSetName="Default" Width="95%" BorderColor="#000000" BorderStyle="Solid" BorderWidth="1px" EnableTheming="False" TextMode="MultiLine" TabIndex="16"> </ig:WebTextEditor> </td> </tr> </table> </Template> </ig:ContentTabItem> </Tabs> </ig:WebTab>
Please attach your sample in order to be able to investigate this further. Thank you.
well, that is not quite working either..
On this line..
i < $(currentNode.get_element()).find('[type=checkbox]').length; I get an "jscript error -- error object expected"