Using Telerik RadTreeView With DotNetNuke To Manage Hierarchies

Introduction

There are many cases when you need to edit tree structure: article or catalog categories, file and directory structure, etc. DotNetNuke 5.2 offers a great TreeView control – RadTreeView that supports all you need to edit or show hierarchies. Drag and drop, inline rename lazy load, etc.

In this article I show you step-by-step how to create a complete article categories management solution using Telerik RadTreeView control. The solution will support:

• Store category tree in portal database
• Drag-and-drop categories
• Create / rename / delete categories
• Lazy load of child categories

As an integration platform I use an XsltDb DotNetNuke module. It can instantiate ASP.NET controls and provides a flexible javascript and XML client API. It will help us to query database from javascript code.

Live demo for this article can be found here: http://xsltdb.com/Tree/RadTreeView.aspx

Creating Database

First we need a database tables and stored procedures:

create table {databaseOwner}XsltDb_Category(
    CategoryID int identity primary key,
    ParentID int,
    PortalID int,
    Position float,
    Name nvarchar(128)
)
GO


-- we use float position to let nodes be inserted at any point
-- by assignind position = prev/next +/- 0.5.
-- After this operation we renumber positions to make
-- nodes have round position as before insertion.
create procedure {databaseOwner}XsltDb_Category_NormalizeOrders
    @PortalID int
as
begin
    declare @renum table(CategoryID int, position int identity);
    insert @renum(CategoryID)
    select CategoryID from {databaseOwner}XsltDb_Category
    where PortalID = @PortalID
    order by Position;
    
    update {databaseOwner}XsltDb_Category
    set Position = t.Position
    from {databaseOwner}XsltDb_Category c
    join @renum t on t.CategoryID = c.CategoryID;
end;
GO



create procedure {databaseOwner}[{objectQualifier}mdo_xslt_xsltdb_category_create]
    @PortalID int,
    @ParentID int,
    @Name nvarchar(128)
as
begin
    if @ParentID < 1 set @ParentID = null;
    
    insert {databaseOwner}XsltDb_Category(PortalID, Name, ParentID, Position)
    values(@PortalID, @Name, @ParentID,
        (select MAX(Position)+1 from {databaseOwner}XsltDb_Category where PortalID = @PortalID));

    select SCOPE_IDENTITY() as CategoryID;

    exec {databaseOwner}XsltDb_Category_NormalizeOrders @PortalID;
end;
GO



create procedure {databaseOwner}[{objectQualifier}mdo_xslt_xsltdb_category_update]
    @PortalID int,
    @CategoryID int,
    @Name nvarchar(max)
as
begin
    update {databaseOwner}XsltDb_Category set Name = @Name
    where CategoryID = @CategoryID and PortalID = @PortalID
end;
GO



create procedure {databaseOwner}[{objectQualifier}mdo_xslt_xsltdb_category_delete]
    @PortalID int,
    @CategoryID int
as
begin
    delete {databaseOwner}XsltDb_Category
    where CategoryID = @CategoryID and PortalID = @PortalID
end;
GO



create procedure {databaseOwner}[{objectQualifier}mdo_xslt_xsltdb_category_move]
    @PortalID int,
    @CategoryID int, -- Moving category
    @RefCategoryID int, -- Move oprration destination 
    @relation nvarchar(max) -- Destination type: "inside/over", "before/above", "after/below"
as
begin

    declare @NewPosition float;
    declare @NewParentID int;

    if @RefCategoryID < 1 set @RefCategoryID = null;

    if @relation = 'inside' or @relation = 'over' begin
        select @NewParentID = @RefCategoryID, @NewPosition =
            (select MAX(Position) from {databaseOwner}XsltDb_Category where PortalID = @PortalID);
    end else begin
        select
            @NewParentID = ParentID,
            @NewPosition = Position + case when @relation = 'before' or @relation = 'above' then -0.5 else +0.5 end
        from {databaseOwner}XsltDb_Category where CategoryID = @RefCategoryID and PortalID = @PortalID;
    end;
    
    update {databaseOwner}XsltDb_Category set
        ParentID = @NewParentID,
        Position = coalesce(@NewPosition, 0)
    where CategoryID = @CategoryID
    and PortalID = @PortalID;

   exec {databaseOwner}XsltDb_Category_NormalizeOrders @PortalID;

end;
GO



-- This procedure selects childern of particular node
-- and preview children of each selected nodes.
-- This is very convinient for "static" trees
-- as it shows "+" sign only if the noe has children.
create procedure {databaseOwner}[{objectQualifier}mdo_xslt_xsltdb_categories]
    @PortalID int,
    @RootID int
as
begin
    if @RootID < 1 set @RootID = null;
    
    if @RootID is null
        select
            *,
            case when exists(select * from {databaseOwner}XsltDb_Category cc where cc.ParentID = c.CategoryID) then 'closed' else null end Closed
        from {databaseOwner}XsltDb_Category c
        where c.PortalID = @PortalID
        and c.ParentID is null
        order by c.Position;
    else
        select
            *,
            case when exists(select * from {databaseOwner}XsltDb_Category cc where cc.ParentID = c.CategoryID) then 'closed' else null end Closed
        from {databaseOwner}XsltDb_Category c
        where c.PortalID = @PortalID
        and c.ParentID = @RootID
        order by c.Position;
end;

Creating RadTreeView And Imlementing Simple Operations

<xsl:text disable-output-escaping="yes">
  <![CDATA[
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
  ]]>
</xsl:text>

<mdo:asp xmlns:telerik="telerik" >

<telerik:RadTreeView
  runat="server"
  ID="tv1"

  EnableDragAndDrop="true"
  AllowNodeEditing="true"
  EnableDragAndDropBetweenNodes="true"
>
  <Nodes>
    <telerik:RadTreeNode
        Text="XsltDb Categories"
        ExpandMode="ServerSideCallBack"
        AllowEdit="false" />
  </Nodes>

  <ContextMenus>
    <telerik:RadTreeViewContextMenu ID="MainContextMenu">
      <Items>
        <telerik:RadMenuItem Text="Create" Value="create" ImageUrl="~/images/add.gif" />
        <telerik:RadMenuItem Text="Rename" Value="rename" ImageUrl="~/images/edit.gif" />
        <telerik:RadMenuItem Text="Delete" Value="delete" ImageUrl="~/images/delete.gif" />
      </Items>
    </telerik:RadTreeViewContextMenu>
  </ContextMenus>
</telerik:RadTreeView>

</mdo:asp> 

function pageLoad()
{
  var treeView = $find("{{mdo:client-id('tv1')}}");

  treeView.add_contextMenuItemClicked(function(sender, args){
    var menuItem = args.get_menuItem();
    var node = args.get_node();
    menuItem.get_menu().hide();
    switch(menuItem.get_value())
    {
      case "create": createNode(node); break;
      case "rename": if (node.category) node.startEdit(); else alert("Can't edit virtual root!"); break;
      case "delete": deleteNode(node); break;
    }
  });
}

function createNode(node)
{
  ensureLoaded(node, function(){
    node.expand();
    var newNode = addNode("New Category", false, node);
    newNode.startEdit();
  });
}
function deleteNode(node)
{
  node.get_parent().get_nodes().remove(node);
}

Updating Database

To save created node to the database we use XsltDb javascript API. This is very simple. Just add the following code to the configuration

<callable js="createCategory(categoryName, parentID)">
  <xsl:value-of select="mdo:xml('xsltdb-category-create', 'cat',
     mdo:request('parentID'),
     mdo:request('categoryName')
  )//CategoryID" />
</callable> 

What is this code actually do? When page is loading this code is not executed but javascript function "createCategory" is created. If you call this function on client it would send parameters values to the server and execute XSL transformation. XSLT we see here is just a stored procedure call. As we use identity columns for the row IDs the procedure return ID of newly created category and createCategory sends it to the caller.

createCategory can be called both synchronous:

var newId = createCategory("New Root Category", -1);
alert(newId);

and asyncronous

create Category("New Root Category", -1, function(newId){
  alert(newId);
});

Synchronous calls are simple but they block browser and it doesn’t execute other scripts, animate GIFs, etc. while category is being created. So in production environment it is recommended to use asynchronous calls.

Now we have to call createCategory to save new categories to database. But we have to do it after the user input correct name. So we need to attach a handler to "nodeEdited" event:

treeView.add_nodeEdited(function(sender, args)
{
  var node = args.get_node();
  if ( node.category )
    updateCategory(node.category, node.get_text());
  else
    node.category = createCategory(node.get_text(), node.get_parent().category||-1);
});

How this works? In javascript we can add a property to any object in runtime. So we use a "category" property to associate a CategoryID with runtime javascript node. And if we see that category id already assigned we make an update. Else we create a new node and assign an ID after it would be created. Nodes Lazy (Deferred) Loading. Now create a deferred nodes load mechanism. RadTreeView provides us with the following methods of nodes loading

• Page method
• Web Service
• Client - side node creation in “populating” event handler

Page method leads to complete page creation and ASP.NET Page Life cycle execution. So if we don’t want fall in comlete page recalculation we must use IsPostBack and IsInAsyncPostBack flags to determine what to do in Page_Load and Page_Init. And all other modules of page must use this flags too. So this is not good approach for modular environment.

Web service is a good quick method but it requires creating and deploying to DotNetNuke an asmx file. And each time you change algorithm you have to redeploy the service. For the moment I don’t know a module that can act as a universal web servise (i.g. module that allows setup of SQL query and metadata and acts as a service according to settings made). May be XsltDb will be such a service in future.

So we switch to the client-side node generation. We can use a number of methods to query server get data and create javascript objects. As we are in XML/XSL environment – the simplest way is to build xml on server and analyze it on client. We also can return a JSON object or free javascript code but we won't. After we get XML on client we also have an option about how to query the XML. We can use browser XML API or incorporate the XML into current document DOM and access it via jQuery. Any method is acceptable. We choose here incorporating in browser’s DOM and using jQuery.

So we create the following javascript interface:

<callable js="getCategories(ParentID)">
  <xsl:variable name="categories" select="mdo:xml('xsltdb_categories', 'cat', mdo:request('ParentID'))" />
  <xsl:for-each select="$categories//cat">
    <span id="{CategoryID}" closed="{Closed}" name="{Name}" />
  </xsl:for-each>
</callable>

Create nodes factory (simplest for the article)

var alwaysClosed = "{{mdo:param('dont-check-children')}}";

function addNode(nodeText, hasChildren, parent)
{
  var node = new Telerik.Web.UI.RadTreeNode();
  node.set_text(nodeText);

  if ( hasChildren || alwaysClosed == "on" )
  {
    node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSideCallBack);
  }
  else
  {
    node.loaded = true;
    node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ClientSide);
  }

  node.set_imageUrl("/images/folder.gif");
  parent.get_nodes().add(node);
  return node;
}

function ensureLoaded(parent, callback)
{
  if ( ! parent.loaded ) {
    parent.showLoadingStatus(treeView.get_loadingMessage(), treeView.get_loadingStatusPosition());
    parent.loaded = true;
    getCategories(parent.category||-1, function(children){
      parent.hideLoadingStatus();
      parent.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ClientSide);
      $("#tmp").html(children);
      $("#tmp").find("span").each(function(){
        var newNode = addNode($(this).attr("name"), $(this).attr("closed"), parent);
        newNode.category = $(this).attr("id");
      });
      if ( callback ) callback();
    });
  }
  else if ( callback ) callback();
} 

And subscribe on populating and expanded events

treeView.add_nodePopulating(function(sender, args){

    var node = args.get_node();
    if ( node.loaded ) return;
    ensureLoaded(node);
    args.set_cancel(true);
  });

  treeView.add_nodeExpanded(function(sender, args){
    var node = args.get_node();
    node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ClientSide);
    node.set_expanded(true);
  }); 

treeView.add_nodeDropping(function(sender, args){

  var sourceNode = args.get_sourceNodes()[0];
  var destinationNode = args.get_destNode();

  ensureLoaded(destinationNode, function(){

    moveCategory(sourceNode.category, destinationNode.category||-1, args.get_dropPosition(), function(){

      sourceNode.collapse();
      sourceNode.get_parent().get_nodes().remove(sourceNode);

      if(args.get_dropPosition() == "over")
        destinationNode.get_nodes().add(sourceNode);

      var destinationParent = destinationNode.get_parent();
      var index = destinationParent.get_nodes().indexOf(destinationNode);

      if(args.get_dropPosition() == "above" )
        destinationParent.get_nodes().insert(index, sourceNode);

      if(args.get_dropPosition() == "below")
        destinationParent.get_nodes().insert(index+1, sourceNode);

    });
  });
});