TableView delete column via contextual menu - dynamic

It is my first time asking here, sorry if i do something wrong (also not in my mother tongue).
Recently, i moved from Swing&AWT to JavaFX.
I am discovering the new Table which is quite different from the Swing version. Better i would say, it needs less operation and do more things, but ... lord, it's way more difficult to understand !
I am currently trying to modify the TableView dynamically. While the addColumn method is not a big challenge, i need help for my deleteColumn method :/
Let's talk about my problem :
I have a scene with many components on it (panes, buttons, menus, ...) and one pane (actually an anchorpane) hosts a TableView.
I would like to dynamically delete an entire column when this operation occurs :
The user right clicks on the TableView > a contextual menu shows up > he selects the item "delete"
So, basically a contextual menu that offers the option to delete the column where the user right-clicked.
I tried this :
-> When the user right-clicks on the TableView, this method is called :
public void setTargetForContext(ContextMenuEvent event){
if(event.getTarget() instanceof Label){
ObservableList list =(((Label)event.getTarget()).getChildrenUnmodifiable());
activeColumn = ((Text)((ObservableList)list)).getText();
}...
And the goal was to set the column name in "activeColumn".
Then, when the user will select the "delete" option from the contextual menu, another method would be called to compare the name of the columns and delete the right one.
But it seems that i can't call a getChildren() method on the label, only an unmodifiable one. And it does not allow a cast and throw the exception.
Do you have a solution to allow me to get the column name ?
Or maybe i am going the wrong way and i have to find another way to delete the right-clicked column, but in this case i will need your help too.
Thanks a lot for reading, and thanks in advance for your help.

First, let me point out that if you call
table.setTableMenuButtonVisible(true);
then the table will have a built-in menu button with radio buttons allowing the user to select which columns are displayed. Maybe this is all you need.
In Swing, the renderers for table cells are just "rubber stamps" that are painted onto the table. Thus you can't register listeners for UI events with them.
By contrast, in JavaFX, the cells in a table are real UI controls with full functionality. This means there's no real need for API that gets the cell coordinates from a table. You should not register your listener with the TableView, but with the actual cells on which you want to operate. You access the cells from the table column's cell factory.
// the table:
TableView<RowDataType> table = new TableView<>();
//...
// A table column:
TableColumn<RowDataType, CellDataType> column = new TableColum<>("Header text");
// A context menu for the table column cells:
ContextMenu contextMenu = new ContextMenu();
MenuItem deleteColumnItem = new MenuItem("Remove Column");
deleteColumnItem.setOnAction(e -> table.getColumns().remove(column));
contextMenu.getItems().add(deleteColumnItem);
// Cell factory for the column
column.setCellFactory(col -> {
// basically a cell with default behavior:
TableCell<RowDataType, CellDataType> cell = new TableCell<RowDataType, CellDataType>() {
#Override
public void updateItem(CellDataType item, boolean empty) {
super.updateItem(item, empty);
if (item == null) {
setText(null);
} else {
setText(item.toString());
}
}
});
// add the context menu to the cell:
cell.setContextMenu(contextMenu);
return cell ;
});
If you want the context menu to appear in the table column header as well, you just need to do
column.setContextMenu(contextMenu);

Related

Revive/activate existing panels

My extension have sidebar webview that can create additional webviews as panels in the active text editor. Each of these additional webviews is for an unique item and I want to revive/activate existing webview, for the specific item, if it exists.
My issues:
I can get a list of the existing tabs with window.tabGroups.all and loop through the result. But there is no way, as far as i can see, to reactivate the desired tab. I can get some properties from there but no methods. The question here is: is there a API to get a list of the tabs and be able to revive/activate it?
Because of the first point ive decided to keep list of the instances of the additional webviews and when new webview is about the be created im checking if its unique id (in the title) is in the list and if it is then just revive the tab instead of creating a new one. Dont like this approach much but its working. The problem here is when the additional webview is closed. When closed it has to be removed from the array. Ive implemented onDidDispose for the panel but somehow the filter function, inside it, is not called:
// panels: vscode.WebviewPanel[]
// create new panel
const panel = vscode.window.createWebviewPanel(...)
// add the webview instance to the panel
const newWebview = new AdditionalWebview(panel, this.context);
this.panels.push(panel);
panel.onDidDispose(() => {
console.log("Before remove the panel"); // can see this in the console
this.panels = this.panels.filter((p) => p.title != panel.title);
console.log("Before remove the panel"); // for some reason this never appears
});
Not sure why but the panel filter functionality is never triggered (and everything after it is also not ran).
extra question: at the moment the uniqueness of the additional panels is based on their label/title. In my case thats is ok but is there any other way to get unique identifier of each tab? id/guid somewhere?
On your first question about activating a given editor, you have a couple of options.
If you know the editor's index/position in its group. That can be obtained from its tabGroup.tabs position - it seems that the tab's index in that array is faithfully its index in the editor. So you could do a Array.findIndex to get the tab uri you want to set to active.
await vscode.commands.executeCommand('workbench.action.openEditorAtIndex', [indexToOpen]);
// note the [] around the index argument
The only problem with this approach is that it works within the active group only, so you may have to activate the correct group first via:
await vscode.commands.executeCommand('workbench.action.focusSecondEditorGroup');
// or whichever group the tab you want to open is in
Or second method:
// assumes you have the tab
const openOptions = { preserveFocus: true, preview: tab.isPreview, viewColumn: tab.group.viewColumn};
// check if a uri, might be viewtype, etc., instead
if (tab.input instanceof vscode.TabInputText) {
await vscode.commands.executeCommand('vscode.open', tab.input.uri, openOptions);
}
// are your editors regular text editors?
This looks like it is opening a new tab but it will focus an existing tab if one exists at that location with that same uri.

Why does NavigationView.ContainerFromMenuItem() return null except when executed from an event handler?

I am developing a WinUI3 app containing a NavigationView. The NV uses an observable collection to populate the NavigationViewItems.
The app must support expanding and collapsing NavigationViewItems programmatically. The only way I know of to do that is to set NavigationViewItem.IsExpanded = true. And the only way I know of to get the NavigationViewItem is through NavigationView.ContainerFromMenuItem().
The trouble is, ContainerFromMenuItem always returns null except when it is executed from a button event handler (such as a Click handler). The app must perform expand/collapse without user input.
For example, I have a button that launches a Click event with this code, which works just fine to toggle an NVItem:
Category selectedItem = (Category)navview.SelectedItem;
int idx1 = Categories.IndexOf(selectedItem);
var container = (NavigationViewItem)NavView.ContainerFromMenuItem(Categories[idx1]);
if (container != null)
{
container.IsExpanded = !container.IsExpanded;
}
However, that same code, when executed during app startup, such as in the MainWindow constructor after some test items are created, or in Attach(), always results in container being null.
So what am I doing wrong?
This question is somewhat similar to UWP: NavigationView.MenuItems results empty if populated programmatically but the answer to that one only deals with in-event use of ContainerFromMenuItem().
Thanks very much for any assistance on this.

Yii2 Gridview get all selected row for all pagination

I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H

ExtJS grid 'reset'

I'm on ExtJS 4 and using an MVC approach. I've created a simple grid view class, and have added a componentquery type 'ref' to that view in my controller. Within the initial grid view itself I set several columns to be hidden and some to be visible by default. The rendering of the grid with those settings is all working fine.
Then I have a button that, when clicked and based on some other conditions, will make some of the initially hidden grid columns visible. This works as well.
But what I need is a way to later 'reset' the grid to its initial view (with the correct columns hidden/visible, as they were initially).
I've tried various permutations of the following with no effect:
var theGrid = this.getTheGrid();
theGrid.reconfigure(store, theGrid.initialConfig.columns);
theGrid.getView().refresh();
I suppose I could loop through every column and reset its 'hidden' state, but would think there's a way to just 'reset' back to what's set in the class? Advice?
SOLUTION UPDATE
Appreciate the pointer from tuespetre. For anyone coming along in the future looking for specifics, here is what was needed (at least for my implementation):
Within the view, moved the column defs into a variable
Within the view, columns ref within the class becomes:
columns: myColumns,
Within the view, the following function created within the class:
resetGrid: function(){
this.reconfigure(null, myColumns);
},
Within the controller:
var theGrid = this.getTheGrid();
theGrid.resetGrid();
You will just need to create a function on your view class to encapsulate that functionality.

dojox.grid.DataGrid: how to access data from a click event?

I'm using Dojo 1.5 (including dojox). I have a dojox.grid.DataGrid where each row represents a user. When I click a row, I want to redirect to a URL like /users/USER_ID. The user ID is one of the fields in the grid, so all I need to do in my onRowClick callback is to grab the user ID for the row that was clicked.
The click event contains a rowIndex property, and, indeed, I found a (rather old) post elsewhere that suggested I should be able to do:
var row = dijit.byId('grid').model.getRow(e.rowIndex);
/* (Then grab the 0th field of the row, which is the user ID.) */
(Sorry, I've since lost the URL.)
But my grid object has no model attribute. What's up with that? Has the API changed? (My grid certainly is populated with data, which I can see, click, sort by column, et cetera).
So I'm stuck for now. Note, BTW, that it won't work to use rowIndex to directly access the grid's underlying dojo.data.ItemFileReadStore. That's because the grid is sortable, so there's no guarantee that the grid's rows will be in the same order as the store's.
Any hints would be deeply appreciated. I hope that the question is clear, and sufficiently general that any answers can help others in my predicament. Many thanks.
I have a similar scenario and I grab the value like this:
onRowClick: function(e) {
open_link(my_grid._getItemAttr(e.rowIndex, 'object_path'));
}
In this case my_grid is a reference to the datagrid and object_path is the column where I store the path to the object. open_link is of course a custom function of mine that as it implies, requests a server path.
So just change the specifics to suite your case and you should be fine.