I am running Vaadin 8, and have a TreeGrid with a column setup with combo box for editing. Unfortunately when I click on a combo on a row it momentarily opens and closes the dropdown, pretty much not allowing me to see the combo choices, however I can still type text in the combo and only then the dropdown appears (combo has few sample values in it). I noticed when my session expires (and the server is not connected) I am able to get the dropdown to open.
Here is my code snippet adding such a column:
tg.addComponentColumn( r -> {
ComboBox<String> labelsCb = new ComboBox<>();
labelsCb.setNewItemProvider( new NewItemProvider<String>() {
#Override
public Optional<String> apply( String t ) {
return Optional.of( t );
}
} );
labelsCb.setDataProvider( labelsDp );
labelsCb.setHeight( LABEL_COMBO_HEIGHT + "px" );
labelsCb.setWidth( LABEL_COMBO_WIDTH_PX + "px" );
labelsCb.addSelectionListener( event -> {
r.setLabel( event.getValue() );
});
return labelsCb;
} ).setCaption( LABEL ).setWidth( LABEL_COMBO_WIDTH_PX * 1.40 );
Found the reason - my combo column was interfering with TreeGrid's expander column (first on the left) - once I made it second column it started working. It is a bug with TreeGrid I believe, but this one is a decent workaround.
Related
I have got a Vaadin Combobox (Vaadin 8) to which I add two items. I would like that ComboBox to propose all views to which the user is supposed to navigate by a Vaadin NativeButton as described in the code snippet. In spite of the fact that "ContactView" is proposed below the ComboBox as soon as I type a "C", I cannot select "ResourceView" - and yet I have added it to theComboBox. What did I get wrong so that there is no correct dropdown?
navigatorCombobox = new ComboBox<String>("Navigate to...");
navigatorCombobox.setItems(Arrays.asList("ContactView", "ResourceView"));
navigatorButton = new NativeButton("go");
navigatorButton.addClickListener(
event -> {
if(StringUtils.isNotEmpty(navigatorCombobox.getValue()) && navigatorCombobox.getValue().equals("ContactView")) {
getUI().getNavigator().navigateTo(MynavigatorUI.CONTACTVIEW);
} else if (StringUtils.isNotEmpty(navigatorCombobox.getValue()) && navigatorCombobox.getValue().equals("ResourceView")) {
getUI().getNavigator().navigateTo(MynavigatorUI.RESOURCEVIEW);
}
});
This is intended behavior. Once you type "C" in the field, ComboBox will limit selectable options to those starting with "C".
New to PrimeNG/Angular here. We have a element that first opens as a fairly small window. Users can click on a link to expand the dialog. When expanded, the width expands to the right but the dialog stays positioned as when it first opened.
I understand there's supposed to be a dialog center() method but I can't figure out how to wire it up. Thanks!
Got it to work by using this as an inspiration: PrimeNG p-dialog positionTop
Basically, I'm setting an 'expanded' class on the ui-dialog element itself, as well as some inner elements, and then programmatically setting the left position.
private centerDialog() {
const dialogElement = <HTMLElement>document.querySelector('.ui-dialog');
if (!dialogElement) {
setTimeout(() => {
this.centerDialog();
}, 100);
} else {
this.toggleExpandedClass();
dialogElement.style.left =
window.innerWidth / 2 - dialogElement.clientWidth / 2 + 'px';
}
}
I am using Vaadin 7.5.5 and Viritin 1.35. I have implemented a LazyComboBox that is backed by a Spring Data JPA service call and repository.
My basic setup for the LazyComboBox is:
initList(
Site.class,
new FilterablePagingProvider() {
#Override
public List findEntities(int index, String name) {
return sitesService.findByName(name);
}
},
new FilterableCountProvider() {
#Override
public int size(String name) {
return sitesService.countByName(name);
}
},
PAGE_SIZE
);
This works great when I am typing in the combo box.
If I pick an item from the first page (page 0) I can then leave the combo box, come back to it, and click the drop down arrow again and the previously selected item is still selected.
However, if I choose an item from any page other than 0, then clicking the drop down arrow causes the selected item to become null and the user has to find the original item again.
I can post the details of the service and repository if needed but it isn't anything more complicated than a select * from table where name like '%' + name + '%'.
How do I keep the selected value in the combo box no matter what page was chosen?
Thank you.
I think you should call setNullSelectionAllowed(false); on this combo box.
Also, a solution to keep selected value after navigation can be to store it in a session value, then you'll be able to retreive it wherever you are. See Session wiki page
i am working in extjs4. i have grid with checkbox selection model. Grid is displaying files and folders. If folder get selected then i want to hide some menu. So have written code as-
selectionchange:function( model, selected, eOpts ){
var centralPanel = me.up();
var actionBtn = centralPanel.queryById('libraryactionBtn');
if(selected.length > 1) {
actionBtn.show();
//var i=0;
for(i=0;i<selected.length;i++)
{
if(selected[i].data.isLeaf)
{
centralPanel.queryById('library-action-menu-view').hide();
centralPanel.queryById('library-action-menu-viewOrAddTag').hide();
centralPanel.queryById('library-action-menu-viewOrAddNotes').hide();
centralPanel.queryById('library-action-menu-copyToCompaign').hide();
centralPanel.queryById('library-action-menu-copyToProject').hide();
centralPanel.queryById('library-action-menu-sendLink').hide();
centralPanel.queryById('library-action-menu-addtofavorite').hide();
centralPanel.queryById('library-action-menu-downloadItem').hide();
}
}
} else {
actionBtn.hide();
}
where selected.data.isLeaf is false for folder. Its executing correctly only first time. Next time when i am selecting file,then also its hiding menu for file. And if folder is deselected then also its hiding menu. So what modifications i need to do
first of all I don't see any code that shows the menu..You are just hiding the menu.
Secondly make sure selected[i].data.isLeaf is false and not "false".
I want to show only one GridPanel,which I dynamically add by switch click button event, in window.
var event_menu = new Ext.menu.Menu( {
id : "event_menu",
items : [ {
text : 'record1',
handler : function() {
win.add(item_list_panel);//dynamica add GridPanel to show server data
win.doLayout();
item_list_store.load();
}
}, {
text : 'record2',
handler : function() {
win.remove(item_list_panel);//I want to remove it inorder to show the item_list_panel2 and only show one panel.
win.add(item_list_panel2);
win.doLayout();
item_list_store.load();
}
} ]
});
and this menu belong to my window tbar.
when I click record win will show item_list_panel and I want to when I click record2 the item_list_panel2 will show in win and item_list_panel will hide.
If I win.remove(item_list_panel) will have an error :
c.getPositionEl().dom is undefined
How can I do it,Thanks
I can barely understand your question, but if I understand correctly you can do it several ways.
you can destroy the component directly
item_list_panel.destroy()
you can go through your items and select it by id
win.items.item('item_id').destroy()
There are also ways to remove it without completely destroying it, depends what you want to do