Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!
Mar 25, 2009
(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.



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() {

        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( + ' (Page ID: ' + + ')<br />');
        onLazyRead: function(dtnode) {
                      { url: "/jqueryTree/Templates/Service/jqueryTree.aspx",
                          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.



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


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
Stop Managing Humans in Your CMS

Too many times, a content management system becomes a people management system. Meaning, an organization uses the CMS to manage all the information...

Deane Barker | Nov 30, 2023

A day in the life of an Optimizely Developer - Optimizely CMS 12: The advantages and considerations when exploring an upgrade

GRAHAM CARR - LEAD .NET DEVELOPER, 28 Nov 2023 In 2022, Optimizely released CMS 12 as part of its ongoing evolution of the platform to help provide...

Graham Carr | Nov 28, 2023

A day in the life of an Optimizely Developer - OptiUKNorth Meetup January 2024

It's time for another UK North Optimizely meet up! After the success of the last one, Ibrar Hussain (26) and Paul Gruffydd (Kin + Carta) will be...

Graham Carr | Nov 28, 2023

Publish content to Optimizely CMS using a custom GPT from OpenAI 🤖

Do you find the traditional editor interface complicated and cluttered? Would you like an editorial AI assistant you can chat with? You can!

Tomas Hensrud Gulla | Nov 28, 2023 | Syndicated blog