I have a treeview bound to a remote service. The service returns JSON and builds the tree; no problem with any of that.
I have a toolbar associated with the tree that allows a user to perform operations on the tree. The actions each toolbar option takes is dependent on data carried in the JSON that provides the datasource for the tree. I grab this data like so:
selectedNode = $("#treeview").data("kendoTreeView").select();
item = $("#treeview").data("kendoTreeView").dataItem(selectedNode);
This, however, fails on IE8, with the message "This object does not support this action."
I've tried a few variants on this, but so far no go. What am I doing wrong here?
Related
In KendoUI, how do I select a treeview element if it does not have an ID? Like by the style class or something.
I am writing an MVVM application and there are 2 tabs in a kendo tab strip with each containing a treeview. On selecting one tab, I want it's checkboxes to be updated based on what checkboxes were checked in the other tab and then I want to also call updateIndeterminate() on the treeview it contains within it.
Now, since I am using MVVM, I don't want to access the treeview by it's id. All I can find online on searching is $("#treeView") and in the Telerik forums, the example to call updateIndeterminate() is also this -
var treeview = $("#treeview").data("kendoTreeView");
treeview.updateIndeterminate();
Am I missing something here? I wonder why it's so hard to find.
I suppose the reason why it's hard to find is that it goes against the idea of declarative initialization and the separation of view and model. Your code is not supposed to interact with the widget itself. Instead, all your logic should be wired up in your view model which is bound to the UI.
You can certainly find it without an id, e.g. with something like this:
var treeView = $("ul[data-role=treeview]").first().getKendoTreeView();
or by using the .k-treeview class, but I wouldn't recommend it. If you really need to access it in code, you should give it an id.
I have an handler shared between several TreeViews.
In the handler I have access to a TreeItem instance, is there a (simple) way to determine the TreeView it belongs to?
Currently I'm relying on external variables to record the "currently active" TreeView, but that makes the code messy and, probably also rather brittle. Is there an alternative?
I think it is currently not possible, at least on JavaFX 2.2. Looking at TreeView source code (available here), the TreeView.setRoot(TreeItem<T> root) method just sets the TreeView's root property, without setting some reference back to the TreeView on the root item. In this case, from the root element, there is no reference to the TreeView which it was inserted in.
Thus, even if it is possible to reach the root item from a deeper one using TreeItem.getParent(), it is not possible to reach the TreeView that has the item.
I'll keep the question below, but if anybody else has this problem the issue was a bug in kendo and has been fixed in the most recent version. So the solution is to update to the latest kendo release.
I've been trying to find a good way of listing all of the nodes in a kendo-ui treeview, and have managed to put together a pretty solid way of doing so. First I define the dataSource, for the sake of simplicity let's say:
data = [
{text:element1, items:[
{text:element2},
{text:element3}]},
{text:element4}]
Then, I set the data source as an observableHierarchy:
my_treeview.setDataSource(kendo.observableHierarchy(data));
When I want to access the list of nodes, I can get a JSON object with:
my_treeview.dataSource.data().toJSON();
This works well; it produces a correct, properly-formatted JSON object. If I call JSON.stringify on the above, I get:
[{"text":"element1","items":[{"text":"element2","items":[]},{"text":"element3","items":[]}]},{"text":"element4","items":[]}]
However, when I enable drag and drop on my tree and drag an element into a different parent, it disappears from the json output. For example, if I drag element3 into element4, the json object returned is:
[{"text":"element1","items":[{"text":"element2","items":[]}]},{"text":"element4","items":[]}]
Which is the equivalent of:
data = [
{text:element1, items:[
{text:element2}]}
{text:element4}]
The table's display remains correct, however, with element 3 appearing to be a child of element4. So my question is, how can I get the dataSource to update properly with drag & drop?
If anybody else has this problem, the issue was a bug in kendo which has been fixed in the most recent version. So the solution is to update to the latest kendo release.
I have been looking for a while for a solution to monitor DOM node insertion/removal, without success. For example events like DOMnodeInserted are not cross-browser and are being deprecated.
I recently watched tutorials about libraries that implement MVC or MVVM patterns, like Backbone or Knockout. As such libraries monitor DOM elements, I was wondering if they could be used to monitor DOM node insertion/removal.
For example:
if I have a select element on the page, I'd like to trigger an action when a new option gets added.
if I have a table element on the page, I'd like to trigger an action when a row is added or removed.
This isn't what Knockout does, and I don't think you'll find success there.
You could do something like binding your select elements to a KO observableArray, then monitor that array for changes. But that doesn't stop someone from manually inserting a select element into the DOM.
Bottom line: for KO, you're barking up the wrong tree.
I have a request concerning Drupal 6.x
I'd like to have this behaviour:
imagine to have 2 columns, on the left a list of nodes (only titles for example) and on the right a view showing just one of the contents on the left.
My idea would be to achieve this with an AJAX-fashion: clicking a link in the list on the left updates the view on the right with the actual node.
Which is the best way to handle this?
My idea is to use Panels, make 2 column panel with 2 views, one (left) filtered on content type, with no arguments, and one on the right which takes in as an argument the node id to be displayed.
But how to link the 2 views with AJAX?
(or, better, how to update the view on the right with an AJAX call?)
is this possible?
Any help or idea is really welcome
Thanks!
Cheers
Mauro
You also can do a quick hack, which is quite flexible, because it allows you to change your views without changing code.
I have had a similar task recently and for your task I would do the following:
for your right column, create a exposed filter (node id) and hide whole exposed filter form using CSS.
using jQuery, attach a click behavior to titles on your left column.
the click behavior takes the node id, finds the attached exposed filter at the right column, enters the node id into the input field and executes form's .submit().
the .submit() triggers the build-into-views well debugged ajax request which refreshes your right column.
this is certainly possible, and not very difficult to do.
Your task can be divided into two main parts:
Providing a 'callback' URL in the Backend that takes a node id (nid) and returns the markup to display the node in the right panel in a format that can be processed by javascript. This will be done in PHP within a normal Drupal module. The main point is not to return a full Drupal page as usual, but only the markup for the node.
Create logic for the Frontend that, when triggered by clicking a link in the left panel, retrieves the new node markup via the URL callback above and replaces the content of the right panel with it. This needs to be done in javascript, using the Drupal javascript API with jQuery.
You can find an introduction and example for AJAX in Drupal here. (This does almost exactly what you want to do, only with images)
You should also look at this more general entry point for JavaScript in Drupal.