TreeView

Definierad i Dynamix.Content5.Controls

TreeView är den grundläggande kontrollen för hierarkiska listor i webbsidor. Som standard ritar den ut en nästlad ul-li-struktur utgående från de rotnoder som anges.

För att exempelvis rita ut ett träd för webbplatsens användare och grupper kan vi använda följande kod:

  1. using System.Linq;
  2. using System.Collections.Generic;
  4. public class UsersAndGroupsTreeView : TreeView
  5. {
  6. protected override IEnumerable<TreeNode> GetRootNodes()
  7. {
  8. foreach( var c in Object.GetAll<Group>().OrderBy( c => c.DisplayName ) )
  9. {
  10. yield return new TreeNode( c );
  11. }
  12. }
  14. protected override void OnLoad( EventArgs e )
  15. {
  16. base.OnLoad( e );
  18. // Auto-bind, this call could be left out for trees
  19. // that are populated from consumer code
  20. DataBind();
  21. }
  23. protected override IEnumerable<TreeNode> GetNodeChildren( TreeNode node )
  24. {
  25. var c = node.DataItem as Group;
  26. if( c != null )
  27. {
  28. foreach( var u in c.Users )
  29. {
  30. yield return new TreeNode( u );
  31. }
  32. }
  33. }
  34. }

Resultatet blir:

  1. <div id="UsersAndGroupsTreeView1" class="dxTreeView">
  2. <ul class="dxTreeViewLevel dxTreeViewLevel0">
  3. <li class="dxTreeViewItem">Administrators
  4. <ul class="dxTreeViewLevel dxTreeViewLevel1">
  5. <li class="dxTreeViewItem">System</li>
  6. <li class="dxTreeViewItem">Administrator</li>
  7. </ul>
  8. </li>
  9. <li class="dxTreeViewItem">Everyone
  10. <ul class="dxTreeViewLevel dxTreeViewLevel1">
  11. <li class="dxTreeViewItem">System</li>
  12. <li class="dxTreeViewItem">Administrator</li>
  13. <li class="dxTreeViewItem">Guest account</li>
  14. </ul>
  15. </li>
  16. </ul>
  17. </div>

Helt utan anpassad formattering blir utseendet:

Som standard skapas en HyperLink-kontroll inuti li-kontrollen och binds till nodens DataItem. Anledningen till att det inte syns några a-taggar i koden ovan är att användare och grupper inte har någon definierad url och HyperLinks standardbeteende är då att bara rita innehållet.

Eget innehåll i posterna

För att lägga till eller byta ut innehållet i poster överlagras metoden AddItemContents enligt t ex:

  1. protected override void AddItemContents( System.Web.UI.Control item, TreeNode node )
  2. {
  3. var img = new Image();
  4. var icon = IconsUtil.GetObjectIcons( node.DataItem ).GetIcon( IconSize.Size16 );
  5. img.InitFromSource( icon );
  6. item.Controls.Add( img );
  8. // Call base to also add the default HyperLink
  9. base.AddItemContents( item, node );
  10. }

Css-klasser och taggar

De egenskaper som kan sättas kopplat till taggar och css är:

  • ItemCssClass - Anger css-klassen för varje post i trädet (normalt en li-nod).
    Standardvärde: "[CssClass]Item"

  • ContainerCssClass - Anger css-klassen för varje nivå i trädet (normalt en ul-nod).
    Standardvärde "[CssClass]Level [CssClass]Level[Level]"

  • FirstItemInLevelCssClass - Anger en css-klass som ska läggas till på den första noden i varje nivå.
    Standardvärde: - (inget värde).

  • ItemTagKey - Anger vilken tag som ska skapas kring varje post.
    Standardvärde: HtmlTextWriterTag.Li

  • ContainerTagKey - Anger vilken tag som ska skapas kring varje nivå.
    Standardvärde: HtmlTextWriterTag.Ul

  • CssClass (ärvd från WebControl) - Anger yttersta nivåns css-klass och används som grund för nyckeln [CssClass] (se nedan).
    Standardvärde: "dxTreeView"

Kontrollen förstår vissa dynamiska nycklar i css-klasserna:

  • [Level] - För noder byts nyckeln ut mot nodens nivå: 0, 1, 2 osv. För nivåer/behållare byts nyckeln ut mot föräldranodens nivå, eller 0 om det inte finns någon sådan.

  • [CssClass] - Byts ut mot värdet av Navigation-kontrollens egenskap CssClass

För exakt kontroll över css-klasserna kan man själv överlagra GetItemCssClass, GetRewrittenItemCssClassPart, GetContainerCssClass och GetRewrittenContainerCssClassPart.