65.9K
CodeProject is changing. Read more.
Home

Load page in IFRAME based on TreeView node selection

Mar 8, 2011

CPOL
viewsIcon

26862

Load page in IFRAME based on TreeView node selection without postback.

This is helpful when you are using TreeView and IFRAME and you want to load a page in IFRAME according to selected value from TreeView. .aspx
<asp:TreeView ID="TreeView1" class="leftpaneltree" runat="server" ImageSet="Arrows"
                                        NodeIndent="7" ExpandDepth="0">
                                        <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                                        <Nodes>
                                            <asp:TreeNode Text="User" Value="User" NavigateUrl="User/Users.aspx"
                                                 Value="">
                                                <asp:TreeNode Text="Admin" Value="Admin" NavigateUrl="User/Admin.aspx">
                                                </asp:TreeNode>
                                                <asp:TreeNode Text="User" Value="User" NavigateUrl="User/User.aspx">
                                                </asp:TreeNode>
                                            </asp:TreeNode>
                                            <asp:TreeNode NavigateUrl="Department/Department.aspx" Text="Department"
                                                Value="Department">
                                                <asp:TreeNode NavigateUrl="Department/Sales.aspx" Text="Sales"
                                                    Value="Sales"></asp:TreeNode>
                                                <asp:TreeNode NavigateUrl="Department/Purchase.aspx" Text="Purchase"
                                                    Value="Purchase"></asp:TreeNode>
                                                <asp:TreeNode NavigateUrl="Department/Marketing.aspx" Text="Marketing"
                                                    Value="Marketing"></asp:TreeNode>
                                            </asp:TreeNode>
                                        </Nodes>
                                        <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="2px"
                                            NodeSpacing="0px" VerticalPadding="0px" />
                                        <ParentNodeStyle Font-Bold="False" />
                                        <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
                                            VerticalPadding="0px" />
                                    </asp:TreeView>
 <script language="javascript" type="text/javascript">
        assignTreeNodeEvent();
        function assignTreeNodeEvent() {
            var tree = document.getElementById('<%=TreeView1.ClientID %>');
            var nodes = tree.getElementsByTagName('a');
            for (var n = 0; n < nodes.length; n++) {
                var url = nodes[n].getAttribute('href');
                if (url.indexOf(".aspx") > 3) {
                    nodes[n].setAttribute('href', '#');
                    var strclick = "changePage('" + url + "')";
                    nodes[n].setAttribute('onclick', strclick);
                }
            }
        }
        function changePage(sTargetPage) {
            var frmPage = document.getElementById('iframeName');
            frmPage.src = sTargetPage;
        }
    </script>