Placing a button in in a table heading.

I am looking for a way to place a couple if buttons on the top right of a table.

I’ve looked at the Overlay component in the Vaadin addon directory, but I’m not sure if it isn’t overkill for what I want to do…

I just need a button or control on the top right of the table.

Hi Kevin,

No, it’s not overkill : it is not possible in core Vaadin to put any other components in the table header.

Overlay would probably allow you to do what you want, although I think the UI may be a little confusing : on sortable tables the column headers are, from the user’s perspective, already buttons (click to sort), so putting another button in the header will result in a button on top of a button. Just my opinion, of course, but that feels a little odd…

Cheers,

Charles

Thanks for the response.

I agree about it being confusing in a normal use case, but this is a special case where there are 2 different data sets that are possible, and the button is used to toggle between the 2 data sets… We just want to save some screen real estate.

Some of the posts suggest that overlay doesn’t work with Google Chrome / but the demos seem to work on my copy of chrome. Chrome is becoming an important strategic platform for our apps, so have you had any experiences with Overlay? Good or bad?

I use Chrome & Overlay, and haven’t noticed any problems.

Cheers,

Charles.

I found this example useful for building a custom table header:
http://demo.vaadin.com/book-examples/book/#component.table.headersfooters.fakeheaders

I want checkbox component in vaadin table heading. That checkbox will be used to select all rows of the table. Please find attached image for reference.

13250.png

Hi Poonam!

I used for this purpose HeaderClickListener.

table.addListener(new HeaderClickListener() {
                @Override
                public void headerClick(HeaderClickEvent event) {
                    if (CHECKBOX_COLUMN_ID.equals(event.getPropertyId())) {
                        selectAll(); // check CheckBoxes in each raw
                    }
                }
            });
table.setColumnHeader(CHECKBOX_COLUMN_ID, "<p/>");

And then customized header with CSS. The thing is that table header can display HTML which you set as header. So I customized inserted into header paragraph the way it look like CheckBox. But in fact column header listen to click. It is just visual trick.
I attached screenshot.

Regards, Alex
13251.png

What is this constant “CHECKBOX_COLUMN_ID” ?

Sorry, I missed some lines.

private static final String CHECKBOX_COLUMN_ID = "checkBoxColumnId";
table.addContainerProperty(CHECKBOX_COLUMN_ID, CheckBox.class, new CheckBox());
table.addListener(new HeaderClickListener() {
                @Override
                public void headerClick(HeaderClickEvent event) {
                    if (CHECKBOX_COLUMN_ID.equals(event.getPropertyId())) {
                        selectAll(); // check CheckBoxes in each raw
                    }
                }
            });
table.setColumnHeader(CHECKBOX_COLUMN_ID, "<p/>");

Thanks all.

I using

table.setColumnHeader(CHECKBOX_COLUMN_ID, "<input type='checkbox' />");

hi this is my code and am getting following error…
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
final String CHECKBOX_COLUMN_ID = “selected”;
tbltooltrackl.addContainerProperty(CHECKBOX_COLUMN_ID, CheckBox.class, new CheckBox());
tbltooltrackl.addHeaderClickListener(new HeaderClickListener() {

            @Override
            public void headerClick(HeaderClickEvent event) {
                if (CHECKBOX_COLUMN_ID.equals(event.getPropertyId())) {
                    selectAll();
                }
                
            }
        });

        tbltooltrackl.setVisibleColumns(new Object[] { CHECKBOX_COLUMN_ID,"tracklogId","logTimstamp", "latitude",
                "longitude"
                 });
        tbltooltrackl.setColumnHeaders(new String[] { "","Ref.Id","Time Stamp","Latitude",
                "Longitude"});

++++++++++++++++++++++++++++++++++++++++++++++++++
error:::java.lang.UnsupportedOperationException: Use addNestedContainerProperty(String) to add container properties to a BeanItemContainer

please give me a sample projects for checkall /uncheckall

How do you access the input control in your Java code? I have implemented this as well, but clicking near the checkbox also activates the logic without actually changing the state of the input control. Any suggestions/tips would be great.

Hi Kevin, you can use AbsoluteLayout and position things inside of it.

We did something similar by having a Table in a VerticalLayout, adding that to the AbsoluteLayout, doing setSizeFull() on the VerticalLayout, and then adding (and manually specifying the position of) a button onto the AbsoluteLayout.

The button was positioned into the top right corner, and the result was the button would actually sit on the Table.

Hi Matthias,
I think you can’t access the input control, but you can put the logic in a HeaderClickListener and change its value.

        table.addListener(new HeaderClickListener() {

             // Starts unselected
             private Boolean selected = false;

             @Override
             public void headerClick(HeaderClickEvent event) {
              if (CHECKBOX_COLUMN_ID.equals(event.getPropertyId())) {
               if(!selected){
                selectAll(); // check CheckBoxes in each raw
                // Change the header value
                table.setColumnHeader(CHECKBOX_COLUMN_ID, "<input type='checkbox' checked />");
               } else {
                unselectAll(); // uncheck CheckBoxes in each raw
                // Change the header value
                table.setColumnHeader(CHECKBOX_COLUMN_ID, "<input type='checkbox' />"); 
                }
            ​  selected = !selected;
             }
            }
        });

Hi,

I think you can use javascript call back to do that
Use following code to create checkbox in header

table.setColumnHeader(CHECKBOX_COLUMN_ID, "<input type='checkbox' id='check' />"); Inside header click listner add this javascript code

Page.getCurrent().getJavaScript().execute("var checkbox=document.getElementById('check'); checkbox.addEventListener('click', function(){aa(t.checked)});"); And this is the javascript call back

[code]
JavaScript.getCurrent().addFunction(“aa”, new JavaScriptFunction() {

        @Override
        public void call(JSONArray arguments) throws JSONException {
            if((Boolean)arguments.get(0))
            {
                //selection logic
            }else
            {
                //deselection logic
            }
            

        }

        
    });

[/code]By this you can use real checkbox in header.

srithar R: The problem with your directions is the checkbox listener is only added after the header is clicked and IN the serverside click listener. So the first click has no effect, and while each click after works, a new listener is added everytime.

Do you have a suggestion to where/when to add the listener so that it is only done once and before the headerClickListener is fired?

I was able to get much better behavior with the following:

Column header:

"<input type='checkbox' id='checkboxSelectAll' onclick=\"selectAllListener(this.checked)\"/>" Durring table creation/definition:

JavaScript.getCurrent().addFunction("selectAllListener", new JavaScriptFunction() { @Override public void call(JSONArray arguments) throws JSONException { MY_SELECT_ALL_METHOD((Boolean) arguments.get(0)); } }); This last part only needs done once, but doing it multiple times doesn’t hurt anything, since it goes into a hash table.

I think your solution is there with the addon
extfilteringtable
.
Here for the table you can use setColumnCheckBox(propertyId);
Listeners are also there to achive your goals.