Description:-
In this examplw we
explain that how to create Dynamic Treeview with checkbox in asp.net or create Dynamic treeview with checkbox in hierchy
format in asp.net.or treeview check uncheck all checkboxes using javascript without postback in asp.net.
In this example we include checkbox in treeview to select particular tree node or all tree node by selection of checkbox. Here we used javascript to avoid the postback of the checkbox when checkbox is checked.
You can also fetch all child tree node value by just selecting parent treenode using checkbox selection. Or also you can fetch the selected checkbox tree node value for performing insert,update,delete operation.
In this example we include checkbox in treeview to select particular tree node or all tree node by selection of checkbox. Here we used javascript to avoid the postback of the checkbox when checkbox is checked.
You can also fetch all child tree node value by just selecting parent treenode using checkbox selection. Or also you can fetch the selected checkbox tree node value for performing insert,update,delete operation.
Dynamically Bind Data in Ajax Accordion Panel Bind Data to Accordion from databse
Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user
Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user
Default2.aspx:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>TreeView
with checkbox in asp.net</title>
<script type="text/javascript">
function
OnTreeClick(evt) {
var
src = window.event != window.undefined ? window.event.srcElement : evt.target;
var
isChkBoxClick = (src.tagName.toLowerCase() == "input"
&& src.type == "checkbox");
if
(isChkBoxClick) {
if
(src.checked == true) {
var
nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;
var
nodeValue = GetNodeValue(getNextSibling(src));
document.getElementById("label").innerHTML += nodeText + ",";
}
else
{
var
nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;
var
nodeValue = GetNodeValue(getNextSibling(src));
var
val = document.getElementById("label").innerHTML;
document.getElementById("label").innerHTML = val.replace(nodeText
+ ",", "");
}
var
parentTable = GetParentByTagName("table",
src);
var
nxtSibling = parentTable.nextSibling;
//check
if nxt sibling is not null & is an element node
if
(nxtSibling && nxtSibling.nodeType == 1) {
//if
node has children
if
(nxtSibling.tagName.toLowerCase() == "div")
{
//check or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check
or uncheck parents at all levels
CheckUncheckParents(src, src.checked);
}
}
function
CheckUncheckChildren(childContainer, check) {
var
childChkBoxes = childContainer.getElementsByTagName("input");
var
childChkBoxCount = childChkBoxes.length;
for
(var i = 0; i < childChkBoxCount; i++) {
childChkBoxes[i].checked =
check;
}
}
function
CheckUncheckParents(srcChild, check) {
var
parentDiv = GetParentByTagName("div",
srcChild);
var
parentNodeTable = parentDiv.previousSibling;
if
(parentNodeTable) {
var
checkUncheckSwitch;
//checkbox
checked
if
(check) {
var
isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if
(isAllSiblingsChecked)
checkUncheckSwitch = true;
else
return; //do not need to check
parent if any(one or more) child not checked
}
else
//checkbox unchecked
{
checkUncheckSwitch = false;
}
var
inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
if
(inpElemsInParentTable.length > 0) {
var
parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked =
checkUncheckSwitch;
//do
the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}
function
AreAllSiblingsChecked(chkBox) {
var
parentDiv = GetParentByTagName("div",
chkBox);
var
childCount = parentDiv.childNodes.length;
for
(var i = 0; i < childCount; i++) {
if
(parentDiv.childNodes[i].nodeType == 1) {
//check
if the child node is an element node
if
(parentDiv.childNodes[i].tagName.toLowerCase() == "table")
{
var
prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are not checked, return false
if (!prevChkBox.checked) {
return false;
}
}
}
}
return
true;
}
//utility
function to get the container of an element by tagname
function
GetParentByTagName(parentTagName, childElementObj) {
var
parent = childElementObj.parentNode;
while
(parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
parent = parent.parentNode;
}
return
parent;
}
function
getNextSibling(element) {
var
n = element;
do
n = n.nextSibling;
while
(n && n.nodeType != 1);
return
n;
}
//returns
NodeValue
function
GetNodeValue(node) {
var
nodeValue = "";
var
nodePath = node.href.substring(node.href.indexOf(",")
+ 2, node.href.length - 2);
var
nodeValues = nodePath.split("\\");
if
(nodeValues.length > 1)
nodeValue =
nodeValues[nodeValues.length - 1];
else
nodeValue =
nodeValues[0].substr(1);
return
nodeValue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="trv_country_state_hierchy" runat="server"
ForeColor="Black"
Font-Size="13pt"
ShowCheckBoxes="All" OnClick="OnTreeClick(event)">
</asp:TreeView>
</div>
</form>
</body>
</html>
Default2.aspx.cs:-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
using System.Data;
using
System.Data.SqlClient;
public partial class Default2 : System.Web.UI.Page
{
SqlConnection
conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Demo;Integrated
Security=True");
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
PopulateTreeview();
}
}
private void PopulateTreeview()
{
try
{
DataSet
ds = new DataSet();
DataTable
dtparent = new DataTable();
DataTable
dtchild = new DataTable();
dtparent = FillParentTable();
dtparent.TableName = "A";
dtchild = FillChildTable();
dtchild.TableName = "B";
ds.Tables.Add(dtparent);
ds.Tables.Add(dtchild);
ds.Relations.Add("children", dtparent.Columns["country_id"],
dtchild.Columns["country_id"]);
if
(ds.Tables[0].Rows.Count > 0)
{
trv_country_state_hierchy.Nodes.Clear();
foreach
(DataRow masterRow in
ds.Tables[0].Rows)
{
TreeNode
masterNode = new TreeNode((string)masterRow["country"],
Convert.ToString(masterRow["country_id"]));
trv_country_state_hierchy.Nodes.Add(masterNode);
trv_country_state_hierchy.CollapseAll();
foreach
(DataRow childRow in
masterRow.GetChildRows("Children"))
{
TreeNode childNode = new TreeNode((string)childRow["state"],
Convert.ToString(childRow["country_id"]));
masterNode.ChildNodes.Add(childNode);
childNode.Value = Convert.ToString(childRow["state_id"]);
}
}
}
}
catch (Exception ex)
{
throw new Exception("Unable to populate treeview" +
ex.Message);
}
}
private DataTable FillParentTable()
{
DataTable
dt = new DataTable();
conn.Open();
string
cmdstr = "Select * from country_mst";
SqlCommand
cmd = new SqlCommand(cmdstr,
conn);
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
adp.Fill(dt);
conn.Close();
return
dt;
}
private DataTable FillChildTable()
{
DataTable
dt = new DataTable();
conn.Open();
string
cmdstr = "Select * from state_mst";
SqlCommand
cmd = new SqlCommand(cmdstr,
conn);
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
adp.Fill(dt);
conn.Close();
return
dt;
}
}
0 comments:
Post a Comment