This is a migrated thread and some comments may be shown as answers.
Losing the image while editing treeview
0 Answers 26 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Craig Tarp
Top achievements
Rank 1
Craig Tarp asked on 26 May 2010, 11:03 PM
Hey All,

the CRUD edit/delete article posted in this forum has helped tremendously in updating the treeview however, After I edit the node text, I loose the image that was set in the onLoad...I am loading the treeview by binding to a model view from controller.. as follows 


 

 

 
 
 .BindTo(Model.Units, mappings =>  
                {  
                    mappings.For<myXP.Models.CustomClasses.Unit>(binding => binding  
                    
                   .ItemDataBound((item, unit) =>  
                                      {  
                                         item.Text = unit.Title;                                                
                                          item.ImageUrl = "../../Images/unit32.png";                                              
                                      })  
 
                    .Children(units => units.Lessons)); 

 I really need to maintain the  item.imageUrl


Javscript......

 
 
function onItemClick($item, $node) {  
        var treeView = $('#TreeView').data('tTreeView');  
        var nodeText = treeView.getItemText($node);  
        var menuItemText = $item.text();  
 
        if (menuItemText == "Edit") {  
            // replace the node contents with a textbox  
            setTimeout(function() {  
                $node.find('.t-in:first')  
                     .replaceWith($('<input type="text" />')  
                        .val(nodeText)  
                        .data('text', nodeText)  
                        .keydown(function(e) {  
                            if (e.keyCode == 13) {  
                                // handle enter key - edit the node  
                                  
                                var newText = $(this).val();  
                                // remove the textbox from the node  
                                $(this).replaceWith($('<span class="t-in"/>').html(newText));  
                                  
                                if (newText != nodeText) {  
                                    // if the text changed update the node  
                                    onEdit($node);  
                                }                            
                              
                            } else if (e.keyCode == 27) {  
                                // handle escape key - cancel editing  
                                  
                                // remove the textbox from the node  
                                $(this).replaceWith($('<span class="t-in"/>').html(nodeText));  
                            }  
                        }))  
            }, 0);  
        } else if (menuItemText == "Delete") {  
            //delete the node  
            onDelete($node);  
        }  
    }  
 
    function onEdit($node) {  
        var treeView = $('#TreeView').data('tTreeView');  
 
        // post to Controller.EditNode using jQuery  
        $.post('<%= Url.Action("EditNode", "CourseBuilder") %>',  
            {  
                level: $node.parents('.t-item').length, // node level required to determine whether this is a lesson or a section  
                id: treeView.getItemValue($node),  
                text: treeView.getItemText($node),  
                value: treeView.getItemValue($node)  
            }  
        );  
    } 

not sure what I am missing here....

thanks in advance for any help I get on this as I already got a ton of help from the forum that posted the above code...many tahnks

craig




Tags
TreeView
Asked by
Craig Tarp
Top achievements
Rank 1
Share this question
or