Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Dynamic submenu items from database

    Isomorphic I am trying to render dynamic sub menu item that fetches data from database with single check option. Selecting one submenu item should uncheck any other item.

    Approach 1 (Datasource bound operation. *Preferred*):
    Code:
    private MenuItem getmainMenu() {
                mainMenu = new MenuItem("Submenu");
                Menu subMenu = new Menu();
                subMenu.setFetchSubmenus(false);
                subMenu.setFields(new ListGridField("field_name"));
                subMenu.setName("field_name");
                subMenu.setDataSource("DatasourceName");
                subMenu.setImplicitCriteria(new AdvancedCriteria());
                subMenu.setMinHeight(30);
                subMenu.setOverflow(Overflow.VISIBLE);
                subMenu.setAutoFitData(Autofit.BOTH);
                subMenu.setAutoFetchData(true);
                subMenu.addItemClickHandler(event -> {
                    //uncheck all items
                    for (MenuItem item : subMenu.getItems()) {
                        subMenu.setItemChecked(item, false);
                    }
    
                    //check the clicked item. TRIED BELOW LINES, it's not getting checked.
                    subMenu.setItemChecked(event.getItem(), true);
                    event.getItem().setChecked(true);
    
                });
                mainMenu.setSubmenu(subMenu);
                return mainMenu;
        }
    The submenu is fetched and populated on UI but it's never checked. I noticed there is no space on the menu item for the check image. Is there any property to enable the selection.



    Approach 2 (Mannual):
    I tried another approach that worked but the problem with this is as the options are created manually, the options are not updated when on the same page there is any delete/add operation performed on the same datasource. I want the menu items to be updated added/updated/removed automatically as result of the datasource add/update/remove operation on the same page.

    Code:
    private MenuItem getmainMenu() {
            mainMenu = new MenuItem("Submenu");
                DSRequest fetchRequest = new DSRequest();
                DataSource.get("datasourcename").fetchData(new AdvancedCriteria(), (res, obj, req) -> {
                    if (res.getData().length > 0) {
                        Menu subMenuItem = new Menu();
                        for (Record rec : res.getData()) {
                            MenuItem item = new MenuItem(rec.getJsObj());
                            item.setTitle(rec.getAttributeAsString("field_name"));
                            item.addClickHandler(event -> {
                                //uncheck all items
                                Arrays.asList(subMenuItem.getItems()).forEach(curItem -> subMenuItem.setItemChecked(curItem, false));
    
                                // check the clicked item
                                subMenuItem.setItemChecked(event.getItem());
    
                            });
                            subMenuItem.addItem(item);
                        }
                        mainMenu.setSubmenu(subMenuItem);
                    }
                }, fetchRequest);
            return mainMenu;
        }

    Any suggestions. Thanks in advance.
Working...
X