treeview changes

Nov 3, 2011 at 12:52 PM

With the version 1.3 of the treeview, how do i know if there has been any change in the structure or alteration in treeview items from the initial loading of the treeview?

i see that with the "Redo Changes" and "Undo Changes" button you can restore the changed state/original state which means that treeview as a control knows if there are any alterations in the structure.

I want to know if there are any changes at client side using javascript.

any thoughts?

Nov 3, 2011 at 2:08 PM

Unluckly, in versions before 1.4, there is no easy way to do it!

On the client side you have the old copy in display mode, and the new one in edit mode. In theory you should compare the one in edit mode with the one in edit mode to detect they have a different structure. However, maybe the tree has the same structure but some values have been changed....While in theory tis can be done with a recursive call and if there is a well defined corrispondence between display templates and edit is very hard to implement  it and the solution would be specific forthe templates you are using.


I advice to use the new 1.5 version that eliminated the bugs of version 1.4. This way you can use TreeView Events to notify changes to js functions. See here:

Nov 5, 2011 at 5:25 AM

Ok. alright. i will give it a try. i have had issues with the 1.4 treeview not working as expected so excited to see the 1.5.

Although, looking at the examples in 1.5, i see that there is an event bind to the item change which is definitely a must from my perspective. Thanks for that!.

Could that event be configured for the node text change as well? right now i dont see that configured.

e.g. when in edit mode i click on the node text i.e. Email _fried_2 under Friends node, i get a textbox to enter value.. i alter that value and tabout. i dont see the item change event fired.

any thoughts?

Nov 5, 2011 at 8:53 AM
Edited Nov 5, 2011 at 9:44 AM

No no text changed event. All items controls events just care about the scructure of the collection, not about the content of the items. The reason is simple: all items controls are can put everything you want in each item template, so you have also to take full responsibility of the content of items. 



You can add a standard dom "change" event handler to all input fields of the tree. The simplest way to do this is by giving a common css class to all input fields of the tree, and then adding the event to all of them simultaneously in a script just after the definition of the tree  with $(".MyClass").change(.....).

Then you hav also intercept the new node creation events, and add the handler to the newly created nodes with: $(".MyClass", item).change(.....) where item is the newly created item that you receive as an argument by the creation event. 

Nov 6, 2011 at 10:48 AM

Ops...Re-Reading your post I see you are using the EditDisplay of my Mvc Controls Toolkit, to edit node in my examples of the binary distribution.

You can attach events also to each edit display. wit the function MvcControlsToolkit_TypedEditDisplay_BindChange(id, handler) as explained here: 

just put a script in the node template after the editdisplay:


MvcControlsToolkit_TypedEditDisplay_BindChange('@Html.PrefixedId(m=>m.MyLabel)', function(){....})


Nov 10, 2011 at 8:29 AM

Hi, thanks for the help and yes, that solved my problem. Thanks again.

However, another thing which i noticed was,

1. when in edit mode, if you edit the section name and delete all of the content of the textbox and tab out, the validation "The name field is required" DOES NOT fire.

2. if you add a new section and do the same, the validation does fire.

what could be the reason?

Nov 10, 2011 at 11:43 AM

I tried to reproduce your issue in the TreeView of the example that comes with the Mvc Controls Toolkit Binaries....what you said simply doesn't happen! The red style of error is immediately displayed in any case.

Please give me more infos.

At least I need the control that shows the problem: TextBox, TypedTextBox, TypedEditDisplay...or what?

Are you usng Mvc2 or Mvc 3 with unobtrusive Validation?

Nov 10, 2011 at 12:46 PM

I am using toolkit version 1.5 with MVC3 binaries.

This is in context with the TypedEditDisplay. i.e. the section names are displayed with as below

_S.L<ALCS_POC.Models.Section>(h => string.Format(
                            "<div class='folder' >{0} {1} {2} {3} {4} {5} {6} {7} {8} {9} {10}</div>", 
                            h.TypedEditDisplayFor(m => m.Name, simpleClick: true).ToString(),
                                ManipulationButtonStyle.Image, new Dictionary<string,object> { {"title","Delete Section"} }).ToString(), 
                            h.TreeViewAddButton(0, Url.Content("~/Content/folder_add_16.png"), 
                                ManipulationButtonStyle.Image, new Dictionary<string,object> { {"title","Add Section"} }).ToString(),
                            h.Hidden("IsFolder", true).ToString(),
                            "<img src='../../Content/document_fill.png' alt='Details' title='Details' style='Cursor:pointer' onclick=DocumentDetailsGrid_performSearch('" +  h.ValueFor(m => + "','true')></img>",
                            h.HiddenFor(m=>,Guid.NewGuid().ToString() ).ToString(),
                            h.HiddenFor(m =>m.docType,0),
                            "<script type='text/javascript'> MvcControlsToolkit_TypedEditDisplay_BindChange('" + h.PrefixedId("SubContainer") + "', function(){ SetBinderAssemblyEdit(true); });</script>"

Nov 10, 2011 at 2:09 PM

try if removing the 

this strange behaviour persist or it disappears. Maybe, there, you do somehong that interferes with the validation process.
Why don't you use a Razor helper for writing the item template?....your template is quite complex.
Nov 10, 2011 at 2:37 PM

Sure, will try that out. but this behavior is constant.

Nov 10, 2011 at 2:58 PM
Edited Nov 10, 2011 at 2:59 PM

I have not understood what of the following fail to happen when you tab out in edit mode:

1) Textbox doesn't become red

2) Textbox doesn't remain in the TextBox state and transform back int a normal text (when there is a validation error the TypedDisplayEdit doesn't revert in display mode bur remains a textbox)

3) The error message next to the TextBox doesn't appaear. This is quite logic...I don't see any ValidationMessageFor helper


Your add button is for the template number 0. Maybe the template 0 is different from the template that you showed me...and it has a ValidationMessageFor...or something eles

Nov 10, 2011 at 3:19 PM

When i edit the folder textbox and delete the text in the textbox to make it empty and tabout

then the valiation does not fire which should say "Name is a required field". the textbox text is replaced with the null display text.. "Enter section name" and textbox changes to span showing "Enter section name"


Nov 11, 2011 at 8:10 AM

I appears as initially the page(or at least a part of the page including the treeview) is not parsed for finding unobtrusive validation attribute. When a new node is created I parse it for attribute so it works, but the initial parsing is missing. 

Are you rendering the TreeView through ajax? Or are you including it in ViewOnOff...or ?

Another possibility is the initila js references are put in the wrong order. Pls compare the order in your project with the one of the example included with the binaries.

Pls tell me if you are in some of the situations depicted above. Otherwise, please prepare me a sample èproject showing the problem without ANY DATABASE, and send it to me, through my blog contact page:

Nov 11, 2011 at 10:39 AM

Yes, i am loading the treeview from a partial view result loaded through AJAX.

The order of the script is in sequence with what you have in the sample project.

Nov 11, 2011 at 12:57 PM

The problem is ajax. Elements received through Ajax are not parsed automatically for validation attributes, so you have to parse them in the oncsuccess function of the ajax call. this is true not only for the TreeView

but for all kind of content.

Now the normal parsing function of Mvc3 has a deep bug, so you have to use one of the functions below(that contain a patch) passing them a selector that selects the dom element that receive the ajax content:

$.validator.unobtrusive.clearAndParse(selector) : reset all validation of the form the element selected by selector is in, and parse the new content. Usefull if you arer replacing the whole content of the form through the ajax call


$.validator.unobtrusive.parseExt(selector): add the rule found in the new content to the already exoisting validation rules


The first function is more efficient, so you might prefere it if you are replacing all content of the form.

Nov 11, 2011 at 3:01 PM


thanks for the information. i would do this and revert.

thanks again!

Nov 11, 2011 at 3:42 PM

Yes, that was the reason.. Its all working absolutely fine now.

thanks a ton for your support! Appriciate it

Nov 12, 2011 at 1:47 AM

On the similar lines, i have one more question....

Consider the scenario and tree structure as below




Folder 2

Folder 3

Folder 4

     Folder 5


            document 1

            document 2

Will it be possible, when the treeview is loaded in edit mode initially, expand only the folders that have documents in them as child record?

I know that current state can be maintained via TreeViewOptions method of persisting it through cookie.

IS there any way by which i can expand only the folders that have documents in them.



Nov 12, 2011 at 7:58 AM
Edited Nov 12, 2011 at 8:02 AM

You can use the itemStatus function that can be passed as optional parameter. It determines the open/close(there are four possible behaviour) behaviour of each node as a function of the data item and of the level it has in the tree.

Find it in the documentation:

If you want updates the clos(open status also on the client side in response to deletion, addition and node moves, you can use both the events and the MvcControlsToolkit_TreeView_ChangeNodeState(node, operation) function to change adequately 

the open status of nodes. 

Verifying if a node has no children is easy on the server side...just seeing the collection of sons. On the client side, consider each node is basically a <li> tha contains some DOM logics and, if it can have children it contains a nested <ul>...

just seeing if this <ul> contains something. The <ul> id a directc ton of the <li> so you can locate it with $('>ul', currNode) once you have the node you are in (currNode) from an event.

Dec 2, 2011 at 11:27 AM

Hi,  if the Mvc Controls Toolkit was usefull to you and if you like tit, pls take some time to give a 5 star review both on codeplex and on nuget to the new 1.6 release of the Mvc Controls Toolkit.

Jan 11, 2012 at 10:25 PM
frankabbruzzese wrote:

Hi,  if the Mvc Controls Toolkit was usefull to you and if you like tit, pls take some time to give a 5 star review both on codeplex and on nuget to the new 1.6 release of the Mvc Controls Toolkit.

Is the neget package removed or is the above link to nuget incorrect? Could not find a valid result for "MVC Controls Toolkit" or frankabbruzzese in nuget.

Jan 11, 2012 at 10:27 PM
ssathya wrote:
frankabbruzzese wrote:

Hi,  if the Mvc Controls Toolkit was usefull to you and if you like tit, pls take some time to give a 5 star review both on codeplex and on nuget to the new 1.6 release of the Mvc Controls Toolkit.

Is the neget package removed or is the above link to nuget incorrect? Could not find a valid result for "MVC Controls Toolkit" or frankabbruzzese in nuget.

Sorry; my fault. Found Mvc3ControlsToolkit.