I'm trying to get the selected item with a specific id from outside of the kendo treeview. Basically, I'm writing a js function to try to find out which node is selected. Is there a way to find out which node (and it's datasource properties) can be extracted?
I can get the node data if the an event listener passes the event but can't figure out a way to get to that node without the event listener.
Once I get that data, I would like to update some button links to go to the next item in the node.
//get node WITH listener:
function getNode(e){
var nodedata = $('#treeName').getKendoTreeView().dataItem(e.node).id;
console.log(nodedata);
}
//BUT I want to find out from outside of Kendo treeview with something like this:
function getNode() {
var getSelectedId = $('#treeName').getKendoTreeView().getCurrentSelectedItem().id
console.log(getSelectedId);
}
It's pretty straightforward. Just use
$('#treeName').data("kendoTreeView").select().data().id
Related
Need to find way to add hyperlinks to components of an assembly in the a360 viewer such that, when clicked or touched with mobile device, will navigate to a web page for more information. Realize it requires Forge API but can't find any specific examples of such a solution. I think this can be done from a properties table but I want direct navigation from touching/clicking the object.
You could just subscribe to the object selection event and react to it by e.g. opening a given URL:
viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
function (event) {
// Get id of first selected item
var dbId = event.dbIdArray[0];
if (dbId) {
// Maybe get the properties of the selected object
viewer.getProperties(dbId, function (props) {
// Depending on the properties you could open a website
// Just printing to the console the external id of
// the selected component as an example
console.log(props.externalId);
});
}
}
);
If you search for "Autodesk.Viewing.SELECTION_CHANGED_EVENT" you can find some articles and samples also using this event, e.g. https://forge.autodesk.com/blog/selection-override
I am using angular-ui sortable version 1.2
I want to handle the move of an item from one list to another, and update the back-end accordingly.
jquery-ui-sortable defines a bunch of events, including the receive event
From within that event handler, I cannot find a way to access the angular model item which was moved, and its new parent list.
See this codepen sample.
You can see that I can access the item via the scope() in the update event, but not in the receive event.
Any suggestions for a way to handle these moves? either via the receive event or otherwise?
Reorder the items in one list
UI sortable behaves intuitive if you have one list of items and just want to reorder the list. In this case you do the following if you have an array of objects in your controller like this:
$scope.yourObjects = [
{title:'Alabama'}, {title:'Ohio'}, {title:'Colorado'}
];
in your html you may create a list of these items by using ng-repeat:
<ul ui-sortable="sortableOptionsA" class="list items-container" ng-model="yourObjects">
<li class="item sortable" ng-repeat="item in yourObjects">{{item.title}}</li>
</ul>
where sortableOptions is:
$scope.sortableOptionsA = {
stop : function(e, ui) {
var item = ui.item.scope().item;
var fromIndex = ui.item.sortable.index;
var toIndex = ui.item.sortable.dropindex;
console.log('moved', item, fromIndex, toIndex);
}
};
As you can see, in the stop function we have access to all relevant information we need to be informed about the movement.
Connect 2 list of items
Now the problem get's a little bit complicated. UI Sortable gives us no information about the drop-targets that we can use directly in any way. If we move one item from one list to another list the following events are fired:
start: We have access to the item that will be moved including the scope of this item.
update: We have access to the item that is moved including the scope of this item.
Now the item is deleted from it's source list
removed: The item was removed from the source list. The scope is no longer valid (e.g. undefined).
received: The item is about to be dropped in the second list. scope is still undefined, we have only access to the sender e.g. the drag source.
Now the item is inserted in the target list.
update: The item is dropped at the target list. but we have no access to the item scope nor does there a target object exist in the event objects. The jQuery UI Sortable did not provide these information and the angular wrapper did not expose the target model in any way :(
stop: If all steps of the drag'n'drop process are done, the stop event is fired. But we have also no access to the items target scope or the target list.
What can we do if we want to get informed about a movement and which item was moved to what kind of list?
The item that was moved is accessible by ui.item.sortable.moved in the stop event. This is our item that was moved.
Which list is the drop-target can be determined by Angular's $watch function. We just listen to changes to the lists and know, which list was modified. One caveat: the source and the target list are changing, but the target list is changed at last (see the above event order). If we listen to the changes in this way:
$scope.dropTarget = null;
$scope.$watchCollection('lists[0].items', function() {
console.log('watch 0');
$scope.dropTarget = $scope.lists[0];
});
$scope.$watchCollection('lists[1].items', function() {
console.log('watch 1');
$scope.dropTarget = $scope.lists[1];
});
we have all information to get to know wich item was moved to what kind of list and what are the from and the to index:
stop:function(e, ui){
var item = ui.item.sortable.moved;
var fromIndex = ui.item.sortable.index;
var toIndex = ui.item.sortable.dropindex;
console.log(item, fromIndex, toIndex, $scope.dropTarget);
},
PLUNKR with a lot of debug code that shows what kind of information is available during the drag'n'drop process.
Remark: if you move one item from the 'Connected lists' to 'One sortable list' the log output is wrong - because there is no listener to the 'One sortable list' list!
I am very new to ZK framework and trying to customize few things and have struck at one point which I am not sure how to achieve that.
I have a predefined section where I need to show 2 drop down and a button and need to persist those drop down values on button click event.
This is how It has been define in Spring file
<bean id="mybean" parent="parentBean" class="WidgetRenderer">
<property name="detailRenderer">
<bean class="DetailsListRenderer" parent="abstractWidgetDetailRenderer"/>
</property>
</bean>
Here mybean is being used to show main section and I am adding my drop down using this bean while button are being added to detailRenderer.
Save button is bind to onClick event, but I am not sure how I can fetch values from my custom drop down?
I am aware about binding those Dropdown with onClick event but they have to be in same class.
Can any one suggest me how I can fetch values of those drop down.I am creating down down with following code
Listbox listbox = new Listbox();
listbox.appendItem("item1", "item1");
listbox.appendItem("item2", "item2");
This is my button code in another class
protected void createUpdateStatusButton(Widget widget,Div container)
{
Button button = new Button(LabelUtils.getLabel(widget, buttonLabelName, new Object[0]));
button.setParent(container);
button.addEventListener("onClick", new EventListener()
{
public void onEvent(Event event)throws Exception
{
MyClass.this.handleSaveStatusEvent(widget, event);
}
});
}
You may want to listen to the onSelect (I prefer to use Events.ON_SELECT rather than writing the strings) which is more specific to when the Listbox selection changes.
Either way, the key is to get the information you want from the Event passed to your EventListener, rather than going back to your Listbox itself. The basic Event usually carries useful information on getTarget and getData but using more specific events (SelectEvent in this case) will give you access to more relevant info.
button.addEventListener(Events.ON_SELECT, new EventListener<SelectEvent<Listitem, MyDataObject>() {
public void onEvent(SelectEvent<Listitem, MyDataObject> event) {
// Now you can access the details of the selection event..
List<Listitem> selectedItems = event.getSelectedItems();
List<MyDataObject> selectedObjects = event.getSelectedObjects();
}
});
You can find out what events are available for different ZK widgets in their Component Reference documentation.
If I understand the question (I don't think I did in my previous response) you want to gather information from the page (eg: Listbox selection state) when the user clicks a button. Your problem being that you are using disparate classes to compose the page and so don't have access to the various ZK Components when the button is clicked.
(Ignoring the multiple class issue for a minute)
From a high level, there are sort of two camps in the ZK community. The newer MVVM approach suggests the view should push the relevant state to the back end as the user interacts with the front end. This way, the back end never needs to ask for the client state, and when the button is clicked, the values/state are on the server ready to be used.
The other camp binds the client to the server such that the back end always has access to the client Components and when the button is clicked, the values/state can easily be retrieved by interacting with the components.
Another approach is more like what I was talking about in my previous answer, to not bind the back end to the client at all but to rely on event data as much as possible. I favor this approach where it is sufficient.
Now, you're free to choose your favored approach and ZK has lots of documentation on how to work in either of these camps. The question then is where is the client state stored on the server (either pushed there by the client in MVVM or bound there in MVC). I don't think that's a question that can be solved here, that's a software engineering challenge. I personally suggest you take on standard ZK patterns so as not to but heads with the framework. If you really want to go your route, you can grab a reference to the Listbox on the fly like so:
public class Foo {
public static final String LISTBOX_ID = "myListbox";
public void renderListbox(Component parent, MyItem items) {
Listbox listbox = new Listbox();
listbox.setId(LISTBOX_ID);
listbox.setParent(parent);
for (MyItem item : items) {
listbox.appendItem(item.getName(), item);
}
}
}
public class Bar {
#Listen(Events.ON_CLICK + " = #saveButton")
public void saveButtonClicked(Event event) {
Component saveButton = event.getTarget();
Listbox listbox = (Listbox) saveButton.getFellow(Foo.LISTBOX_ID);
Set<Listitem> selection = listbox.getSelectedItems();
// do something
}
I have the following fragment in a web component:
<div id="mycodes">
<template iterate='code in codeList'>
{{code}}
</template>
</div>
And in a Dart file, codeList is populated when the user clicks on a button:
void onMyButtonClick(Event event) {
HttpRequest.getString('http://getData').then((response) {
mylist = json.parse(response);
for(var code in mylist){
codeList.add(code['c']);
}
}
The problem is that I don't see data on first click. I need to click the button twice to see data.
But if I fill codeList manually (not from network data) as shown below, then I see the data on first click:
void onMyButtonClick(Event event) {
codeList.add("data 1");
codeList.add("data 2");
}
}
I need the template to iterate after the network data is available. It appears that event loop has already done its job of painting a page before the network data becomes available through future object.
Is there a way to refresh the page after model is updated in dart?
The reason your codeList currently populates if you add it with the on-click event is because the current web_ui has 'watchers' which automatically are called when an event happens. You then populate the list synchronously. However one of the downfalls of watchers is exactly your use case, when the data is updated asynchronously then the watchers don't reflect changes in time.
As a result the watchers are being phased out and replaced with observables. Observables allow us to flag a variable to be watched for reassignment and when that happens it will cause the view to change. For example:
#observable int x = 0;
// ...
x = 1;
When the x = 1 is called later in the code it automatically triggers the views to update. This leaves us with one problem however. When you are adding to a list, you are not reassigning the value itself. As such, observables also offer a function to convert a list to an observable list (this also works for maps).
For instance if you changed your declaration of codeList to something like the following, then when you add to the list later it will update accordingly.
var codeList = toObservable([]); // Assuming it starts with an empty list
// or
var codeList = toObservable(_startCodeList); // if you already have a list
Also see the Dart Tutorial: Target 7 for more information on using #observable and toObservable.
For more in-depth information, check out the article on Observables and Data Binding
You need to mark the fields you want WebUi to monitor with the #observable annotation. Otherwise you only get the initial value not any subsequent updates.
You can do this either directly on the object declaration or you can make the entire class as observable and all its fields will then be observed.
For an example see http://www.dartlang.org/docs/tutorials/custom-elements/#using-two-way-data-binding
I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.