Unable to deselect the selected node in KendoUI tree view - kendo-ui

I have a tree-like structure using Kendo UI tree view. Each node is displayed as a hyperlink and on clicking each one, a new kendotabstrip will be opened. My problem is if I select one node, the results are displayed fine in a new tab but if I close the newly opened tab and then select the same node then no new tab is opened since the node has already been selected. If I have to choose the same node, then I have to access another node and then come back to node.
I tried to deselect the selected item once the new tab is opened using the following snippet:
var treeview=$(#grpTree).data("KendoTreeView");
var selNode=treeview.select();
selNode.find("span.k-state-selected").removeClass("k-state-selected")
but the node is not getting deselected. Is there any other way to do it or have I missed out anything?

I know this post is a bit dated, but as Telerik is continually upgrading its components, I thought I'd put this here so that people can be aware of this change moving forward.
You can deselect all selected nodes with the following syntax:
var treeView = $("#treeView").data("kendoTreeView");
treeView.select($());
Source: Kendo UI Treeview Documentation for Select

Yes this is by design. If you want to attach a click handler which will be triggered each time (no matter if the node is already selected). You can attach a delegate event like the following:
$('#treeviewName').on('click','.k-item',function(e){
var clickedNode = $(this);
var treeViewClientObject = $(e.delegateTarget).data().kendoTreeView;
})

My code:
var treeview=$(#grpTree).data("KendoTreeView");
treeview.select(null);

This calls the change function always, so this can be another solution:
$("#favorite_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#calendar_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');
$("#calendar_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#favorite_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');

Related

Kendo Grid - PopUp windows not being removed from the DOM

I have a kendo grid with a custom popup:
columns.Command(commands =>
{
commands.Edit();
}
.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))
Each time I click the edit button the window pops up but when I close it the window is not removed from the DOM.
I saw this post: http://www.telerik.com/forums/popup-windows-do-not-get-removed-from-dom and Telerik says the issue has been fixed.
What are some things that would cause this behavior?
UPDATED
This grid is nested in a Kendo TabStrip if that helps. Other than that I don't see anything out of the ordinary. The popup is entirely managed by the grid.
UPDATED 2
So I got the un-minimized code for the grid (kendo.grid.min.js, version 2013.3.1119, starting at line 1172), slopped it into my project and modified just the following with the two log statements to verify that destroy is being bound and called:
_destroyEditable: function () {
var that = this;
var destroy = function () {
if (that.editable) {
// My edit
console.log("...destroy() called");
that._detachModelChange();
that.editable.destroy();
that.editable = null;
that._editContainer = null;
}
};
if (that.editable) {
if (that._editMode() === "popup") {
// My edit
console.log("Binding destroy() to 'deactivate'...");
that._editContainer.data("kendoWindow").bind("deactivate", destroy).close();
} else {
destroy();
}
}
},
Each time I click edit and then close the window I see the expected two messages yet the window is not removed. Here is a screenshot of the debugger:
The outlined windows are the dom elements generated.
After much trial and error and deep diving it turns out this problem has to do with our scripts in our site's layout. At some point whomever setup the kendo scripts put in not only the 'kendo.all.min.js' but right after it 'kendo.web.min.js', 'kendo.aspnetmvc.min.js' and then about 10 individual kendo.*.js including the grid.
After viewing this link:
http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies
I realized that the site is creating these objects multiple times. Removing the script references in accordance to the link above resolves the issue.

detecting altKey on MacOS in zoomchart

I'm implementing functionality to create a link between two nodes on Shift+Alt+Click. Like this
function graphSelectionChange(event){
var selection = event.selection;
if (selection.length === 2 && event.altKey){
var fromitem=selection[0];
var toitem=selection[1];
chart.addData({
links:[{
"id":"ll"+nextId,
from:fromitem.id,
to:toitem.id,
"style":{"label":"newLink"}
}]
});
nextId += 1;
}
}
The altKey seems not to be detected. According to this http://jsfiddle.net/Rw4km/ it is the alt/option button on a keyboard. Any clue?
Use click event (it also has selection attribute).
Selection event does not have altKey property.
There are other selection changes, like selected nodes disappearing, that do not have associated mouse clicks an you probably do not want a link added in such case.

Provide ID to dynamically generated cloned element

I am dragging and dropping some element (with the help of Kendo UI) and generating the new element that are the clone element of draggable elements, my problem is that I want to provide new id to them? How can I do that?
Being droptargetOnDrop your drop event handler, you should do:
function droptargetOnDrop(e) {
var newEl = $(e.draggable.currentTarget).clone();
newEl.attr("id",kendo.guid());
e.dropTarget.append(newEl);
}
See your fiddle modified running here: http://jsfiddle.net/OnaBai/rTxaE/2/

Pageable treeview using Kendo?

Let's say I have hierarchical data that I display in a treeview. It's possible that a particular node might have 1000 children and I don't want to display them all, so I'm toying with the idea of paging the nodes in a tree. I would show 10 children and if there are more, the user needs to click on the next/previous buttons to see them. I've got sql paging working but I can't get the treeview to do what I want.
If I do this, my controller gets the proper node id and page id and it returns the correct page of results back. But then the treeview shows only the 1 page of children I just requested; the rest of the hierarchy (all the parents) is lost:
$("#btnNextPage")
.click(function () {
var selectedNode = treeview.select();
var selectedNodeID = treeview.dataItem(selectedNode).id;
ds.read({
LoopID: selectedNodeID,
page: ds.page() + 1
});
If I do this, I can keep the hierarchy and my controller gets called, but I can't figure out how to pass in the page that I'm requesting.
$("#btnNextPage")
.click(function () {
var selectedNode = treeview.select();
var testnode = treeview.dataItem(selectedNode);
testnode.loaded(false);
testnode.load();
});
I've been using ASP.NET webforms and this is my first foray into jquery and kendo. Any ideas?
When you change pages the Kendo DataSource replaces its records in memory with the new page retrieved from the server.
You would need to retain all the previously loaded pages in a separate observable array and bind your treeview to that instead.
With a pointer from the folks at Telerik, I got this working. The trick was to use the children property which is the datasource for the children of the selected node. So when the next page button is clicked I do this:
parentNodeDataItem.children.read({
LoopID: parentNodeID,
page: currentPage
});
This produced the behavior I wanted, which was for the children to be refreshed without losing the ancestor hierarchy.

Kendo menu does not draw arrow icons for appended items

In order to add items to a kendo menu dynamically, here in the forums, the kendo team suggested to use the append method as described in this example to append submenus.
I've done this, now I have the problem of arrows not rendering for nodes. The issue can be seen in this example: http://jsfiddle.net/MMRCf/16/ if you hover on "Item 1" then click on "Sub Item 2", "Sub Item 2" will be populated with a submenu. This submenu lacks arrows for expanding nodes.
Perhaps this is a bug that needs reporting but I cannot post on Kendo menu forum.
Does anyone know how I could get arrow icons to render?
I think the append method is where a fix could be applied:
append: function (item, referenceItem) {
referenceItem = this.element.find(referenceItem);
var inserted = this._insert(item, referenceItem, referenceItem.length ? referenceItem.find("> .k-group, .k-animation-container > .k-group") : null);
each(inserted.items, function (idx) {
inserted.group.append(this);
var contents = inserted.contents[idx];
if (contents) {
$(this).append(contents);
}
updateArrow(this);
});
updateArrow(referenceItem);
updateFirstLast(inserted.group.find(".k-first, .k-last").add(inserted.items));
return this;
},
Actually seems the updateArrow function is broken. I've updated it for the next release, meanwhile you can also update it to get it working, from this:
item.find(".k-icon").remove();
to this:
item.find("> .k-link > .k-icon").remove();

Resources