Html.TreeViewFor root node disable

Aug 24, 2012 at 11:02 AM

Hi CodePlex,

    I want disable only root node .. pls let me know hot to do disable it..

 

Thanks in advance.

 

 

Coordinator
Aug 24, 2012 at 12:28 PM

What do you mean with disable? pls explain better what you want to do.

Aug 24, 2012 at 12:31 PM
Edited Aug 24, 2012 at 12:44 PM

Hi Frank,

I want  to disable first node of tree.

Please help me out. If Possible please give share code snnipet as I am totally new to it.

Coordinator
Aug 24, 2012 at 3:22 PM

Pls explain me better what do you mean with disabling. User cant edit it? It gas a grayish appearence or what

Aug 27, 2012 at 5:41 AM

Hi Frank,

                I don't want that root node in edit mode on mouse click or enter click. It should always in display mode. As we are specifying edit mode template and display mode template, so my question is how to apply only display mode to root node means  only start mode of tree only .

My Tree display like this.

+Root

------ Doc1

-------Doc2

+Foder

-------DOc3

-------DOc4

************************ Here I want to display "Root" node only in display mode.

 

Thanks,

Ganesh

Coordinator
Aug 27, 2012 at 12:37 PM

Hi Ganesh,

You pass to the TreeView two vectors of node templates one for the display state(displayTemplates parameter) and another for the edit state(editTemplates parameter), then for each node select which template to use as a function of the node and of its depth in three with the two parameters itemTemplateSelectorDisplay and itemTemplateSelectorEdit. (see the documentation).

To have a different behaviour of just the root node in edit mode just add one more edit template that is specific for the root node to editTemplates . You can make this edit template the same as a normal display template(also if it is an edit template...it doesnt matter). In the itemTemplateSelectorEdit function check the depth of the node to identify the root node, and if the depth is 0 return the array index of the newly added template.

However, put all data of the new template in hidden fileds also otherwise they will be lost during the post, and the controller would be forced to recompute them again(maybe this is not a problem for the root node ...anyway...I just pointed out the problem)

  

Aug 27, 2012 at 1:19 PM

Hi Frank,

   Thanks  for your reply.

Yes, your solution is perfect if I want to apply the same behavior to all root nodes. But Requirement is "I want to display the start node not all root node". As per above sample

+Root_1                 -----------------------> This node I want only in Display mode not all root node.

--------DOc1

--------Doc2

++++Root_2

-----------Doc3

-----------Doc3

If you have one sample tree include all templates example Please let me know because even in documentation example is not mention and syntax itself is very tricky as there is no intellisense in VS.

Thanks In advance. :)

Thanks,

Ganesh

 

 

 

Coordinator
Aug 27, 2012 at 5:13 PM

Why???

You can provide an edit template specific for the root node, as explained in may previous answer. This require adding a new template to the array templates and modifying the template selection function to return the index of this template when invoked on the root.

In the code below I modified the treeview example in the BinariesWithSimpleExamples file to have a display only root:

Html.TreeViewFor(
                    m => m.EmailFolders,
                    i => i == 0 || i==2 ? "Children" : null,
                    ExternalContainerType.span,
                               "filetree treeview-red treeToedit",
                    new object[] 
                    {
                        _S.L<EmailFolder>(h => 
                            "<span class='folder'>" +h.DisplayFor(m => m.Name).ToString()+"</span>"),
                            
                        _S.L<EmailDocument>(h => 
                            "<span class='file'>" +h.DisplayFor(m => m.Name).ToString()+"</span>"),
                        _S.L<EmailFolder>(h => 
                            "<span class='folder'>" +h.DisplayFor(m => m.Name).ToString()+"</span>"), 
                    },
                    (x, y) => x is EmailFolder ? (y == 0 ? 2 : 0) : 1,
                    "filetree treeview-red treeToedit",
                    new object[] 
                    {
                        _S.L<EmailFolder>(h => string.Format(
                            "<div class='folder' >{0} {1} {2} {3} {4}</div>", 
                            h.TypedEditDisplayFor(m => m.Name, simpleClick: true).ToString(),
                            h.TreeViewDeleteButton(Url.Content("~/Content/folder_delete_16.png"), 
                                ManipulationButtonStyle.Image).ToString(), 
                            h.TreeViewAddButton(1, Url.Content("~/Content/document_add_16.png"), 
                                ManipulationButtonStyle.Image).ToString(),
                            h.TreeViewAddButton(0, Url.Content("~/Content/folder_add_16.png"), 
                                ManipulationButtonStyle.Image).ToString(),
                            h.Hidden("IsFolder", true).ToString())),
                            
                        _S.L<EmailDocument>(h => string.Format(
                            "<div class='file' >{0} {1} {2}</div>",
                            h.TypedEditDisplayFor(m => m.Name, simpleClick: true, editEnabled: true).ToString(),
                            h.TreeViewDeleteButton(Url.Content("~/Content/document_delete_16.png"), 
                                ManipulationButtonStyle.Image).ToString(),
                            h.Hidden("IsFolder", false).ToString())) ,
                         _S.L<EmailFolder>(h => string.Format(
                            "<div class='folder' >{0} {1} {2} {3} {4}</div>", 
                            h.DisplayFor(m => m.Name).ToString(),
                            h.HiddenFor(m => m.Name).ToString(), 
                            h.TreeViewAddButton(1, Url.Content("~/Content/document_add_16.png"), 
                                ManipulationButtonStyle.Image).ToString(),
                            h.TreeViewAddButton(0, Url.Content("~/Content/folder_add_16.png"), 
                                ManipulationButtonStyle.Image).ToString(),
                            h.Hidden("IsFolder", true).ToString()))
                    },
                    (x, y) => x is EmailFolder ? (y== 0 ? 2 : 0 ) : 1,
                    TreeViewMode.InitializeDisplay,
                    (x) => "allnodes",
                    (x, y) => TreeViewItemStatus.initializeShow)

Aug 28, 2012 at 12:44 PM

Thanks a lot , Frank.

It works perfectly as  per my requirement. Thanks for your help :)