Click here to Skip to main content
15,897,094 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
C#
Hi all,

i have one douts about my application,

i have created one xml tree using jquery, for that i have some douts,

I have a checkbox on my tree view

1. For that when i tick my parent node then the entire sub child also ticked this is okay

2.  when i untick my parent node then the entire sub child also unticked this is also okay

3. But followed by the first option when am untick all the subchild then i want my  parent node also untick automatically

but this is not happen in my code

so please have a look at my code and let me know if i have done anything wrong.



HTML
HTML


<div>
    <style type="text/css">
        ul
        {
            margin-left: 0px;
            list-style: none;
            padding-left: 40px;
            margin-left: -20px;
            padding: 0 0 0 16px;
            margin: 0;
        }
        li
        {
            margin: 0;
            padding: 0px 0 5px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var xmlData = readXml('<%= ResolveUrl("~/XmlFiles/XMLFile.xml") %>');
            var sHTML = drawTreeFromXml(xmlData);
            document.getElementById("tree").innerHTML = sHTML;
        });
 
        function drawTreeFromXml(xmlData) {
            var html = "";
            var properties = xmlData.getElementsByTagName("properties");
            html += ""
            $(properties).each(function () {
                var department = $(this);
                var CustomerID = $(department).find("CustomerID").text();
                html += "<ul>";
                html += "<li><input type='checkbox'/><a href='javascript:;'>" + CustomerID + "</a>";
                html += "<ul>";
                var CompanyName = $(department).find("CompanyName").text();
                html += createElement(CompanyName);
                var ContactName = $(department).find("ContactName").text();
                html += createElement(ContactName);
                var ContactTitle = $(department).find("ContactTitle").text();
                html += createElement(ContactTitle);
                var Address = $(department).find("Address").text();
                html += createElement(Address);
                var City = $(department).find("City").text();
                html += createElement(City);
                var PostalCode = $(department).find("PostalCode").text();
                html += createElement(PostalCode);
                var Country = $(department).find("Country").text();
                html += createElement(Country);
                var Phone = $(department).find("Phone").text();
                html += createElement(Country);
                var Fax = $(department).find("Fax").text();
                html += createElement(Fax);
                html += "</ul></li></ul>";
            });
            return html;
        }
 
        function createElement(ElementValue) {
            return "<li><input type='checkbox'/><a href='javascript:;'>" + ElementValue + "</a></li>";
        }
        $("#tree input:checkbox").live('change', function () {
            if ($(this).nextAll('ul').length == 0) {
                if ($(this)[0].checked == false) {
                    $(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', false);
                } else {
                    if ($(this).closest('ul').parent().find('input:checkbox:checked').length == $(this).closest('ul').parent().find('input:checkbox').length - 1) {
                        $(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', true);
                    }
                }
            } else {
                if ($(this)[0].checked == true) {
                    $(this).nextAll('ul').find('input:checkbox').attr('checked', true);
                } else {
                    $(this).nextAll('ul').find('input:checkbox').attr('checked', false);
                }
            }
        });
 
 
        $('#tree a').live('click', function () {
            if ($(this).nextAll('ul').length != 0) {
                if ($(this).nextAll('ul').is(':visible')) {
                    $(this).nextAll('ul').hide();
                } else {
                    $(this).nextAll('ul').show();
                }
            }
        });
 
 
        function readXml(xmlFile) {
            var xmlDoc;
            if (typeof window.DOMParser != "undefined") {
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", xmlFile, false);
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType('text/xml');
                }
                xmlhttp.send();
                xmlDoc = xmlhttp.responseXML;
            }
            else {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.load(xmlFile);
            }
            return xmlDoc;
        }      
    </script>
    <div id="tree">
    </div>
</div>



XML
XMLFILE.xml:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed>
  <entry>
    <content>
      <properties>
        <CustomerID>ALFKI</CustomerID>
        <CompanyName>Alfreds Futterkiste</CompanyName>
        <ContactName>Maria Anders</ContactName>
        <ContactTitle>Sales Representative</ContactTitle>
        <Address>Obere Str. 57</Address>
        <City>Berlin</City>
        <PostalCode>12209</PostalCode>
        <Country>Germany</Country>
        <Phone>030-0074321</Phone>
        <Fax>030-0076545</Fax>
      </properties>
    </content>
  </entry>
  <entry>
    <content>
      <properties>
        <CustomerID>ANATR</CustomerID>
        <CompanyName>Ana Trujillo Emparedados y helados</CompanyName>
        <ContactName>Ana Trujillo</ContactName>
        <ContactTitle>Owner</ContactTitle>
        <Address>Avda. de la Constitución 2222</Address>
        <City>México D.F.</City>
        <PostalCode>05021</PostalCode>
        <Country>Mexico</Country>
        <Phone>(5) 555-4729</Phone>
        <Fax>(5) 555-3745</Fax>
      </properties>
    </content>
  </entry>
</feed>



thanks in advance.

What I have tried:

xml tree view using jquery checkbox not working
Posted
Updated 14-Feb-16 20:26pm

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900