Remove the Whitespace generated for each Parent TreeNode in an ASP.NET TreeView

Tweet

I was working on a TreeView bound to a SiteMap control. Due to a space constraint while displaying the TreeView, I had to save as much space as I could while displaying my TreeView. Now by default, when a TreeView is generated, the Parent Root Nodes have a whitespace indent as visible below

When the TreeView gets rendered, ASP.NET generates a number of HTML Table tags to format it’s layout. So to remove the whitespace before each parent node, just use the following CSS

<style type="text/css">
    .tv table tbody tr td:first-child 
    {  
       display:none;  
    }
</style>

where tv is the CssClass applied to the TreeView.

<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1" CssClass="tv">

The resultant output is as shown below with the extra whitespace removed:

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.