How to add button in HeaderSpan of SmartGWT

Question

I want to add a button to the HeaderSpan of ListGrid in SmartGWT. I tried using the \'HeaderSpan.setAttribute((String property, Object value)) method but it did not work. Below

Answer 1

Here's doing it without JSNI or DOM: This grid updates contents of the second span header with dynamic content when datasource is loaded. Alternately, you could use "onDraw" instead of "dataArrived", if the contents are static

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.HeaderSpan;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.events.DataArrivedEvent;
import com.smartgwt.client.widgets.grid.events.DataArrivedHandler;

public class MyGrid extends ListGrid {

    private HeaderSpan          oneHeaderSpan = new HeaderSpan("span one", new String[] { "a", "b", "c" });
    private HeaderSpan          twoHeaderSpan = new HeaderSpan("span two", new String[] { "d", "e", "f" });
    final private static String ONE_SPAN_ID   = "span1";
    final private static String TWO_SPAN_ID   = "span2";

    public MyGrid() {

        setID("MyGrid");
        setHeight100();
        setWidth100();
        setDataSource(MyDS);
        setHeaderSpans(oneHeaderSpan, twoHeaderSpan);
        oneHeaderSpan.setAttribute("spanId", ONE_SPAN_ID);
        twoHeaderSpan.setAttribute("spanId", TWO_SPAN_ID);
        setHeaderHeight(50);

        addDataArrivedHandler(new DataArrivedHandler() {
            @Override
            public void onDataArrived(DataArrivedEvent event) {
                Canvas headerSpans = Canvas.getById(getID() + "_headerSpan");
                // getPeers() did not work for IE
                for (Canvas peer : headerSpans.getParentCanvas().getChildren()) {
                    if (peer.getAttribute("spanId") != null && peer.getAttribute("spanId").equals(TWO_SPAN_ID)) {
                        peer.addChild(createHeaderSpanContents(event));
                    }
                }
            }
        });
    }

    private Canvas createHeaderSpanContents(DataArrivedEvent event) {

        // Your favorite Canvas here:
        Button button = new Button();
        button.setLayoutAlign(Alignment.CENTER);
        button.setHeight100();
        button.setWidth100();
        button.setTitle("+");
        return button;
    }
}

Using headerSpans.getParentElement().getChildren()) also works if you are on version of smartgwt preceding 4.1d