StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
8119160
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2011-11-14T08:51:55.770
FavoriteCount
0
LastActivityDate
2011-11-14T09:22:31.790
LastEditDate
2011-11-14T09:22:31.790
LastEditorUserId
413593
OwnerUserId
413593
ParentId
7598621
PostTypeId
2
Score
2
ViewCount
0
LastEditorDisplayName
text
Body
I've just found Dynatree and I'm using it on my MVC project. Here's an example of how I did it. I decided to just put the data directly in the View like the <a href="http://wwwendt.de/tech/dynatree/doc/sample-default.html#" rel="nofollow noreferrer">basic example</a>. My data is a list of cities within California, grouped by county. My controller simply passes a view model to my View and the view model has a CitiesAvailable property: <pre><code>public IEnumerable<City> CitiesAvailable { get; set; } </code></pre> My list of City objects is grabbed from the database (EF4) and the actual City object is the following: <img src="https://i.stack.imgur.com/yFmOS.png" alt="CityObject"> In my View I create a ul containing the list of counties and their cities (I'm using Razor but webforms should be easy enough to figure out): <pre><code><div id="tree"> <ul id="treedata" style="display: none;"> @foreach (var county in Model.CitiesAvailable.Select(c => c.County).Distinct().OrderBy(c => c)) { <li data="icon: 'false'">@county <ul> @foreach (var city in Model.CitiesAvailable.Where(c => c.County == county).OrderBy(c => c.Name)) { <li data="icon: 'false'" id="@city.Id">@city.Name</li> } </ul> </li> } </ul> </div> </code></pre> Then in my JavaScript I use the following: <pre><code>$("#tree").dynatree({ checkbox: true, selectMode: 3, fx: { height: "toggle", duration: 200 } }); </code></pre> It works great! Here's a sample of the output with a few items checked: <img src="https://i.stack.imgur.com/QfX4d.png" alt="Screenshot of Dynatree result"> Let me know if anything doesn't make sense. Note, I use data="icon: 'false'" in my li elements because I don't want the icons.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PODynatree with ASP.NET MVC
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USMatt Penner
UserOwnerUserId
1. USMatt Penner
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. COHey how did you late on post the data back to the server? http://stackoverflow.com/questions/9692398/dynatree-asp-net-mvc-how-do-you-post-data-back-to-server
 singulars
 PostPostId
 PO
 UserUserId
 USchobo2

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.