PDA

View Full Version : ToolTip in HeaderGroupConfig



Jonny Campos
16 Dec 2009, 11:15 AM
Hi all

Just a simple question...

Does anyone knows if it is possible, in some way, to add a tooltip for each individual HeaderGroupConfig of the header of a grid?

Thanks in advance!

Arno.Nyhm
17 Dec 2009, 8:31 AM
i think you dont mean the setToolTip of a columnconfig.


i have not tested it. but maybe you can do it on the "html" way. in the group header you can include the qtip in the html like this:



String headerHtmlText = "<span qtip='" + myQTipText + "'\">" + myHeaderText + "</span>the other possible way is to find the groupheader element and set it like this:



if (tip != null) {
getmyHeaderElementElement().setAttribute("qtip", tip);
}

new QuickTip(getmyHeaderElementElement());


maybe this ways are wrong ... this is just an idea

Jonny Campos
17 Dec 2009, 10:51 AM
Thanks for the answer!

Unfortunately, neither of them work :(

Thanks anyway

Arno.Nyhm
18 Dec 2009, 2:04 AM
did you init the QuickTip with the elements / or grid?

Arno.Nyhm
18 Dec 2009, 4:39 AM
ok. i used from examples folder ColumnGroupingExample:


1) first solution qtip in html

i changed this line:


cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2));in to this:


String myHeaderText = "Stock Performance";
String myQTipText = "TT:SP";
String headerHtmlText = "<span qtip='" + myQTipText + "'\">" + myHeaderText + "</span>";
HeaderGroupConfig headerGroupConfig = new HeaderGroupConfig(headerHtmlText, 1, 2);

// ...

// then you need also to add later this quick tip init:
new QuickTip(grid);this works. one not good point. it shows tooltip only over the text, and not over all the full header.


2) second solution with widget in header

i changed this line:


cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Header Grouping Example", 1, 5));to this lines:


LayoutContainer headerWidget = new LayoutContainer();
headerWidget.add(new Text("Header Grouping Example"));
headerWidget.setToolTip("TT:CDE");
cm.addHeaderGroup(0, 0, new HeaderGroupConfig(headerWidget, 1, 5));(in this case you dont need to init the qtip - it do it automatic)


benefit: it shows the tooltip also on the whitespace in the header not only exactly over the text.



PS: full working sample code

note: you need also the TestData from examples... you can also remove this part - you can see it also without data in the grids.




package com.mycompany.myapplication.client.forumsnippets;

import com.google.gwt.core.client.EntryPoint;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Slider;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.grid.HeaderGroupConfig;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.table.NumberCellRenderer;
import com.extjs.gxt.ui.client.widget.tips.QuickTip;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.RootPanel;
import com.mycompany.myapplication.client.forumsnippets.resources.TestData;
import com.mycompany.myapplication.client.forumsnippets.resources.model.Stock;

/**
*
* @author anonym
*/
public class ForumThread419953GroupingHeader implements EntryPoint {

public void onModuleLoad() {
RootPanel.get().add(new ColumnGroupingExample());
}

public class ColumnGroupingExample extends LayoutContainer {

private NumberFormat currency = NumberFormat.getCurrencyFormat();
private NumberFormat number = NumberFormat.getFormat("0.00");
private NumberCellRenderer<Grid<Stock>> numberRenderer;
private GridCellRenderer<Stock> change;
private GridCellRenderer<Stock> gridNumber;
private VerticalPanel vp;

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
numberRenderer = new NumberCellRenderer<Grid<Stock>>(currency);
change = new GridCellRenderer<Stock>() {

public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<Stock> store, Grid<Stock> grid) {
double val = (Double) model.get(property);
String style = val < 0 ? "red" : "green";
return "<span style='color:" + style + "'>" + number.format(val) + "</span>";
}
};

gridNumber = new GridCellRenderer<Stock>() {

public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<Stock> store, Grid<Stock> grid) {
return numberRenderer.render(null, property, model.get(property));
}
};

vp = new VerticalPanel();
vp.setSpacing(20);

createGrid(false);
createGrid(true);

add(vp);
}

private void createGrid(boolean widget) {
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(200);
configs.add(column);

column = new ColumnConfig();
column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100);
configs.add(column);

column = new ColumnConfig();
column.setId("last");
column.setHeader("Last");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(75);
column.setRenderer(gridNumber);
column.setToolTip("TT:Last");
configs.add(column);

column = new ColumnConfig("change", "Change", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setRenderer(change);
configs.add(column);

column = new ColumnConfig("date", 125);
if (widget) {
Button btn = new Button("Updated");
btn.addListener(Events.OnClick, new Listener<ButtonEvent>() {

public void handleEvent(ButtonEvent be) {
// stop column from getting click and causing sort
be.cancelBubble();
}
});
btn.setStyleAttribute("float", "left");
column.setWidget(btn, "Last Updated");
} else {
column.setAlignment(HorizontalAlignment.RIGHT);
column.setHeader("Last Updated");
}

column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
configs.add(column);

ListStore<Stock> store = new ListStore<Stock>();
store.add(TestData.getStocks());

ColumnModel cm = new ColumnModel(configs);

LayoutContainer headerWidget = new LayoutContainer();
headerWidget.add(new Text("Header Grouping Example"));
headerWidget.setToolTip("TT:CDE");
cm.addHeaderGroup(0, 0, new HeaderGroupConfig(headerWidget, 1, 5));

String myHeaderText = "Stock Performance";
String myQTipText = "TT:SP";
String headerHtmlText = "<span qtip='" + myQTipText + "'\">" + myHeaderText + "</span>";
HeaderGroupConfig headerGroupConfig = new HeaderGroupConfig(headerHtmlText, 1, 2);

cm.addHeaderGroup(1, 2, headerGroupConfig);

if (widget) {
Slider s = new Slider();
s.setWidth(100);

// ugly, but centers slider
FlexTable tbl = new FlexTable();
tbl.setWidth("100%");
tbl.setHTML(0, 0, "&nbsp;");
tbl.setHTML(0, 1, "<span style='white-space: nowrap;font-size: 11px'>Slide Me: &nbsp;</span>");
tbl.setWidget(0, 2, s);
tbl.setHTML(0, 3, "&nbsp;");
tbl.getCellFormatter().setWidth(0, 0, "50%");
tbl.getCellFormatter().setWidth(0, 3, "50%");
cm.addHeaderGroup(1, 0, new HeaderGroupConfig(tbl, 1, 2));
} else {
cm.addHeaderGroup(1, 0, new HeaderGroupConfig("Stock Information", 1, 2));
}

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
// cp.setIcon(Resources.ICONS.table());
cp.setHeading(widget ? "Column Grouping with Widget" : "Column Grouping");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(600, 300);

Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setStyleAttribute("borderTop", "none");
grid.getView().setForceFit(true);
grid.setBorders(true);
cp.add(grid);

new QuickTip(grid);

// grid.getView().getHeader().get

vp.add(cp);
}
}
}