<%@ Import Namespace="System.Data" %>
<%@ Page Language="C#" AutoEventWireup="false"  
    ValidateRequest="False" %>

<script language="C#" runat="server">
   
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        Page.PreRender += new EventHandler(Page_PreRender);
       
    }

 

    void Page_PreRender(object sender, EventArgs e)
    {
        // Get a ClientScriptManager reference from the Page class.
        ClientScriptManager cs = Page.ClientScript;
        Type cstype = this.GetType();

        // Check to see if the startup script is already registered.
        if (!cs.IsStartupScriptRegistered(cstype, "tvMenuScript"))
        {
            String cstext = "var MenuTreeViewID='" + TreeView1.ClientID + "';";
            cs.RegisterStartupScript(cstype, "tvMenuScript", cstext, true);
        } 
    }
</script>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainContent">

    <script type="text/javascript">
    function CheckBoxesCount()
    {
        var TotalCount=0;
        var aInputs = document.getElementById(MenuTreeViewID).getElementsByTagName("input");
        if (aInputs!=null)
        {
            for(var i=0; i< aInputs.length;i++)
            {
                if (aInputs[i].type=="checkbox") {
                    if (aInputs[i].checked) 
                    {   
                        TotalCount++;
                        //highlight checked nodes
                        aInputs[i].parentNode.style.backgroundColor ='gold';
                    }
                }
            }
        }
        var lblCount = document.getElementById ("spancount");
        if (lblCount) lblCount.innerText= "Total checked items=  " + TotalCount;
    }
    function SuppressToolTip()
    {
        var aInputs = document.getElementById(MenuTreeViewID).getElementsByTagName("input");
        if (aInputs!=null)
        {
            for(var i=0; i< aInputs.length;i++)
            {
                if (aInputs[i].type=="checkbox") {
                    aInputs[i].title="";
                }
            }
        }
    }
    function SetImageClick()
    {
        var aImages = document.getElementById(MenuTreeViewID).getElementsByTagName("img");
        if (aImages !=null)
        {
            for(var i=0; i< aImages.length;i++)
            {
                //change the href value of the anchor that encloses the image
                if(aImages[i].parentElement.tagName=="A")
                {
                    if (aImages[i].parentElement.href.substr(0,11)!="javascript:")
                    {
                       aImages[i].parentElement.href="javascript:alert('you clicked the image beside the entry titled: " + 
                            aImages[i].parentElement.parentElement.nextSibling.childNodes[1].innerText+"');";
                    }    
                }
            }
        }
    }
    function SetFirstNodeStyle()
    {
       var aInputs = document.getElementById(MenuTreeViewID).getElementsByTagName("input");
        if (aInputs!=null)
        {
            for(var i=0; i< aInputs.length;i++)
            {
                if (aInputs[i].type=="checkbox") {
                    aInputs[i].parentNode.style.borderTop="double 1pt black";
                    aInputs[i].parentNode.style.backgroundColor="pink";
                    break;
                }
            }
        }
    }   
    </script>

    <div style="width: 750px;">
        <h2>
            TreeView manipulation using JavaScript</h2>
        <table>
            <tr>
                <td>
                    <asp:XmlDataSource ID="MySource" DataFile="~/App_Data/MenuHier.xml" runat="server" />
                    <asp:TreeView ID="TreeView1" DataSourceID="MySource" ExpandDepth="2" ShowCheckBoxes='All'
                        MaxDataBindDepth="4" LineImagesFolder="~/App_Themes/Webswapp/images/lines" ShowLines="true"
                        runat="server">
                        <DataBindings>
                            <asp:TreeNodeBinding Depth="0" DataMember="Menu" TextField="Text" ImageUrl="~/App_Themes/Webswapp/images/folder.gif" />
                            <asp:TreeNodeBinding Depth="1" DataMember="Node" TextField="Text" NavigateUrlField="Url"
                                ToolTipField="ToolTip" ImageUrl="~/App_Themes/Webswapp/images/closedbook.gif" />
                            <asp:TreeNodeBinding DataMember="Node" TextField="Text" NavigateUrlField="Url" ToolTipField="ToolTip"
                                ImageUrl="~/App_Themes/Webswapp/images/bullet4.gif" />
                        </DataBindings>
                    </asp:TreeView>
                </td>
                <td valign="top">
                    <table>
                        <tr>
                            <td class="tblTD1">
                                The TreeView server control does not provide client-side functions such as the number
                                of checked items on the TreeView or changing the colors of the checked nodes. All
                                these activities have to be done using customized JavaScript. In this demo I perform
                                the following JavaScript manipulations:
                                <ol>
                                    <li>Count the number of checked nodes </li>
                                    <li>Suppress the ToolTip display when the mouse if hovered over the checkbox</li>
                                    <li>Change the style of the first node</li>
                                </ol>
                                <p>
                                    In another demo in this section, "Custom TreeView", I perform more JavaScript manipulations
                                    by creating a custom server control instead of using the provided TreeView Control.
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="tblTD1">
                                Check on several nodes in the TreeView then click on this button to get a count
                                of the checked nodes
                                <input type='button' onclick="CheckBoxesCount()" value="Count" />
                                <br />
                                <br />
                                <span style="background-color: Maroon; color: White; padding: 5pt;" id="spancount"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="tblTD1">
                                Click on this button
                                <input type="button" onclick="SuppressToolTip()" value="suppress the ToolTip" />
                                display on the checkbox
                            </td>
                        </tr>
                        <tr>
                            <td class="tblTD1">
                                Click on this button
                                <input type="button" onclick="SetFirstNodeStyle()" value="change the style" />
                                of the top node in the TreeView
                            </td>
                        </tr>
                        <tr>
                            <td class="tblTD1">
                                Click on this button
                                <input type="button" onclick="SetImageClick()" value="change the action" /> when the image beside
                                any entry is clicked. 
                                Then click on the image beside each entry to have an alert message indicating which entry was clicked.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</asp:Content>