Treeview with Checkboxes using Javascript
Treeview with Checkboxes using javascript
with two button controls "select all" and deselect all in asp.net 4.0. When selectall button is clicked all the treeview checkbox will be checked when deselect all button is clicked all the treeview checkbox will be deselected. Learn Treeview with Checkboxes using Javascript
About Treeview with Checkboxes using Javascript
step1:
Start- visual studio 2010-new project-visual C# -web application
step2:
open default.aspx design view place a treeview controltwo button controls
default.aspx
< div >
<input id="Button1" type="button" value="Select All" onclick="Button1_onclick()"/>
<input id="Button2" type="button" value="Deselect All" onclick="return Button2_onclick()"/>
<asp:TreeView ID="TreeView11" runat="server" ShowCheckBoxes="All">
<Nodes>
<asp:TreeNode Text="Red" Value="Red">
<asp:TreeNode Text="Blue" Value="Blue">
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Green" Value="Green">
<asp:TreeNode Text="Yellow" Value="Yellow"> </asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="White" Value="White">
<asp:TreeNode Text="Black" Value="Black">
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
To Provide multi node selection in the treeview
Check boxes can be displayed beside each node by setting the ShowCheckBoxes property value
<asp:TreeView ID="TreeView11" runat="server" ShowCheckBoxes="All">
ShowCheckBoxes="All"
displays check box for all the nodes in the TreeView control.
in the head section
add the javascript functions
function Button1_onclick() {
var inputs = document.forms[0].elements;
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
function Button2_onclick() {
var inputs = document.forms[0].elements;
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}