andreas.ek@internetfabriken.se
Mar 25, 2009
  13784
(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
How Optimizely Web Experimentation enables fast validation of design and UX changes

Ever wondered how to increase conversion rates and quickly validate design/UX alternatives to find the most impactful changes? I wrote a practical...

Jacob Pretorius | Jan 31, 2023

What’s next after Google Optimize’s sunsetting?

Google has announced that it is sunsetting the Google Optimize and Optimize 360 services, forcing customers to explore new platforms and invest in...

Ynze | Jan 31, 2023 | Syndicated blog

What’s next after Google Optimize’s sunsetting?

Google has announced that it is sunsetting the Google Optimize and Optimize 360 services, forcing customers to explore new platforms and invest in...

Ynze | Jan 31, 2023 | Syndicated blog

Migrating from Providers to CMS 12 ASP.NET Identity with cookie tweaks

Notes on migrating a multi-site from Membership and Role Providers to ASP.NET Identity and changing cookie options dynamically.

Johan Kronberg | Jan 30, 2023 | Syndicated blog