Search code examples
javajquerycsswicketwicket-6

Change class of disabled tab on change of dropdown value


I have 1 dropdown and based on dropdown value tab will be enable or disable. By default I am using getTabContainerCssClass() for all tab and it will show all tab as enable view but i want to change a tab css class as it look like to be disable after change the dropdown value.

DropDownChoice ProductDropDown = new DropDownChoice("ProductList", new PropertyModel(this, "SupplierProduct"),ProductList, new choiceRenderer("name","id"));
add(supplierProductDropDown);

supplierProductDropDown.add(new AjaxFormComponentUpdatingIndicatingBehavior("onchange"){
            @Override
            protected void onUpdate(AjaxRequestTarget target) {
                 /* do some code for changing dropdown */
            }
      });

tabs = new ArrayList<AbstractTab>();

/* provide some tab details */

tab = new AjaxTabbedPanel("tabs", tabs){

        private static final long serialVersionUID = 1L;

        @Override
        protected String getTabContainerCssClass() {
            return "producttab-row";
        }
        @Override
        protected WebMarkupContainer newLink(String linkId, final int index) {

            return new Link(linkId)
            {
                    private static final long serialVersionUID = 1L;

                    public void onClick() {
                            setSelectedTab(index);
                    }

                    @Override
                    public boolean isEnabled() {
                        if(index == 1 && /*drop down condition that will be disable the tab*/){
                            /*I want to change css of this tab*/
                            return false;
                        }
                        else{
                            return true;
                        }
                    }
            }
       }
}

Any Idea about this ......

UPDATE: after updating the code

 @Override
                    protected void onComponentTag(final ComponentTag tag) {
                    // TODO Auto-generated method stub
                        super.onComponentTag(tag);
                        if(/*Dropdown condition*/){

                             tag.append("class", "disabletab", " ");
                         }
}

But it didn't worked on this. Please help

SOLUTION : I have Override onComponentTag in AjaxTabbedPanel.see below code

tabs = new ArrayList<AbstractTab>();

/* provide some tab details */

tab = new AjaxTabbedPanel("tabs", tabs){

    private static final long serialVersionUID = 1L;

    @Override
    protected String getTabContainerCssClass() {
        return "producttab-row";
    }
@Override
            protected void onComponentTag(final ComponentTag tag)
            {
            super.onComponentTag(tag);

            String cssClass = tag.getAttribute("class");
            if (cssClass == null)
            {
                cssClass = " ";
            }
            /*check condition and change css classname*/
            tag.put("class", cssClass.trim());
        }
}

Solution

  • You should override Link#onComponentTag(ComponentTag) method and set the CSS class with: tag.append("class", "dynamicValueDependingOnDropDownsModel", " ").