GWT Data grid does not show data - gwt

i have been trying to implement datagrid in my project , the problem is that the data grid does not show data , the data is there but is not visible , i tried to inspect the html page and with adding some height and width to the inner divs inside the datagrid parent div the data is displayed perfectly , i can do this using css and its done , but if there is another solution or in other words anyone knows whats wrong with datagrid?
public class DataGridTest implements EntryPoint, ClickHandler {
private ListDataProvider<TestObject> listProvider;
public void onModuleLoad() {
List<TestObject> list = new ArrayList<TestObject>();
list.add(new TestObject("Amer",22));
list.add(new TestObject("Essa",25));
list.add(new TestObject("Asem",29));
DataGrid<TestObject> dataGrid = new DataGrid<TestObject>();
dataGrid.setStyleName("dataGridTest");
TextColumn<TestObject> nameColumn = new TextColumn<TestObject>(){
#Override
public String getValue(TestObject object) {
return object.getName();
}
};
dataGrid.addColumn(nameColumn,"Name");
TextColumn<TestObject> ageColumn = new TextColumn<TestObject>(){
#Override
public String getValue(TestObject object) {
return object.getAge()+"";
}
};
dataGrid.addColumn(ageColumn,"Age");
listProvider = new ListDataProvider<TestObject>();
listProvider.addDataDisplay(dataGrid);
listProvider.setList(list);
LayoutPanel layoutPanel = new LayoutPanel();
layoutPanel.add(dataGrid);
RootPanel.get().add(layoutPanel);
layoutPanel.forceLayout();
Button btn = new Button("lala");
btn.getElement().getStyle().setPosition(Position.ABSOLUTE);
RootPanel.get().add(btn);
btn.addClickHandler(this);
}
public class TestObject {
private String name;
private int age;
public TestObject(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() {
return this.name;
}
public int getAge() {
return this.age;
}
}
#Override
public void onClick(ClickEvent event) {
listProvider.getList().add(new TestObject("lala", 10));
}
}

You are mixing RootPanel and LayoutPanel, which doesn't work.
You must use RootLayoutPanel instead.
The DataGrid has to be put in a LayoutPanel and there must an unbroken chain up to the RootLayoutPanel.
Alternatively you have to specify explicit dimensions (height, width) on the parent container of your DataGrid or use a CellTable instead.
RootLayoutPanel.get().add(layoutPanel) should fix your issue.

Related

How to create a Dynamic table in GWTP

I am a new GWTP user and I am not sure how to create a table in GWTP. I know how to make one in GWT.
// Create a CellTable.
CellTable<Contact> table = new CellTable<Contact>();
// Create name column.
TextColumn<Contact> nameColumn = new TextColumn<Contact>() {
#Override
public String getValue(Contact contact) {
return contact.name;
}
};
But This doesn't seem to work in GWTP. Can someone please help me with getting the values on a button press in a GWTP program.
I'm aware you asked this question over a week ago but you may still be stuck on it so here goes. You just have to make sure you put the right bits of logic in the Presenter and View respectively.
It's no different from MVP (Model-View-Presenter) without GWTP in principle:
Your Presenter has the job of getting the data to fill the CellTable, and passing it to the View:
public class TablePresenter extends Presenter<TablePresenter.MyView, TablePresenter.MyProxy>
{
public interface MyView extends View
{
void addData(List<Contact> accounts); // pass data to view
}
// proxy and constructor omitted for brevity...
#Override
protected void onReveal()
{
super.onReveal();
// server action to get contacts
dispatchAsync.execute(new GetContacts(), new AsyncCallback<GetContactsResult>()
{
#Override
public void onSuccess(GetContactsResult result)
{
getView().addData(result.getContacts());
}
});
}
}
Your View has the job of initially setting up the CellTable and its Columns, as well as receiving the data from the Presenter. Here I show a TextColumn and a Column using a ButtonCell:
public class TableView extends View implements TablePresenter.MyView
{
#UiField
CellTable<Contact> table;
// use a dataprovider to hold the data
private ListDataProvider<Contact> dataProvider = new ListDataProvider<Contact>();
// COLUMNS
TextColumn<Contact> nameColumn;
Column<Contact, String> buttonColumn;
#Inject
public AccountsView(Binder uiBinder)
{
initWidget(uiBinder.createAndBindUi(this));
initTable();
}
private void initTable()
{
nameColumn = new TextColumn<Contact>()
{
#Override
public String getValue(Contact object)
{
return object.name;
}
};
// now add the column to the table
table.addColumn(nameColumn, "Name");
buttonColumn = new Column<Contact, String>(new ButtonCell())
{
// the text of the button
#Override
public String getValue(Contact object)
{
return "Delete " + object.name;
}
};
// set the button action
deleteColumn.setFieldUpdater(new FieldUpdater<Contact, String>()
{
#Override
public void update(int index, Contact object, String value)
{
// whatever you want to do when you click the button
Window.alert("You pressed " + object.name);
}
});
fileTable.addColumn(deleteColumn);
// link dataprovider to the table
dataProvider.addDataDisplay(table);
}
#Override
public void addData(List<Contact> contacts)
{
// clear the dataProvider's list
dataProvider.getList().clear();
// pass the data into the list
dataProvider.setList(contacts);
}
}
Then in your UiBinder:
<g:HTMLPanel>
<b:CellTable ui:field="table" />
</g:HTMLPanel>

Applying a background image to a GWT Decorator panel

Here is my View which is built using a DecoratorPanel.
How can I modify this to have a background image displayed? I see a lot of examples with applying CSS styling but my CSS knowledge is limited so if this is the way to go then would anyone have a worked example of how a CSS style is created and applied.
Here is my code
public class EditContactView extends Composite implements EditContactPresenter.Display {
private final TextBox firstName;
private final TextBox lastName;
private final FlexTable detailsTable;
public EditContactView() {
DecoratorPanel contentDetailsDecorator = new DecoratorPanel();
contentDetailsDecorator.setWidth("18em");
initWidget(contentDetailsDecorator);
VerticalPanel contentDetailsPanel = new VerticalPanel();
contentDetailsPanel.setWidth("100%");
detailsTable = new FlexTable();
detailsTable.setCellSpacing(0);
detailsTable.setWidth("100%");
firstName = new TextBox();
lastName = new TextBox();
initDetailsTable();
contentDetailsPanel.add(detailsTable);
HorizontalPanel menuPanel = new HorizontalPanel();
contentDetailsPanel.add(menuPanel);
contentDetailsDecorator.add(contentDetailsPanel);
}
private void initDetailsTable() {
detailsTable.setWidget(0, 0, new Label("Firstname"));
detailsTable.setWidget(0, 1, firstName);
detailsTable.setWidget(1, 0, new Label("Lastname"));
detailsTable.setWidget(1, 1, lastName);
firstName.setFocus(true);
}
public HasValue<String> getFirstName() {
return firstName;
}
public HasValue<String> getLastName() {
return lastName;
}
public Widget asWidget() {
return this;
}
}
About setting style name - you just invoke setStyleName ("myDecoratedPanelStyle") on any widget you wish to - Example and check how gwt adds style gwt-TextBox in standard.css
In your .css file add .myDecoratedPanelStyle
myDecoratedPanelStyle
{
background-image:url('path/paper.gif');
background-color:#cccccc;
}
Also reference - https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss

how to handle click event for the custom gwt widget

I have a my own widget which simulates a multi select list box.
It will have a list of check boxes.
public class MultiListBox extends Composite implements IsWidget
{
private static MultiListBoxUiBinder uiBinder = GWT
.create(MultiListBoxUiBinder.class);
interface MultiListBoxUiBinder extends
UiBinder<Widget, MultiListBox> {
}
public MultiListBox() {
initWidget(uiBinder.createAndBindUi(this));
}
#UiField ScrollPanel scrollPanel;
#UiField FlowPanel flowPanel;
private final List<CheckBox> checkboxes = new ArrayList<CheckBox>();
private final List<String> selectedValues = new ArrayList<String>();
#Override
public void addItem(final String value, final String text){
final CheckBox checkbox = new CheckBox(text);
checkbox.setFormValue(value);
checkbox.addClickHandler(new ClickHandler()
{
public void onClick(final ClickEvent event)
{
final CheckBox chkbox = (CheckBox)event.getSource();
if(chkbox.getValue())
{
selectedValues.add(value);
}
else
{
selectedValues.remove(value);
}
}
});
flowPanel.add(checkbox);
checkboxes.add(checkbox);
}
#Override
public List<String> getSelectedValues(){
return selectedValues;
}
#Override
public void clear() {
checkboxes.clear();
selectedValues.clear();
flowPanel.clear();
}
#Override
public int getItemCount() {
return checkboxes.size();
}
}
I am consuming this in my views like
<my:MultiListBox ui:field="myList"></my:MultiListBox>
Now, I wanted to create a onClick handler for this "myList" field in my view like
#UiHandler("myList")
void onMyListCliced(ClickEvent e) {
//TODO: handle it
}
Can anyone please guide how to achieve it.
Regards,
Sree
Your MultiListBox has to implement interface HasClickHandlers (in case of click event).
If you want to allow usage of other events via UiHandler there is a bunch of other interfaces in a form of Has*Handlers, which you will have to implement on your custom widget.

Inline editing in GWT cell table

I have a cell table in one of my GWT screen. Now requirement is that there will be some button on the screen clicking on which one editable row will be inserted into the cell table. if I am not wrong this is called inline editing.
Can somebody please help me with that? I have just started working in GWT.
Here is very simple example of adding new editable row to the celltable. I hope I understand what you meant :)
public class Test
implements EntryPoint
{
public void onModuleLoad()
{
//create and attach table
final CellTable<A> table = new CellTable<A>();
RootPanel.get().add(table);
//add editable cell
table.addColumn(new Column<A, String>(new TextInputCell())
{
#Override
public String getValue(
A object)
{
return object.getA() == null ? "" : object.getA();
}
});
//put some data
ListDataProvider<A> dataProvider = new ListDataProvider<A>(
Arrays.asList(new A("AAA"), new A("BBB"), new A("CCC")));
dataProvider.addDataDisplay(table);
//add button with click handler
RootPanel.get().add(new Button("add new", new ClickHandler()
{
#Override
public void onClick(
ClickEvent event)
{
//add new object to visible items
List<A> data = new ArrayList<A>(table.getVisibleItems());
A newOne = new A();
data.add(newOne);
table.setRowData(data);
}
}));
}
class A
{
String a;
public A(
String a)
{
super();
this.a = a;
}
public A()
{
super();
}
public String getA()
{
return a;
}
public void setA(
String a)
{
this.a = a;
}
}

GWT - celltable

I'm having problem with a column in my cell table not being populated with anything. Following is my code:
public class CellTableExample implements EntryPoint {
private static class Contact
{
private String address;
private String name;
private String phone="";
public Contact(String name, String address, String phone) {
super();
this.address = address;
this.name = name;
this.phone=getPhoneNumber(name);
}
}
public String getPhoneNumber(String name)
{
String pNum="";
SQLRunnerAsync service = (SQLRunnerAsync) GWT.create(SQLRunner.class);
AsyncCallback<String> callback = new AsyncCallback<String>()
{
#Override
public void onFailure(Throwable caught)
{
}
#Override
public void onSuccess(ArrayList<String[]> result)
{
pNum=reuslt;
}
};
service.findPhoneNum(name,callback);
return pNum;
}
// The list of data to display.
private static List<Contact> CONTACTS = Arrays.asList(
new Contact("John", "123 Fourth Road asdf asdf asdfasdf"),
new Contact("Mary", "222 Lancer Lane")
);
#Override
public void onModuleLoad() {
CellTable<Contact> table = new CellTable<Contact>();
SQLRunnerAsync service = (SQLRunnerAsync) GWT.create(SQLRunner.class);
AsyncCallback<ArrayList<String[]>> callback = new AsyncCallback<ArrayList<String[]>>()
{
#Override
public void onFailure(Throwable caught)
{
}
#Override
public void onSuccess(ArrayList<String[]> result)
{
compFlexTable.setPageSize(result.size());
Contact[] contactArr = new Contact[result.size()];
for(int i=0;i<result.size();i++)
{
String [] temp = result.get(i);
String name=temp[0];//name
String address=temp[1];//address
contactArr[i]=new Component1(name,address);
}
COMPONENT=Arrays.asList(compArray);
//address column
TextColumn<Contact> addressColumn = new TextColumn<Contact>(){
#Override
public String getValue(Contact contact) {
return contact.address;
}
};
//name column
TextColumn<Contact> nameColumn = new TextColumn<Contact>(){
#Override
public String getValue(Contact contact) {
return contact.name;
}
};
//name column
TextColumn<Contact> phoneColumn = new TextColumn<Contact>(){
#Override
public String getValue(Contact contact) {
return contact.phone;
}
};
service.getContactInfo(callback);
// Add the columns.
table.addColumn(nameColumn, "Name");
table.addColumn(addressColumn, "Address");
table.setRowCount(CONTACTS.size(), true);
table.setRowData(0, CONTACTS);
RootPanel.get().add(table);
}
}
So when I'm creating a contact object, another async method is being called to get the phone number for the contact. The table displays fine but the column for the phone number is empty. How do I resolve this? Any ideas/suggestions will be appreciated.. Thanks so much in advance.
You are misunderstanding the order of execution of your program. In getPhoneNumber, you set pNum to "", start an asynchronous request, and then return pNum. pNum is still "" at the end of this process. Later, when your asynchronous request returns, pNum is set to result, but at that point it's too late - your celltable has already been rendered.
Basically, you can't expect any asynchronous calls to complete in time to render your table accurately, once render has been called. All of the data you need must be immediately available before you render, or it won't show up. You can subclass a DataProvider to do these extra retrievals before asking the CellTable to render itself.
use asynchronous data provider as #Riley said
for more reference use the below link ..
http://www.mytechtip.com/2010/11/gwt-celltable-example-using_8168.html