Click here to Skip to main content
16,015,218 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi All,

C#
I have a doubt about my application. I have created an xml tree using jquery and I have a checkbox on my tree view.

For that when I tick my parent node then the entire sub child also get ticked and this is okay

When i untick my parent node then the entire sub child also unticked and this is also okay

But when I do 1. and then I untick all the subchilds then I want my parent node also untick automatically, but this is not happen in my code

Let me know if i have done anything wrong. Here is my code:



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>


What I have tried:

using jquery to show xml tree view
Posted

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



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