How to create a site tree view with drag&drop

From Sense/Net Wiki
Revision as of 12:59, 9 September 2015 by Litvanyia (Talk | contribs) (→‎5.Reordering with drag&drop)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.3
  • Enterprise
  • Community
  • Planned

Overview

{{{2}}}
Adding custom functionality to a portlet as a front-end developer was really hard before OData. But now content and actions are accessible through the OData API of Sense/Net which allows us to create tons of custom widgets only with html and javascript. This article helps you to implement a tree view with drag&drop functionality. The following steps will show you how to get content from the Content Repository trough OData and create a hierarchical datasource, how to display them with a KendoUI tree and how to drag&drop/move the folders with the Move action.

Steps

1. Create the tree View

In the Content Explorer navigate to the Global/contentviews folder, add an Empty Content view folder and name it Site. Open this newly created Content View folder and add a custom Content View. Remove everything from the ascx file except the first row and name it TreeView.

2.Create the datasource

To use KendoUI hierarchical datasource and tree widget you have to include some js and css files. 

<sn:scriptrequest id="ODataManager" runat="server" path="$skin/scripts/ODataManager.js" />
<sn:scriptrequest id="KendoUi" runat="server" path="$skin/scripts/kendoui/kendo.web.min.js" />
<sn:cssrequest id="KendoCommon" runat="server" csspath="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
<sn:cssrequest id="KendoMetroSkin" runat="server" csspath="http://cdn.kendostatic.com/2014.2.716/styles/kendo.flat.min.css" />

KendoUI’s last version is not included in Sense/Net version 6.3 or later. If you want to get the last KendoUI version please check their website.

Add a Kendoui Hierarchical datasource 

   var treeDataSource = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                url: function (item) {
                    if (item.Path) {
                        return odata.dataRoot + item.Path;
                    }
                    else {
                        return odata.dataRoot + '/Root';
                    }
                },
                dataType: "json",
                data: {
                    $select: 'Type,Id,Path,DisplayName,Name,IsFolder,Icon',
                    metadata: "no"
                }
            }
        },
        schema: {
            model: {
                id: 'Path',
                hasChildren: 'IsFolder'
            }
        },
        serverSorting: true,
        sort: [
            { field: "IsFolder", dir: "desc" },
            { field: "DisplayName", dir: "asc" }
        ]
    });

If you want to read more about KendoUI's hierarchical datasource please check their documentation.

3.Add KendoUI tree widget

Add an HTML element to the view. 

  <div id=”tree”></div>

Bind KendoUI TreeView to the HTML element with the following options 

  var treeView = $('#tree').kendoTreeView({
       dataSource: treeDataSource,
       dataTextField: "Name"
  }).data("kendoTreeView");

4.Add drag&drop move

To add drag&drop functionality you have to add two things to the treeview-s option list. Set dragAndDrop to true and add a custom function as a value of the dragend option, which will call Move action because we want to move the chosen folder/item in another not only on client side but also in the Content Repository. 

   var treeView = $('#tree').kendoTreeView({
       dataSource: treeDataSource,
       dataTextField: "Name",
       dragAndDrop: true,
       dragend: onDragEnd
  }).data("kendoTreeView");

Add onDragEnd function which will call Sense/Net’s Move action on the dragged item/folder 

     function onDragend(e) {
        $.ajax({
            url: odata.dataRoot + odata.getItemUrl(this.dataItem(e.sourceNode).Path) + '/MoveTo',
            dataType: 'json',
            type: 'POST',
            data: { 'targetPath': this.dataItem(e.destinationNode).Path }
        });
    }

5.Reordering with drag&drop

To check if the source item is dropped into another folder or only moved inside it's parent folder to change the order of the items you have to add the following statement to the onDragend function: 

 function onDragend(e) {
   var destination = treeView.dataItem(e.destinationNode); 
   var destinationId = destination.Id;                             
      if (typeof destination.parentNode() !== 'undefined')    
        var destinationParentId = destination.parentNode().Id;      
      var source = treeView.dataItem(e.sourceNode);      
      var sourceParentId = source.parentNode().Id;          
      if (destinationParentId === sourceParentId || sourceParentId === destinationId) {     
                //reorder
      }
      else {
         $.ajax({
                    url: odata.dataRoot + odata.getItemUrl(source.Path) + '/MoveTo',
                    dataType: 'json',
                    type: 'POST',
                    data: { 'targetPath': destination.Path }
                });
        }
 }

If you want to read more about KendoUI's TreeView widget please check their documentation.

6.Add a portlet to display the tree

Navigate to the page where you want to display the tree. Switch to edit mode on the PRC and add a User Control portlet to the chosen zone. Edit the portlet and on the portlet property window set your treeview ascx as the User Control Path. Click Ok and Check-in your page with the PRC.

{{{2}}}

Related links

References

Retrieved from "http://wiki.sensenet.com/index.php?title=How_to_create_a_site_tree_view_with_drag%26drop&oldid=7373"