Black Falcon Software: Working With Obout’s Treeview Control & ASP.NET Master Pages

Obout Software makes a very fine suite of highly affordable ASP.NET controls,  many of which are also an inherent part of the Obout AJAX infrastructure.  And with the treeview control being one of the most difficult to program, the Obout offering makes life with it a far more pleasant experience.  To date,  I have found the controls I have implemented to be practically defect free.  However, all of the samples that are provided with the download are designed for standard ASP.NET web-pages, though they can be included with a Master-Page\Child-page combination.  The issue is however, that when doing so you are implementing these controls within a slightly different environment for which they appeared to have been designed for.

The Master-Page\Child-Page combination allows developers to build standardized web-page templates while adding in unique content with Child-Pages (web content pages).  However, upon processing this configuration the .NET Framework takes both individual pages and combines them as one for output to the client.  This then prohibits some of the access to the Obout treeview control from the server.  And one of the most critical access features that Obout offers with this control is the “SetValue” method.

The “SetValue” method is a valuable part of Obout’s AJAX infrastructure, which is offered through their AJAXPage assembly.  In order for their treeview control to access its own events in AJAX style, the web-page that is presenting the control must also inherit from Obout’s AJAX page.

This combination mixed with the Master-Page\Child-Page combination then suffers from the inability to callback to the client from the server with the “SetValue” method.  No matter how many configurations I attempted it simply would not work.  And without this critical method you cannot easily tell your user if any update they made to their treeview was successful or not, especially if the middle-tier is doing complex processes for user updates such as database operations.

One could conclude that this is in fact a defect in their software and it is as well as the first one I have ever come across.  Unfortunately, Obout’s technical support is both non-responsive and\or non-existent to the several emails I sent to them detailing this issue.  However, according to their site they are still alive, well, and still producing.

Nonetheless, coming across such an issue with such a lack of response could also easily make one consider changing their control selection for another vendor.  The problem is that Obout’s controls are just so good and easy to work with that combined with their cost, the idea of switching to another control set makes for a very difficult decision, especially if you are a small ISV.  So what to do?

Obout controls actually offer two ways to process their AJAX methods; the first being in this case from the server back to the client.  However, if we use their reverse process of making a call from the client to the server with their AJAX infrastructure we can circumvent the “SetValue” issue and actually make our application slightly smaller and somewhat more flexible.

The Obout treeview control is designed to have its AJAX events supported by a provided module entitled, “TreeEvents.aspx”.  In the “Classic ASP” world such a module was called a “listener module” for when we implemented the base AJAX technology of the “XmlHttpRequest” functionality.  Adding such a module to the design appears to make things easier for the developer but actually adds a slightly increased level of complexity, if not confusion.  Name this module anything else and fail to update the scripts with the new name properly and it will suddenly stop working (see the Obout supplied script module… “ob_events_2039.js”).

Nonetheless, the “TreeEvents.aspx” module does make things a little more straight-forward, though we can accomplish the same thing using client-side events and Obout’s AJAX infrastucture.  Here is how we go about this… (Please note that the server-side code is in VB.NET.)

• You can exclude the “TreeEvents.aspx” module from your project since it will no longer be required to support the treeview events.  These will now be implemented in the code-behind for the Aspx page where the treeview is being implemented.
• To implemenet client-side Obout events you can implement them in your Master-Page as the code below demonstrates… (notice that the script follows the “</html>” tag)

</html>

<script type="text/javascript" language="javascript ">

function ob_OnNodeDrop(src, dst, copy) {

var loTextBox = document.getElementById("txtEventMessage");
switch (dst) {
case "assign_root":
ob_post.AddParam("psSourceEntity", src);
ob_post.AddParam("psDestinationAssignment", dst);

loTextBox.value = ob_post.post("wfrmcAdmin.aspx", "Process_TreeviewEvent_OnNodeDrop");

case "org_root":

case "div_root":

case "sect_root":
}
}
</script>

• A few notes on the code above…

  The event we are using is the “ob_OnNodeDrop” event, which corresponds to the server-side event, “OnNodeDrop” in the “TreeEvents.aspx” page. Though, the Obout online documentation shows the event name to be simply “OnNodeDrop”, the same as the server-side event, we use the Obout AJAX infrastructure name in order to make sure it is fired correctly. Note that the event has the same parameters as its server-side equivalent, which arethe source item being moved in the treeview and the destination where it will be placed.

  To pass the two event parameters we use the AJAX infrastructure “ob_post.AddParam” method in the order that the parameters are listed for the event signature. ob_post.AddParam("psSourceEntity", src); ob_post.AddParam("psDestinationAssignment", dst);

  Now, to make the actual AJAX call, we use the “ob_post.post” method, which passes two parameters in addition to the data parameters we added to the “post” process. The first parameter tells the method which page the called method will be found on and the second the name of the actual method itself… ob_post.post("wfrmcAdmin.aspx", "Process_TreeviewEvent_OnNodeDrop");

• Notice that we are returning a string that will inform our client whether he or she successfully processed a treeview drag&drop assignment or not.

• Note also, that this code is only implemented for a single “case” statement as it is being only used for demonstration purposes here.
• To define where the returned information will go, you define the element in the child-page, the same page where you have implemented the treeview control.  In this case, the page-name is “wfrmcAdmin.aspx”.  The element is defined as a standard HTML textbox as follows…

   input type="text" id="txtEventMessage" style="width: 500px" />

  If you don’t do this and define this element as an ASPX element, the client-side script will not be able to find it since the name\id of the element is re-named to a Microsoft defined name as is standard with ASP.NET.

The method you will call via AJAX is defined in this case in the code-behind of the specified page-name in the call signature.  Unlike with the pure Microsoft AJAX implementation, there is no need to declare any web attributes to this method.  Obout’s AJAX infrastructure will find it just as is.

In our case here, the method is defined then as follows…

Public Function Process_TreeviewEvent_OnNodeDrop(ByVal psSourceEntity as String, ByVal psDestinationAssignment as String) As String

Dim loWebCacheObjects As New CDOCS_SessionState.clsWebCacheObjects()

Select Case (psDestinationAssignment.Trim())
Case "assign_root":
Assign_EntityToCorporation(psSourceEntity, psDestinationAssignment)

Case "org_root":

Case "div_root":

Case "sect_root":

End Select

Return (loWebCacheObjects.ADMIN_TREEVIEW_EVENT_MESSAGE)
End Function

The return information in the method above is held in a session-variable, which is defined as a property in a structure and is is updated by the lower-level function call to “Assign_EntityToCorporation(psSourceEntity, psDestinationAssignment)”.  However, how you go about setting up the return of this information is completely up to you.  As it regards this style I will publishing an article on structuring session-state information that will demonstrate a more maintainable way of implementing it into an ASP.NET application.

For now however, you are set to go.  Not only can you process a treeview event in its entirety but you can also return information to the client as needed; this is exactly the same process that using the server-side events in Obout’s “TreeEvents.aspx” module along with the “SetValue” method would have produced.

Black Falcon