andreas.ek@internetfabriken.se
Mar 25, 2009
  14800
(0 votes)

jQuery and ajax page tree service

I needed to show the pagetree for my users and tried out several dynamic ajax based and jquery based treeviews. I liked the “dynatree” best and I want to share a simple implementation. In this case I will place the control in the public presentation. Perhaps it is more suitable to use it in a edit or admin plugin with EPiServer.

The code mirrors the pagetree in EPiServer and shows selected pages in a result div.

The pagetree is loaded “lazy” and requests are made via json produced by a simple aspx page.

image

 

JQuery files

These are the jQuery-files I added to get this to work.

  1. jQuery 1.3.2 (core jQuery)
  2. jQuery UI, 1.7 (user interface)
  3. jquery.dynatree.js (the main treeview js)
  4. jquery.cookies.js (to get peristance)
  5. Skin to the dynatree included in the demo.

<script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery.dynatree.min.js"></script>

<link type="text/css" rel="Stylesheet" href="/jqueryTree/Templates/Styles/ui-lightness/jquery-ui-1.7.custom.css" />
<link type="text/css" rel="Stylesheet" href="/jqueryTree/Templates/Styles/jqueryTree.css" />
<link type="text/css" rel="Stylesheet" href="/jqueryTree/Templates/Styles/DynaTreeSkin/ui.dynatree.css" />

 

JQuery to start the tree

Then there is a declaration to get the tree to work against a “div” in the usercontrol.

$(document).ready(function() {

    $(document).find('#tree').dynatree({
        title: "Root folder",
        rootVisible: true,
        autoFocus: false,
        persist: true,
        fx: { height: "toggle", duration: 200 },
        initAjax: {
            url: "/jqueryTree/Templates/Service/jqueryTree.aspx",
            data: { key: "root" }
        },
        onActivate: function(dtnode) {
            $(document).find('#result').append(dtnode.data.title + ' (Page ID: ' + dtnode.data.key + ')<br />');
            $(document).find('#result').effect('pulsate');
        },
        onLazyRead: function(dtnode) {
            dtnode.appendAjax(
                      { url: "/jqueryTree/Templates/Service/jqueryTree.aspx",
                          data: { key: dtnode.data.key }
                      });
        }
    });
});

 

JSON service

As you can see the function calls the service to get the children. The first time it will get the page root and then for each page it would get the children.

The service is a clean and simple aspx page that gives the json result like this example:

[

{ title: 'Recycle Bin',isLazy: false,key: '2'} ,

{ title: 'StartPage',isLazy: true,key: '3',select:true }

]

The key is the pageid to collect the underlaying children. For each click on the page node it will send the key/pageid to the service and it will respond with more children if there are any.

  

Summary

Next step is to implement filtering to the pages that is returned and perhaps more intiutive icons for EPiServer page status, etc.

But still, jQuery is the shit!

(If anyone interested, download the project here for EPiServer 5.2.375.133 and VS2008)

Mar 25, 2009

Comments

Sep 21, 2010 10:32 AM

Really nice function, great post
/ Jacob Khan

Apr 10, 2017 12:25 PM

Please login to comment.
Latest blogs
Recraft's image generation with AI-Assistant for Optimizely

Recraft V3 model is outperforming all other models in the image generation space and we are happy to share: Recraft's new model is now available fo...

Luc Gosso (MVP) | Nov 8, 2024 | Syndicated blog

ExcludeDeleted(): Prevent Trashed Content from Appearing in Search Results

Introduction In Optimizely CMS, content that is moved to the trash can still appear in search results if it’s not explicitly excluded using the...

Ashish Rasal | Nov 7, 2024

CMS + CMP + Graph integration

We have just released a new package https://nuget.optimizely.com/package/?id=EPiServer.Cms.WelcomeIntegration.Graph which changes the way CMS fetch...

Bartosz Sekula | Nov 5, 2024

Block type selection doesn't work

Imagine you're trying to create a new block in a specific content area. You click the "Create" link, expecting to see a CMS modal with a list of...

Damian Smutek | Nov 4, 2024 | Syndicated blog