Id like to add tooltip to each item of a ListBox ?
Any idea ?
Thanks for all.
Since the ListBox doesn't expose it's OptionElement list, we'll need to get the underlying SelectElement.
SelectElement selectElement = SelectElement.as(listBox.getElement());
From there, we just set the title on each OptionElement.
NodeList<OptionElement> options = selectElement.getOptions();
for (int i = 0; i < options.getLength(); i++) {
options.getItem(i).setTitle("Hover text for item #" + i);
}
Related
Is there a way to have row selection checkbox for each row without configuring a special column for it? I mean to add propertie for my gridOptions and to see checkbox near each row, then to get all selected rows?
All the documentation I read is showing how to do it by adding it to specific column.
Thanks,
You can still have row selection without having a checkbox column - you can either simply have selection based on row selection, or have a column render with a checkbox in it (with a custom cell renderer).
Take a look at the Selection Documentation for more information about row selection, and at the Cell Rendering Documentation about cell rendering
I know it is too late to answer on this post. But It may help someone who look for solution still. It works with checkbox selection on each row (click anywhere on the row to select checkbox), shift/control and toggle selection. Here I have given only necessary code.
vm.gridOptions = {
appSpecific : {},
onRowClicked : onRowClicked,
onGridReady : function() {
let api = vm.gridApi = vm.gridOptions.api;
}
};
function toggleSelect(row) {
row.node.setSelected(!row.node.isSelected(), false);
}
function onRowClicked(row) {
var appSpecific = vm.gridOptions.appSpecific;
var lastSelectedRow = appSpecific.lastSelectedRow;
var shiftKey = row.event.shiftKey;
// if not modifier keys are clicked toggle row
if (!shiftKey) {
toggleSelect(row);
} else if (lastSelectedRow !== undefined) {
if (shiftKey) {
var startIndex, endIndex;
// Get our start and end indexes correct
if (row.rowIndex < lastSelectedRow.rowIndex) {
startIndex = row.rowIndex;
endIndex = lastSelectedRow.rowIndex;
}
else {
startIndex = lastSelectedRow.rowIndex;
endIndex = row.rowIndex;
}
// Select all the rows between the previously selected row and the
// newly clicked row
for (var i = startIndex; i <= endIndex; i++) {
vm.gridApi.selectIndex(i, true, true);
}
}
}
// Store the recently clicked row for future use
appSpecific.lastSelectedRow = row;
getSelection(); // Implement functionality to get selected rows
}
I am trying to implement a tool tip (QuickTip) functionality on a GXT grid cell.It seems to work most of the time, but some times I get an empty tooltip box while mousing over the column header. I found some articles stating the tooltip is only applicable to the data and not on header,but thats not the case I guess. I made the toolTip/text null by default, still I see empty box on header-mouse over.Am I doing something wrong?
This is my code:
ColumnConfig columnTitle = new ColumnConfig();
columnTitle.setId("subject");
columnTitle.setHeader("<B>Title</B>")
columnTitle.setRenderer(new GridCellRenderer<ModelData>()
{
#Override
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<ModelData> store, Grid<ModelData> grid)
{
SystemUserMessage msg = ((BeanModel)model).getBean();
String text = null;
text = msg.getSubject();
String content = model.get("content").toString();
String toolTip = null;
toolTip = " qtip='" + content + "'";
String style = null;
if(msg.getPriority().equals("High"))
{
style = " style='color: red;'";
}
String html = "<span" + toolTip + style + ">" + text + "</span>";
return html;
}
});
new QuickTip(messageCenterGrid); //register the tooltip
Try replacing qtip= with data-qtip= . You can also add data-qtitle=
Edit helpful link per Juan : http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tip.QuickTipManager
I have a probably rather basic problem in OpenLayers, it would be really great if someone could help me out on this one.
I have an array of markers, which should each have a different popup box text. However, I fail in applying the according text to a marker. I tried to do this via another array for the content of the popup boxes. However, i couldn't relate the correct text to a marker. Here is my code:
var vs_locations = [
[13.045240, 47.8013271],
[13.145240, 47.8013271],
[13.245240, 47.8013271],
];
var popupContentHTML = [
"Text for marker with loc[0]",
"Text for marker with loc[1]",
"Text for marker with loc[2]"
];
function addVS(){
for (var i = 0; i < vs_locations.length;i++){
var loc = vs_locations[i];
var feature = new OpenLayers.Feature(volksschulen, new OpenLayers.LonLat(loc[0],loc[1],loc[2]).transform(proj4326,proj900913));
feature.closeBox = true;
feature.data.icon = new OpenLayers.Icon('coffeehouse.png');
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
'autoSize': true,
});
marker = feature.createMarker();
volksschulen.addMarker(marker);
feature.data.popupContentHTML = ; //Here should be the text according to the marker
feature.data.overflow = "auto";
marker.events.register("mousedown", feature, markerClick);
feature.popup = feature.createPopup(feature.closeBox);
map.addPopup(feature.popup);
feature.popup.hide();
}
}
did you try:
feature.data.popupContentHTML = popupContentHTML[i];
assuming the length of your location array matches your text array, both in length anf position
I have a grid that is dynamically generated based on search criteria. I render the grid in a partial view using Ajax. That all works fine.
I now need to add a checkbox column as the first column.
Also, how do I get filtering, sorting paging etc. to work now since it is in a partial view.
When i click on a header to sort I get a Page not found error and the filter Icon doesnt do anything.
And one more thing. When I try to add a GridCommandColumnSettings to the grid I get the error
"Invalid initializer member declarator"
Code is below for the gridcolumnsettings
public GridColumnSettings[] NewColumns(DataTable fullDT)
{
GridColumnSettings[] newColumns = new GridColumnSettings[fullDT.Columns.Count];
for (int i = 0; i < fullDT.Columns.Count; i++)
{
// set the visibility property for the DeliveryID
bool boolDeliveryID;
if (fullDT.Columns[i].ColumnName == "DeliveryID")
boolDeliveryID = false;
else
boolDeliveryID = true;
newColumns[i] = new GridColumnSettings
{
new GridCommandColumnSettings
{
Commands =
{
new GridEditActionCommand(),
new GridDeleteActionCommand()
},
Width = "200px",
Title = "Commands"
},
Member = fullDT.Columns[i].ColumnName,
Title = fullDT.Columns[i].ColumnName,
Visible = boolDeliveryID,
Filterable = true,
Sortable = true
};
}
return newColumns;
}
Any suggestions would be appreciated.
Thanks
I edited my post to add my partial for the Grid
Here is my partial for the grid
#(Html.Telerik().Grid<System.Data.DataRow>(Model.Data.Rows.Cast<System.Data.DataRow>())
.Name("Grid")
.Columns(columns =>
{
columns.LoadSettings(Model.Columns as IEnumerable<GridColumnSettings>);
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("_DeliveryManagerCustomBinding", "Deliveries"))
.EnableCustomBinding(true)
.Resizable(resize => resize.Columns(true))
)
I don't add columns this way when I use the Telerik Grid control, but looking at what you're doing I would hazard a guess to say you will need to do something like the following:
increase the size of the newColumns array by 1 (because we're going to add in the checkbox column):
GridColumnSettings[] newColumns = new GridColumnSettings[fullDT.Columns.Count + 1];
if you want it at the beginning you will need to do the following before your for-loop:
GridColumnSettings s = new GridColumnSettings() {
ClientTemplate("<input type=\"checkbox\" name=\"checkeditems\" value=\"some value\" />")
Title("title goes in here")
};
Then you will add it into your array:
newColumns[0] = s;
and then increase the start index for your for-loop to 1:
for (int i = 1; i < fullDT.Columns.Count; i++)
the checkbox column will go at the beginning
Is it possible to set the column width of CellTable in GWT?
EDIT: As of GWT 2.2 table.setWidth and table.setColumnWidth are supported
table.setWidth("100%", true);
table.setColumnWidth(nameColumn, 35.0, Unit.PCT);
table.setColumnWidth(addressColumn, 65.0, Unit.PCT);
I was able to extend the CellTable with a method that sets the widths programmatically. It's a bit of a hack since all the real methods that should do this are private to CellTable and it seems like GWT should provide this method directly, but it seems to work.
public void setColumnWidths(List<Integer> widths)
{
TableElement tel = TableElement.as(getElement());
NodeList<Element> colgroups = tel.getElementsByTagName("colgroup");
if (colgroups.getLength() == 1)
{
TableColElement cge = TableColElement.as(colgroups.getItem(0));
NodeList<Element> cols = cge.getElementsByTagName("col");
for (int j = 0; j < widths.size(); j++)
{
TableColElement column = null;
if (cols.getLength() > j)
{
column = TableColElement.as(cols.getItem(j));
}
else
{
column = cge.appendChild(Document.get().createColElement());
}
column.setWidth(widths.get(j)+"px");
}
}
}
You could use a stylename for the specific column, using the addColumnStyleName(int index, java.lang.String styleName) method.
Javadoc for CellTable
What worked for me is adding a new class in my css. This class gets applied only to select elements whose length varies depending on data.
.__gwt_cell select{
width:170px;
}
Then applying it on my particular cell style like o:
table.getColumn(3).setCellStyleNames("yourstyle");
The GWT documentation for CellTable covers this, see:
http://www.gwtproject.org/doc/latest/DevGuideUiCellTable.html
Under "Controlling Column Widths".