Using the code below, I'm displaying a list of filtered items that when clicked leads to a detailed items page ItemDetailView(item: item) for that specific row. I am trying to make it so that the user, once on the details page can then swipe left or right to go either up or down the list of filtered items and view the detailed page of those without having to navigate back to the list view.
So for instance, if they click on item 2 in a list of 5 items it takes them to the details of item 2 through NavigationLink. Once on the details page, I want to be able to swipe left to see the details page for item 1. Likewise, if I swipe right, I want to be able to see the details for item 3.
if let filteredItems = itemModel.items.filter { $0.isBetween(dateSelected.date!.startOfDay) } { ForEach(foundItems) { item in
NavigationLink ( destination: ItemDetailView(item: item) ) { ListViewRow(item:item)} }
I've tried using TabView with the code below, but once in the details view, I end up with a vertically scrollable details view of each item. Any suggestions on how I can accomplish the result I'm looking for? Any hints pointing me in the right direction would be appreciated.
if let filteredItems = itemModel.items.filter { $0.isBetween(dateSelected.date!.startOfDay) } { ForEach(foundItems) { item in
NavigationLink(
destination: TabView(){
List(itemModel.items) {item in ItemDetailView(item: item) }
}.tabViewStyle(.page)
) { ListViewRow(item:item) }
} }
Diagram:
Related
Using this I can display a menu by right clicking a cell:
// right click context menu
grid.onContextMenu.subscribe(function (e) {
e.preventDefault();
var cell = grid.getCellFromEvent(e);
//grid.setSelectedRows(cell.row);
$("#contextMenu")
.data("row", cell.row)
.css("top", e.pageY)
.css("left", e.pageX)
.show();
$("body").one("click", function () {
$("#contextMenu").hide();
});
});
However I would like the row to be selected, both as visual confirmation that the correct row has been right-clicked, and because some of the menu items use the selected row for their functions.
This:
grid.setSelectedRows(cell.row);
doesn't work. What is the correct way?
It might be as simple as the fact that setSelectedRows takes an array of row indexes.
Try
grid.setSelectedRows([cell.row]);
I have a TableView in JavaFX 8, which is editable. One of the fields is a CheckBoxTableCell.
I have noticed that the TAB key lands on the first CheckBoxTableCell in the grid and gets stuck there. I don't want this behavior. I like to navigate to the cell with the keyboard and activate with the SPACE. However I need tab to ignore this field - since it gets stuck.
I tried the following:
booleanColumn.setCellFactory (to -> {
CheckBoxTableCell<DTO, Boolean> cell = CheckBoxTableCell<>();
cell.setFocusTraversable(false);
return cell;
}
This however has no affect on the focus of the field, since it's editable, it lands on that control and gets stuck.
If I change to:
cell.setDisable(true);
Then TAB will skip the field, but I can land on the column with the arrow keys. However I can't select the checkbox with the mouse.
I am at a loss as what to do.
Thanks.
The workaround to get the TAB key working first implies consuming the event so the default TableView traversal engine doesn't process it, and selecting the next or previous cell instead.
This will move the selection from cell to cell:
table.getSelectionModel().setCellSelectionEnabled(true);
table.setOnKeyPressed(keyEvent -> {
switch (keyEvent.getCode()){
case TAB: {
keyEvent.consume();
if (keyEvent.isShiftDown()) {
personTable.getSelectionModel().selectPrevious();
} else {
personTable.getSelectionModel().selectNext();
}
break;
}
}
});
But it won't be enough to get the CheckBox focused, and the space key can't be used to select it. So a second step is required to move the focus from the selected cell to the inner checkbox.
When the cell gets the focus, its node will request it.
booleanColumn.setCellFactory (param -> {
CheckBoxTableCell<DTO, Boolean> cell = new CheckBoxTableCell<>();
cell.focusedProperty().addListener((obs, ov, nv) -> {
if (nv && cell.getGraphic() != null) {
cell.getGraphic().requestFocus();
}
});
return cell;
});
Notice you can't have both the cell and it's checkbox focused at the same time, so the cell will appear grey (selected but not focused), unless you modify its css.
How do you hide sub menus (drop down) for a specific menu. For instance I have 3 menus; Soccer, Basketball, and Football. When I hover on the soccer menu, I see articles named Messi, Ronaldo and Neymar drop down. I hover on the Basketball menu, I see Lebron, Durant, and Kobe. When i hover over the football menu, i see RG3, Wilson, and Manning. I want to get it such that when I hover on the soccer menu, I can't see any of the articles in a drop down menu. I want to get it just for the soccer menu, but the others should still have drop down menus when hovered on.
If you are using mod_menu module, you have to create a template override to templates/your_template/html/mod_menu/default.php and add this code at the beginning of: foreach ($list as $i => &$item) { ... }
$parent_id = 779;
if($item->id == $parent_id) { $item->deeper = null; }
$this_parent = $item->parent_id;
while ($this_parent != 1) {
if($this_parent == $parent_id) continue 2;
foreach ($list as $parent_search) {
if($parent_search->id == $this_parent) {
$this_parent = $parent_search->parent_id;
}
}
}
So it will check if parent has the specified id and skip all children.
You could also extend it using in_array() for multiple ids.
Reference: in_array()
You can do this in the Module Manager for that specific menu. There is a drop down for "Start Level" and "End Level". Just set them both to "1" and only the top level items will be displayed.
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();
I am using HP webOS 3.0 and the Enyo framework.
I have simple question that how can I show and hide images on click of a button. I have 2 images and I want to show images on click of one button and hide on click of another button.
I have two panes called left pane and right pane on a single view.
I have around 10 items on left pane.
On each of the item click appropriate view is called on right pane.
I am doing it with following code.
showTaskView: function(){
this.$.rightPane.selectViewByName("taskView");
},
Now I want to know how can access the control's property in the main view containing both left pane and right pane.
For example,
I want to show / hide image in the taskView displayed on the right pane on click of the button that is neither in the left pane or right pane but on the header part of the view that contains both left and right pane.
It is not allowing me to access the control's image.setSrc method from the main view.
I have tried it with the following code.
editTask: function() {
this.$.task.image.setSrc("images/image2.jpg");
}
and
editTask: function() {
this.$.image.setSrc("images/image2.jpg");
}
It gives me the following error:
Cannot read property 'setSrc' of undefined
With VirtualList, your hash will only reference the currently "selected" row. "selected" being either the row receiving an event or one explicitly selected using prepareRow(). If you want to change every row, you should set a property and call refresh() on the list to cause it to rerender.
The below should work (I think ...)
setupRow: function(inSender, inIndex) {
var row = this.data[inIndex];
if (row) {
this.$.caption1.setContent("Greet a " + row.task + ":");
this.$.star.setSrc("images/grey-star.png");
if(this.hideStart) this.$.star.hide();
this.$.caption2.setContent(row.assignto);
return true;
}
},
buttonClick: function(){
this.hideStar = true;
this.$.myVirtualList.refresh();
}