This is a migrated thread and some comments may be shown as answers.

Editing in Treeview node

3 Answers 249 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

saroj asked on 25 Jun 2013, 12:45 AM

Hi Kendo support,

I was trying to transer the telerik logic of editing in treeview node, but got some problem, is there any sample example in kendo for editing the node, Also i want to do for adding the node in treeview as well. Any sample or idea will be helpful.

Below is my telerik code for editing,

//Partial page

@model IEnumerable<PFLMakeTreeviewModel>
@model IEnumerable<PFLMakeTreeviewModel>

<script type="text/javascript">
function onLoad(e) {

// subscribe to the contextmenu event to show a contet menu
$('.t-in', this).live('contextmenu', function(e) {
// prevent the browser context menu from opening
e.preventDefault();

// the node for which the 'contextmenu' event has fired
var $node = $(this).closest('.t-item');

// default "slide" effect settings
var fx = $.telerik.fx.slide.defaults();

// context menu definition - markup and event handling
var $contextMenu =
$('<div class="t-animation-container" id="contextMenu">' +
'<ul class="t-widget t-group t-menu t-menu-vertical" style="display:none">' +
'<li class="t-item"><a href="#" class="t-link">Edit</a></li>' +
//'<li class="t-item"><a href="#" class="t-link">Delete</a></li>' +
'</ul>' +
'</div>')
.css( //positioning of the menu
{
position: 'absolute',
left: e.pageX, // x coordinate of the mouse
top: e.pageY // y coordinate of the mouse
})
.appendTo(document.body)
.find('.t-item') // select the menu items
.mouseenter(function() {
// hover effect
$(this).addClass('t-state-hover');
})
.mouseleave(function() {
// remove the hover effect
$(this).removeClass('t-state-hover');
})
.click(function(e) {
e.preventDefault();
// dispatch the click
onItemClick($(this), $node);
})
.end();

// show the menu with animation
$.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });

// handle globally the click event in order to hide the context menu
$(document).click(function(e) {

// if clicked inside the editing textbox - discard
if ($(e.target).is('#TreeView14 :text'))
return;

// remove any textboxes from the treeview and update the node if needed
$('#TreeView14 :text').each(function() {
var $textBox = $(this);
var newText = $textBox.val();
var oldText = $textBox.data('text');

// the node to which the textbox belongs to
var $node = $textBox.closest('.t-item');

// remove the textbox from the node
$textBox.replaceWith($('<span class="t-in" />').html(newText));

// if the text changed update the node
if (newText != oldText) {
onEdit($node);
}
});

// hide the context menu and remove it from DOM
$.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function() {
$contextMenu.remove();
});
});
});
}

function onItemClick($item, $node) {
var treeView = $('#TreeView14').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 = $('#TreeView14').data('tTreeView');

// post to HomeController.EditNode using jQuery
$.post('@(Url.Action("EditNode", "ReferenceFiles"))',
{

level: $node.parents('.t-item').length, // node level required to determine whether this is a Category or a Product
id: treeView.getItemValue($node),
text: treeView.getItemText($node)
}
);
}

// function onDelete($node) {
// var treeView = $('#TreeView14').data('tTreeView');
//
// if (confirm('Are you sure you want to delete this node?')) {
//
// // post to HomeController.DeleteNode using jQuery
// $.post('@(Url.Action("DeleteNode", "ReferenceFiles"))',
// {
// level: $node.parents('.t-item').length,
// id: treeView.getItemValue($node),
// });
//
// $node.remove();
// }
// }

// function AppendItem() {
// debugger
// var treeView = $("#TreeView14").data("tTreeView");
// var itemData = { Text: $("#itemText").val() };
// var selected = getSelected();
// treeView.append(itemData, selected.length != 0 ? selected : null);
// }

</script>

@* <button onclick="AppendItem()" class="t-button">Add new item</button>
@Html.TextBox("itemText", "Add item", new { style = "width: 100px" }) *@

<style type="text/css">
ul.t-widget.t-group.t-menu.t-menu-vertical
{
background-color:White;
width:80px;
font-size: 10pt;
color:black;
}
div.t-top, div.t-mid, div.t-bot
{
width:20%;
}
</style>


@(Html.Telerik().TreeView()
.Name("TreeView14")
.ClientEvents(events => events.OnLoad("onLoad"))
//.DragAndDrop(settings => settings
// .DropTargets(".drop-container"))
.BindTo(Model, mappings =>
{
mappings.For<PFLMakeTreeviewModel>(binding => binding
.ItemDataBound((item, make) =>
{

item.Text = make.MAKE_DESCRIPTION;
item.Value = make.MAKE_ID.ToString();

})
.Children(make => make.Models)
);
mappings.For<PFLModelTreeviewModel>(binding => binding
.ItemDataBound((item, model) =>
{
item.Text = model.MODEL_DESCRIPTION;
item.Value = model.MODEL_ID.ToString();
})
.Children(model => model.Series)
);
mappings.For<PFLSeriesTreeviewModel>(binding => binding
.ItemDataBound((item, serie) =>
{
item.Text = serie.SERIE_DESCRIPTION;
item.Value = serie.SERIE_ID.ToString();
})

);


})

)

//Controller

[HttpPost]
public ActionResult EditNode(int level, int id, string text)
{
var ausfleet = new AUSFLEETEntities();
ReferencesFiles _ReferencesFiles = new ReferencesFiles();

if (level == 0)
{
var make = ausfleet.PFL_MAKE.FirstOrDefault(c => c.MAKE_ID == id);
if (make != null)
{
make.MAKE_DESCRIPTION = text;
}
}
else if (level == 1)
{
var model = ausfleet.PFL_MODEL.FirstOrDefault(p => p.MODEL_ID == id);
if (model != null)
{
model.MODEL_DESCRIPTION = text;
}
}

else
{
var serie = ausfleet.PFL_SERIE.FirstOrDefault(p => p.SERIE_ID == id);
if (serie != null)
{
serie.SERIE_DESCRIPTION = text;
}
}
ausfleet.SaveChanges();
return new EmptyResult();
}

Editing in Treeview node

3 Answers, 1 is accepted