Master Pages, Themes and Navigation Controls

Re: Treeview with check boxes in an update panel

maduranga001 — Wed, 08 Oct 2008 04:55:05 GMT

yes.I mean in firefox.I think we cant enable javbascript for treeview.How ever still I have the same issue.I am using Visual studio 2008 with SP 1.

Thanks

Re: Treeview with check boxes in an update panel

Hong-Gang Chen - MSFT — Wed, 08 Oct 2008 01:10:43 GMT

Sorry, I mean enable JavaScript in FireFox, not the ThreeView.

Re: Treeview with check boxes in an update panel

maduranga001 — Tue, 07 Oct 2008 04:14:50 GMT

Yes.I have enabled JavaScript.Please see my .aspx file here.I have use an update panel.If user click on a check box, label's text should be change without refreshing the page.(Used Ajax update panel).Then I have used a JavaScript.If I use this then i cant expand tree nodes.Please see my code and help me to solve this problem.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SearchStep2.aspx.cs" Inherits="Search_SearchStep2" EnableEventValidation="true" %>

<%@ Register src="../usercontrols/searchWizard.ascx" tagname="searchWizard" tagprefix="uc1" %>

<%@ Register src="../usercontrols/searchFooter.ascx" tagname="searchFooter" tagprefix="uc1" %>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>

<script type="text/javascript">
     function PostbackOnCheck()
    {

       // var isNav = (window.navigator.appName.toLowerCase().indexOf("netscape")>=0);
        //var o;
        //if (isNav && e != null)
       // o = e.target;
       // else
       // o = window.event.srcElement;
        //if (o.tagName == 'INPUT' && o.type == 'checkbox' && o.name != null && o.name.indexOf('CheckBox') > -1)
        __doPostBack('<%=treeview1.ClientID%>',"");
    }

        function OnTreeClick(evt)
                    {

                   __doPostBack('<%=treeview1.ClientID%>',"");

                    var src = window.event != window.undefined ? window.event.srcElement : evt.target;
                    var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
                    if(isChkBoxClick)
                    {



                    var parentTable = GetParentByTagName("table", src);
                    var nxtSibling = parentTable.nextSibling;
                    if(nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node
                    {
                    if(nxtSibling.tagName.toLowerCase() == "div") //if node has children
                    {
                    //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;

                    if(check) //checkbox checked
                    {
                    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 TreeviewExpandCollapseAll(treeViewId, expandAll)
         {

             __doPostBack();

              var displayState = (expandAll == true ? "none" : "block");
              var treeView = document.getElementById(treeViewId);
              if(treeView)
              {
                  var treeLinks = treeView.getElementsByTagName("a");
                  var nodeCount = treeLinks.length;

                  for(i=0;i<nodeCount;i++)
                  {
                       if(treeLinks[i].firstChild.tagName)
                       {
                           if(treeLinks[i].firstChild.tagName.toLowerCase() == "img")
                           {
                               var currentToggleLink = treeLinks[i];
                               var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
                               if (childContainer.style.display == displayState)
                                {
                                   eval(currentToggleLink.href);
                                }
                          }
                       }
                  }//for loop ends
              }
        }

         //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 expandAll(treeViewId)
    {
         var treeView = document.getElementById(treeViewId);
         var treeLinks = treeView.getElementsByTagName("a");
         var j = true;

         __doPostBack();
        // __doPostBack('<%=treeview1.ClientID%>',"");

         for(i=0;i<treeLinks.length;i++)
         {
              if(treeLinks[i].firstChild.tagName == "IMG")
              {
                var node = treeLinks[i];
                var level = parseInt(treeLinks[i].id.substr(treeLinks[i].id.length - 1),10);
                var childContainer = document.getElementById(treeLinks[i].id + "Nodes");

               if(j)
                {
                    if(childContainer.style.display == "none")
                    TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'r',childContainer);
                    j = false;
                }
                else
                {
                    if(childContainer.style.display == "none")
                    TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'l',childContainer);
                }
              }
          }
   }

</script>

    <style type="text/css">
        #Search
        {
            height: 170px;
        }
        #DropDown
        {
            height: 35px;
            width: 799px;
            top: 303px;
            left: 8px;
            position: absolute;
        }
        #Menus
        {
            height: 86px;
            width: 794px;
        }
        #divtree
        {
            width: 798px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>

<asp:UpdatePanel ID="upanel1" runat="server">
         <Triggers>
       <%--<asp:PostBackTrigger ControlID="treeview1" />--%>
                 <asp:AsyncPostBackTrigger ControlID="treeview1" EventName="TreeNodeCheckChanged" />
        </Triggers>
    <ContentTemplate>

    <div style="border: thin solid #000080; width: 769px">

        <div style="text-align:right; width: 793px; height: 6px;">
         <asp:Label ID="Label1" runat="server" Text="LIVE COUNT" Font-Size="Larger"
            ForeColor="#990000"></asp:Label> 
        <asp:Label ID="lblLivecount" runat="server" Font-Size="Larger"
            ForeColor="#990000">0</asp:Label>
    </div>
        <div id="Menus">
            <asp:Button ID="Button6" runat="server" BackColor="#99FF33"
                BorderColor="#66FF33" ForeColor="#003300" Height="39px" Text="Button"
                Width="186px" />
    <uc1:searchWizard ID="searchWizard1" runat="server" />
</div>


        <div id = "FilterOptions"
            style="border: medium solid #800000; width: 397px; height: 93px; margin-left: 399px; margin-top: 0px; position: relative; top: 1px; left: -18px;">
            <b>Filter Options</b><br />
            Keyword Search 
            <asp:TextBox ID="TextBox4" runat="server" style="margin-left: 1px"
                Width="160px"></asp:TextBox>
 <asp:Button ID="Button4" runat="server" Text="Find It" Height="24px"
                style="margin-left: 1px" />
            <br />
            Postcode Search 
            <asp:TextBox ID="TextBox5" runat="server" style="margin-left: 1px" Width="79px"></asp:TextBox>
            <asp:TextBox ID="TextBox6" runat="server"
                style="margin-left: 3px" Width="72px"></asp:TextBox>
 <asp:Button ID="Button5" runat="server" Text="Find It" Height="24px" />
            <br />
        </div>

<br />
<br />

<div ID="divtree" runat="server" >
<div style="border:medium solid #800000; width:38%; float:left; height: 332px;">
</div>
<div style="border-style: solid; border-color: #800000; width:62%; height: 334px; margin-top: 0px;">

        <div id="DropDown" align="right">
             <asp:DropDownList ID="ddlSearchtype" runat="server" Height="20px" Width="205px"
                 AutoPostBack="True"
                 onselectedindexchanged="ddlSearchtype_SelectedIndexChanged" >
                 <asp:ListItem Selected="True" Value="1">View By Region</asp:ListItem>
                 <asp:ListItem Value="2">View By Postal Area</asp:ListItem>
                 <asp:ListItem Value="3">View By Town</asp:ListItem>
             </asp:DropDownList>
        </div>
       <asp:TreeView ID="treeview1" ShowCheckBoxes="All" EnableClientScript="true"
              runat="server" ShowLines="true"
            ontreenodecheckchanged="treeview1_TreeNodeCheckChanged"
           onclick="javascript:OnTreeClick()" ontreenodeexpanded="treeview1_TreeNodeExpanded" Width="481px"
            Height="323px" ShowExpandCollapse="true" >
        </asp:TreeView> <%--__doPostBack() TreeviewExpandCollapseAll('treeview1',true) OnTreeClick() TreeviewExpandCollapseAll() onselectednodechanged="javascript:OnTreeClick()" ShowExpandCollapse="true"--%>

          <a href="javascript:TreeviewExpandCollapseAll('<%=treeview1.ClientID%>', true)">Expand All</a>

</div>

</div>
        <div id="div44" runat="server" style="width: 797px">
    <uc1:searchFooter ID="searchFooter1" runat="server" />
    </div>

    </div>
    </ContentTemplate>
</asp:UpdatePanel>

    </form>
    </body>
</html>

Re: Treeview with check boxes in an update panel

Hong-Gang Chen - MSFT — Tue, 07 Oct 2008 01:50:34 GMT

maduranga001:

I cant expand my tree view nodes in FIrefox.But it is working properly in IE 6.Please give me your support.Sometimes there may bea javascript solution.

Have you enable JavaScript in the FireFox?

Re: Treeview with check boxes in an update panel

maduranga001 — Mon, 06 Oct 2008 06:39:59 GMT

I cant expand my tree view nodes in FIrefox.But it is working properly in IE 6.Please give me your support.Sometimes there may bea javascript solution.

Thank you

Re: Treeview with check boxes in an update panel

Hong-Gang Chen - MSFT — Mon, 06 Oct 2008 02:16:28 GMT

Hi maduranga001,

Please check the browsers in advance, does the browsers enable the JavaScript?

Re: Treeview with check boxes in an update panel

maduranga001 — Fri, 03 Oct 2008 13:26:59 GMT

HI max,

what do you mean by tied the event...Does it mean that we i dnt to register the event in the treeview...i have already code the event in the treeview itself ...as below

<asp:TreeView ID="treeview1" ShowCheckBoxes="All"
             EnableViewState="true" runat="server" ShowLines="true"
            Width="481px" Height="323px " onclick="javascript:postBackCheckBox()" ontreenodecheckchanged="treeview1_TreeNodeCheckChanged" ontreenodeexpanded="treeview1_TreeNodeExpanded" >
       <SelectedNodeStyle Font-Underline="true" Font-Bold="true"/>
       </asp:TreeView>

-------JS that i use---

function PostbackOnCheck()
    {

              __doPostBack('<%=treeview1.ClientID%>',"");
    }

-------------------------------------------------------------------------

This code works well with IE6,Mozilla and IE7.. but..in IE6 and Mozilla ontreenodeexpanded event is not working...Can u please send me the javascript code to trgigger the ontreenodeexpanded event on Mozilla and IE7...

I have no prob with IE6....Issue is with Other browsers..

I will warmly appreciate ur help ..i you cn assist me to get rid of this issue

Thanks..

Prasad.

Re: Treeview with check boxes in an update panel

bullpit — Fri, 03 Oct 2008 12:37:35 GMT

I hope you have tied this event with the TreeView.

Re: Treeview with check boxes in an update panel

maduranga001 — Fri, 03 Oct 2008 05:44:30 GMT

Thank you Max.That is the Javascript I am using.And I have done that code.like this.

     protected void treeview1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
    {
        //uncheking parent node
        if (e.Node.Checked == false)
        {
            if (e.Node.Parent != null)
                e.Node.Parent.Checked = false;
        }
        #region treetype="county"
        if (Session["treetype"].ToString() == "county")
        {
            #region set checkbox state

            string value = e.Node.Value.ToString();
            if (e.Node.ChildNodes.Count > 0)
            {
                int regions_count = e.Node.ChildNodes.Count;
                for (int i = 0; i < regions_count; i++)
                {
                    //set checkbox status in Regions
                    e.Node.ChildNodes[i].Checked = e.Node.Checked;
                    if (e.Node.ChildNodes[i].ChildNodes.Count > 0)
                    {
                        int county_count = e.Node.ChildNodes[i].ChildNodes.Count;
                        for (int j = 0; j < county_count; j++)
                        {
                            //set checkbox status in Counties
                            e.Node.ChildNodes[i].ChildNodes[j].Checked = e.Node.Checked;

                            if (e.Node.ChildNodes[i].ChildNodes[j].ChildNodes.Count != 0)
                            {
                                int postArea_count = e.Node.ChildNodes[i].ChildNodes[j].ChildNodes.Count;
                                for (int k = 0; k < postArea_count; k++)
                                {
                                    //set checkbox status in Postal Area
                                    e.Node.ChildNodes[i].ChildNodes[j].ChildNodes[k].Checked = e.Node.Checked;
                                }
                            }
                        }
                    }
                }
            }
            #endregion

            #region looping all tree nodes
            ArrayList RegionIDs = new ArrayList();
            ArrayList countyIDs = new ArrayList();

            int livecount = 0;

            for (int j = 0; j < 4; j++)//j=0 England,j=1 Scotland j=2,j=3 Wales,
            {
                int regionCount = treeview1.Nodes[j].ChildNodes.Count;//regionCount------->no of regions in the country j
                for (int k = 0; k < regionCount; k++)
                {
                    if (treeview1.Nodes[j].ChildNodes[k].Checked == true)//region is checked ..and no need to check the counties
                    {
                        RegionIDs.Add(treeview1.Nodes[j].ChildNodes[k].Value);
                        string strcount = treeview1.Nodes[j].ChildNodes[k].Text;
                        string[] arr = strcount.Split('[');
                        string[] arr2 = arr[1].Split(']');
                        livecount += int.Parse(arr2[0].ToString());
                    }
                    else
                    {
                        int countyCount = treeview1.Nodes[j].ChildNodes[k].ChildNodes.Count;//countyCount------->no of counties in the Region k
                        for (int l = 0; l < countyCount; l++)
                        {
                            if (treeview1.Nodes[j].ChildNodes[k].ChildNodes[l].Checked == true)//county is checked ..and no need to check the postal area
                            {
                                countyIDs.Add(treeview1.Nodes[j].ChildNodes[k].ChildNodes[l].Value);
                                string strcount = treeview1.Nodes[j].ChildNodes[k].ChildNodes[l].Text;
                                string[] arr = strcount.Split('[');
                                string[] arr2 = arr[1].Split(']');
                                livecount += int.Parse(arr2[0].ToString());
                            }
                        }
                    }
                }
            }

            Session["RegionIDs"] = RegionIDs;
            Session["countyIDs"] = countyIDs;

            lblLivecount.Text = livecount.ToString();
            Session["livecount_step2"] = livecount.ToString();

            #endregion
        }
        #endregion
        #region treetype="postal area"
        else if (Session["treetype"].ToString() == "postal area")
        {
            #region set checkbox state

            string value = e.Node.Value.ToString();
            if (e.Node.ChildNodes.Count > 0)
            {
                int postalArea_count = e.Node.ChildNodes.Count;
                for (int i = 0; i < postalArea_count; i++)
                {
                    //set checkbox status in Postal Area
                    e.Node.ChildNodes[i].Checked = e.Node.Checked;
                    if (e.Node.ChildNodes[i].ChildNodes.Count > 0)
                    {
                        int postal_district_count = e.Node.ChildNodes[i].ChildNodes.Count;
                        for (int j = 0; j < postal_district_count; j++)
                        {
                            //set checkbox status in Postal Districts
                            e.Node.ChildNodes[i].ChildNodes[j].Checked = e.Node.Checked;

                            if (e.Node.ChildNodes[i].ChildNodes[j].ChildNodes.Count != 0)
                            {
                                int postalSectors_count = e.Node.ChildNodes[i].ChildNodes[j].ChildNodes.Count;
                                for (int k = 0; k < postalSectors_count; k++)
                                {
                                    //set checkbox status in Postal sector
                                    e.Node.ChildNodes[i].ChildNodes[j].ChildNodes[k].Checked = e.Node.Checked;
                                }
                            }
                        }
                    }
                }
            }
            #endregion

            #region looping all tree nodes
            ArrayList PostalAreas = new ArrayList();
            ArrayList PostalDistricts = new ArrayList();
            ArrayList PostalDistricts_initial = new ArrayList();
            int livecount = 0;
            int noofpostalAReas = 0;
            noofpostalAReas = treeview1.Nodes[0].ChildNodes.Count;
            for (int j = 0; j < noofpostalAReas; j++)//looping all the tree nodes
            {
                if (treeview1.Nodes[0].ChildNodes[j].Checked == true)//postal area is checked ..and no need to check the postal districts
                {
                    PostalAreas.Add(treeview1.Nodes[0].ChildNodes[j].Value);
                    string strcount = treeview1.Nodes[0].ChildNodes[j].Text;
                    string[] arr = strcount.Split('[');
                    string[] arr2 = arr[1].Split(']');
                    if (arr2[0].ToString() != "")
                        livecount += int.Parse(arr2[0].ToString());
                }
                else
                {
                    int postalDistrictsCount = 0;
                    postalDistrictsCount = treeview1.Nodes[0].ChildNodes[j].ChildNodes.Count;

                    for (int k = 0; k < postalDistrictsCount; k++)
                    {
                        if (treeview1.Nodes[0].ChildNodes[j].ChildNodes[k].Checked)
                        {
                            PostalDistricts.Add(treeview1.Nodes[0].ChildNodes[j].ChildNodes[k].Value);
                            PostalDistricts_initial.Add(treeview1.Nodes[0].ChildNodes[j].ChildNodes[k].Value);
                            string strcount = treeview1.Nodes[0].ChildNodes[j].ChildNodes[k].Text;
                            string[] arr = strcount.Split('[');
                            string[] arr2 = arr[1].Split(']');
                            livecount += int.Parse(arr2[0].ToString());
                        }
                    }
                }
            }

            Session["PostalAreas"] = PostalAreas;
            Session["PostalDistricts"] = PostalDistricts;
            Session["PostalDistricts_step2"] = PostalDistricts;
            Session["PostalDistricts_Initial"] = PostalDistricts_initial;
            lblLivecount.Text = livecount.ToString();
            Session["livecount_step2"] = livecount.ToString();
            #endregion
        }
        #endregion
        #region treetype="town"
        else if (Session["treetype"].ToString() == "town")
        {
            #region set checkbox state

            if (e.Node.ChildNodes.Count > 0)
            {
                int alphebetical_count = e.Node.ChildNodes.Count;
                for (int i = 0; i < alphebetical_count; i++)
                {

                    e.Node.ChildNodes[i].Checked = e.Node.Checked;
                    if (e.Node.ChildNodes[i].ChildNodes.Count > 0)
                    {
                        int town_count = e.Node.ChildNodes[i].ChildNodes.Count;
                        for (int j = 0; j < town_count; j++)
                        {

                            e.Node.ChildNodes[i].ChildNodes[j].Checked = e.Node.Checked;
                        }
                    }
                }
            }
            #endregion

            #region looping all tree nodes
            ArrayList Towns = new ArrayList();
            ArrayList TownsFirstLetters = new ArrayList();

            int livecount = 0;
            int Alphebetical = 0;
            Alphebetical = treeview1.Nodes[0].ChildNodes.Count;
            for (int j = 0; j < Alphebetical; j++)//looping all the tree alphebetical
            {

                if (treeview1.Nodes[0].ChildNodes[j].Checked == true)//Town alphebet is checked and no need to checked the town
                {

                    #region compute the live count from the DataTable
                    TownsFirstLetters.Add(treeview1.Nodes[0].ChildNodes[j].Text);
                    livecount += Convert.ToInt32(dtAllTowns_count.Compute("sum(NumOfRepeat)", "town like '" + treeview1.Nodes[0].ChildNodes[j].Text + "'+'%'"));
                    #endregion
                }
                else
                {
                    int towns = 0;
                    towns = treeview1.Nodes[0].ChildNodes[j].ChildNodes.Count;
                    for (int k = 0; k < towns; k++)
                    {
                        if (treeview1.Nodes[0].ChildNodes[j].ChildNodes[k].Checked)
                        {

                            string strcount = treeview1.Nodes[0].ChildNodes[j].ChildNodes[k].Text;
                            string[] arr = strcount.Split('[');
                            string[] arr2 = arr[1].Split(']');
                            Towns.Add(arr[0].ToString());
                            livecount += int.Parse(arr2[0].ToString());
                        }
                    }
                }
            }

            Session["Towns"] = Towns;
            Session["TownsFirstLetters"] = TownsFirstLetters;

            lblLivecount.Text = livecount.ToString();
            Session["livecount_step2"] = livecount.ToString();
            #endregion
        }
        #endregion
    }

But Still it is not working for checking checkbox.

Re: Treeview with check boxes in an update panel

bullpit — Thu, 02 Oct 2008 16:24:56 GMT

Is this the one you are using:

  <script type="text/javascript">
        function postbackOnCheck(e) {
            var isNav = (window.navigator.appName.toLowerCase().indexOf("netscape") >= 0);
            var o;
            if (isNav && e != null)
                o = e.target;
            else
                o = window.event.srcElement;
            if (o.tagName == 'INPUT' && o.type == 'checkbox'
&& o.name != null && o.name.indexOf('CheckBox') > -1)
                __doPostBack("", "");
        }  

    </script>

If yes, make sure you are also coding the TreeNodeCheckChanged event.

Treeview with check boxes in an update panel

maduranga001 — Thu, 02 Oct 2008 14:20:04 GMT

Hi,

I have a tree view with check boxes in an update panel.I want to refresh a lable when user click on a check box.I put my tree and the lable in the update panel.But it is not working.There is no method to autopost back for the tree.But I found a javascript.It is working.But not for check boxes.Please advice me how to do this.

Thank you,

maduranga001.