M# Tutorials

Learn to build .NET applications with M#. Our step-by-step tutorials will get you up-to-speed rapidly.
If you already know ASP.NET and C#, you can master M# in a week or two.

IHierarchy

This tutorial focuses on the IHierarchy interface defined in M# framework and explains how you can manipulate hierarchal data using this interface and related extension methods. We often need to display hierarchal data specially when displaying data in an ASP.NET TreeView control, which requires complex nested code to populate the TreeView control using traditional Collection type data sources. M# solves this complexity by exposing an interface and extension methods, which are discussed below.

IHierarchy Interface

IHierarchy interface is available under "MSharp.Framework.Services" namespace, which contains definitions of two methods to implement parent and children hierarchies and one property to define the name of the current entity instance in hierarchal data.

IHierarchy Extension Methods

M# framework contains many extension methods, which are vital for displaying or manipulating information about hierarchal data. The definitions shown below are implemented in M# framework and can be called on any instance of IHierarchy type.

Implementing IHierarchy

For the purpose of this tutorial, we will create an entity type Category, which will be used to demonstrate the implementation of IHierarchy interface. The screenshot below shows the entity type Category created in M# (Entities, Page, Module tutorial explains how to manage an entity)

Code shown below shows the implementation of IHierarchy interface.

Displaying Hierarchal Data

We have inserted category records in the database as shown below, in order to display the hierarchal data. In this tutorial we will also learn how to render a tree view control using list module.

In order to render data in a list view please follow the steps below:

Create a list module on Category entity type (please read "Modules" section in tutorial Entities, pages, modules for more information on adding a module)

Add attribute "Root css class" on list module with a value "grid-tree-view" (M# generates css styles for tree view control using this root class .e.g. collapse icon, padding of nodes etc.).

Disable the header row of grid view by specifying "Header row" attribute with a value "False" on the list module

As we want to keep the parent and children nodes together, select "Sorting statement" attribute on list module and specify "GetFullPath()" method. This is an extension method on IHierarchy interface type which sorts elements in a sequence of type IHierarchy according to their hierarchy level. This method’s definition and summary is shown above in this tutorial.

At this stage the list module should have attributes defined as shown below:

Add an element on the list module to show the name of the category by selecting "Name" property, as shown below:

Add the following code as a custom code to "Initialization" event of your list module (Please read Custom code tutorial for more details on adding custom code).

"MakeTreeView()" shown above is an extension method (Implemented in M# framework), which converts the grid view control to a tree view by adding some spacers and collapse icons. By default this extension method adds tree view dynamically to the first place within each row. If you wish to have them added to a specific location within the row, give an attribute named "IsTreeNodeAnchor" to one control within your item template. This method takes a "Boolean or Custom Function" type argument to determine the collapse or expand state of a node in tree view.

By following these simple steps, we have successfully configured a list module to render hierarchal data in a tree view control.