Jquery for asp.net treeview

Question

I am using a asp.net tree view control. I want to add the jquery style for the .net tree view control. But i can't do this. Please help me to fix this issue. I need the jquery for smooth expanding and collapse...

This is my design code. Where i can refer the jquery in asp.net control

 <asp:TreeView ID="MyTree" PathSeparator="|" ExpandDepth="1" runat="server" NodeIndent="15"
                    ShowLines="true">
                    <RootNodeStyle ImageUrl="~/images/folder-video.png" />
                    <ParentNodeStyle ImageUrl="~/images/root.png" />
                    <NodeStyle ImageUrl="~/images/node.png" />
                    <LeafNodeStyle ImageUrl="~/images/leaf_video.png" />
                    <SelectedNodeStyle BackColor="#B5B5B5"></SelectedNodeStyle>
                    <NodeStyle VerticalPadding="2" Font-Names="Tahoma" Font-Size="10pt" HorizontalPadding="2"
                        ForeColor="#000000"></NodeStyle>
                    <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA"></HoverNodeStyle>
                    <Nodes>
                        <asp:TreeNode Text="Sunbusiness Solution" PopulateOnDemand="True" Value="Demos" />
                    </Nodes>
                </asp:TreeView>

You mean css style? the treeview already expands properly... — JJschk
– JJschk, Commented Nov 23, 2012 at 9:49

Boriss Pavlovs · Accepted Answer · 2012-11-27 08:51:19Z

1

I use treeview with checkboxes. On checkbox click node expands.

function InitTreeViewClick(){    $('#" + treevew.ClientID + @" :input').each(function(){  $(this).unbind(); var   a=this.nextSibling; if(a.nodeName=='A')  $(this).bind('click',   function(){a.click();});});}
}

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTreeViewClick);

You can modify a.click() for example: setTimeout(function(){a.click();},3000);

In my case this works perfectly.

And cs file code:

protected void Page_PreRender(object sender, EventArgs e)
    {
if (!this.Page.ClientScript.IsStartupScriptRegistered("treeview"))
        {
            string script = @"Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTreeViewClick);

                          function InitTreeViewClick(){    $('#" + treevew.ClientID + @" :input').each(function(){ $(this).unbind(); var a=this.nextSibling; if(a.nodeName=='A')  $(this).bind('click',  function(){a.click();});});} ";
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "treeview", script, true);
        }
}

In your case you can find all links

$('#" + treevew.ClientID + @" ).find('a').each( function(){$(this).click(
// your logic 
);});

OR

 $('#" + treevew.ClientID + @" ).find('a').each(function(){$(this).click(function(){$(this).parentsUntil('table').parent('table').next().css('background','red').slideToggle("slow");});});

this code will slowly collapse and expand div with subitems when you click on parent node and background for child nodes will be red on this time.

Final solution (I applied this solution in my project too, because it looks fine). ASCX file code:

<asp:TreeView ID="treeview" runat="server" ForeColor="Black" CssClass="inputs" ExpandDepth="0" MaxDataBindDepth="2"
    EnableClientScript="true" ShowCheckBoxes="All" AutoGenerateDataBindings="false"  ShowLines="false" 
     ShowExpandCollapse="false">

</asp:TreeView>

and cs file code:

 if (!this.Page.ClientScript.IsStartupScriptRegistered("treeview")) { string script = @"function InitTreeView(){$('#" + treeview.ClientID + @"' ).find('a').each(function(){$(this).unbind().removeAttr('onclick').removeAttr('href').click(function(){$(this).parentsUntil('table‌‌').parent('table').next().slideToggle('slow');});});} Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTreeView);"; ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "treeview", script, true); }

I remove href attribute with __DoPostBack from tag anchor, because I need to save only checkboxes value. Many thanks indeed user 1804985 for your question. :)

edited Nov 27, 2012 at 8:51

answered Nov 23, 2012 at 9:58

Boriss Pavlovs

1,44112 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Boriss Pavlovs Over a year ago

What effect do you want to get?

user1804985 Over a year ago

Now am using like this.. protected void Page_PreRender(object sender, EventArgs e) { if (!this.Page.ClientScript.IsStartupScriptRegistered("treeview")) { string script = @"$('#" + MyTree.ClientID + @" ).find('a').each(function(){$(this).click(function(){$(this).parentsUntil('table').parent('table').next().css('background','red').slideToggle('slow');});})"; ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "treeview", script, true); } }

Boriss Pavlovs Over a year ago

protected void Page_PreRender(object sender, EventArgs e) { if (!this.Page.ClientScript.IsStartupScriptRegistered("treeview")) { string script = @"function InitTreeView(){$('#" + MyTree.ClientID + @" ).find('a').each(function(){$(this).click(function(){$(this).parentsUntil('table‌').parent('table').next().css('background','red').slideToggle('slow');});});} Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTreeView);"; ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "treeview", script, true); } }

Boriss Pavlovs Over a year ago

$('#" + MyTree.ClientID + @" ) have to change $('#" + MyTree.ClientID + @" ')

Collectives™ on Stack Overflow

Jquery for asp.net treeview

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related