CODEWITHSUNDEEP
gwt
bNd
bNd

Reputation: 7640

CellTable with custom Header containing SearchBox and ListBox

How to create event on safe html. As I want to do filtering for column in celltable. So I added search box at header in table. I want to access textbox and do some event on textbox.

enter image description here

Code:

   final MultiSelectionModel<MasterTable> selectionModel=new MultiSelectionModel<MasterTable>();
        CellTable<MasterTable> cell=new CellTable<MasterTable>();
        cell.setSelectionModel(selectionModel, DefaultSelectionEventManager.<MasterTable> createCheckboxManager());

        Column<MasterTable, Boolean> checkColumn = new Column<MasterTable, Boolean>(new CheckboxCell(true, false)) {
            @Override
            public Boolean getValue(MasterTable object) {
                return selectionModel.isSelected(object);
            }
        };
        cell.addColumn(checkColumn);
        cell.setColumnWidth(checkColumn, 20, Unit.PX);
        personCollection.getList().add(new MasterTable("Art", "Shake", 21));
        personCollection.getList().add(new MasterTable("Joe", "Black", 47));
        personCollection.getList().add(new MasterTable("Sam", "PArish", 97));

        TextColumn<MasterTable> namecolumn = new TextColumn<MasterTable>() {
            @Override
            public String getValue(MasterTable s) {
                return s.getName();
            }
        };



        TextColumn<MasterTable> lastNameColumn = new TextColumn<MasterTable>() {
            @Override
            public String getValue(MasterTable s) {
                return s.getLastName();
            }
        };
        TextColumn<MasterTable> ageColumn = new TextColumn<MasterTable>() {
            @Override
            public String getValue(MasterTable s) {
                return Integer.toString(s.getAge());
            }
        };

//        cell.addColumn(namecolumn,"Name");
        SafeHtmlBuilder builder = new SafeHtmlBuilder();
        builder.appendHtmlConstant("<input type=\"text\" id=\"nameInput\" /><br/><br/><select><option>one</option></select><br/><center><b>Name</b></center>");
        cell.addColumn(namecolumn,builder.toSafeHtml());
        SafeHtmlBuilder builder1 = new SafeHtmlBuilder();
        builder1.appendHtmlConstant("<input type=\"text\"/><br/><br/><select><option>one</option></select><br/><center><b>Last name</b></center>");
        cell.addColumn(lastNameColumn,builder1.toSafeHtml());
        SafeHtmlBuilder builder2 = new SafeHtmlBuilder();
        builder2.appendHtmlConstant("<input type=\"text\"/><br/><br/><select><option>one</option></select><br/><center><b>Age</b></center>");
        cell.addColumn(ageColumn,builder2.toSafeHtml());
        personCollection.addDataDisplay(cell);
        verticalPanel.add(searchpanel);
        verticalPanel.add(cell);
        RootPanel.get("errorLabelContainer").add(verticalPanel);
        final Element nameInput = DOM.getElementById("nameInput");

        if(nameInput!=null)
        {
            Event.sinkEvents(nameInput, Event.ONCHANGE);
            Event.setEventListener(nameInput, new EventListener() {

                @Override
                public void onBrowserEvent(Event event) {
                    personCollection.setFilter(nameInput.getInnerText());
                    personCollection.refresh();
                }
            });
        }

First problem I am getting nameInput is null. why?

This is just sample. I want to create this column dynamically. so is it possible to add DOM event dynamically for run time generated DOM element?

Upvotes: 0

Views: 907

Answers (3)

Spiff
Spiff

Reputation: 4104

The best way to understand what's going on is to study the code of Custom Data Grid

In particular you need to see the code of CustomHeaderBuilder

I think it's unfortunate that the Showcase does not include an example of header search boxes, and everyone has to do this from scratch.

Upvotes: 1

Thomas Broyer
Thomas Broyer

Reputation: 64561

The way to do it is to use a Cell for your header, such as a TextInputCell, with a ValueUpdater to handle the change.

Upvotes: 3

reap
reap

Reputation: 202

Your code-snippet does not show where you add the verticalpanel to the page, if that happens after searching the dom-tree it obviously does not work.

If SafeHtml containing the input is appended to page before searching it from DOM tree the element is found and one can listen events from it. Snippet bellow works for me (you need container with id container on page where get-app is loaded). 

public void onModuleLoad() {

    SafeHtmlBuilder builder = new SafeHtmlBuilder();
    builder.appendHtmlConstant("<input type=\"text\" id=\"nameInput\" /><br/><br/><select><option>one</option></select><br/><center><b>Name</b></center>");

    RootPanel.get("container").add(new HTML(builder.toSafeHtml()));

    final Element nameInput = DOM.getElementById("nameInput");
    if (nameInput != null) {
        Event.sinkEvents(nameInput, Event.ONCHANGE);
        Event.setEventListener(nameInput, new EventListener() {
            public void onBrowserEvent(Event event) {
                Window.alert(nameInput.getInnerHTML());
            }
        });
    }
}

Upvotes: 1

Related Questions