I need hide VAD group columns on button click. Please help me.
You can use Column API methods:
setColumnVisible(colKey, visible) Sets the visibility of a column. Key can be the column id or Column object.
or
setColumnsVisible(colKeys, visible) Same as setColumnVisible, but provide a list of column keys.
hide(){
this.gridColumnApi.setColumnsVisible(['columnNameOne', 'columnNameTwo'], false);
}
show(){
this.gridColumnApi.setColumnsVisible(['columnNameOne', 'columnNameTwo'], true);
}
Demo
Related
I have list of Items with parent child relation.
At present I am displaying them in a single table. In each row, fist column starts with number of '-'s indicating the depth.
Now I want show only top level items first and with a '+' button before that.
When the user clicks on the '+' button it should turn to '-' and the children of that particular Item need to be displayed.
So, Please help me how to implement that Expand and Collapse functionality in GWT.
EDIT:
I have my Items in a tree format.
Now I am creating a DataTable and Displaying it using GoogleTableChart
The code as follows:
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Item Name ");
data.addColumn(ColumnType.STRING, "Item Id");
data.addColumn(ColumnType.NUMBER, "Quantity");
data.addColumn(ColumnType.NUMBER, "Price ($)");
data.addRows(treeList.size());
int i=0;
while(i<treeList.preOrderTraversal().size())
{
int col=0;
Item d=(Item) treeList.preOrderTraversal().get(i);
int level=d.getLevel();
//setting values to DataTable goes here
i++;
}
GoogleTableChart tblChart = new GoogleTableChart();
vPanel.add(tblChart.showFlexibleTable1(data));
Here is my solution:
I create Nested VertialPanels for each Item. And put the reference in a map.
Hide/unhide the panels based on clicks.
For root Item take one panel and add all its children.
After adding one child, add all its children to another panel,hide it and add to root panel.
repeat the steps recursively.
before each row place put (+/-) label and add click handler which take item id as parameter.
when these lables are clicked, based on the status we hide/unhide the panels, taken from the map.
Any Better Solution ... ??
I have a flextable that gets populated with data from a database.
I want to get the ROW number of the clicked row.
So far I figured out only how to get the value of a particular cell in a particular row. You have to know the position and hard code it which isn't practical.
String test =flexTable.getFlexCellFormatter().getElement(2, 2).getInnerHTML();
System.out.println(test);
How can I create a ClickHandler to get the selected row?
//flexTable is a FlexTable object. Add a ClickHandler to it.
flexTable.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
//gets the index of the cell you clicked on
int cellIndex = flexTable.getCellForEvent(event).getCellIndex();
//gets the index of the row you clicked on
int rowIndex = flexTable.getCellForEvent(event).getRowIndex();
//print statements below will verify
System.out.println("cellIndex "+cellIndex);
System.out.println("rowIndex "+rowIndex);
//gets the value of the selected cell
String test =flexTable.getFlexCellFormatter().getElement(rowIndex,cellIndex ).getInnerHTML();
System.out.println(test);
}
});
The FlexTable supports row spans and column spans, allowing you to layout data in a variety of ways. I think you should use CellTable or a DataGrid or for that matter even a CellList if only single column data is being displayed. To these widgets you can add a selectionhandler to which you can achieve your goal. Refer this it has some pre coded examples.
When I select a row in a CellTable which contains several columns, the whole row gets colored in yellow. It does not depend on which area of the row I click (which column of the row).
What I try to do is to keep the selected row colored in yellow as long as no other row of this very table is selected. At the moment, as soon as I click somewhere else in the browser, the row gets back its original color.
I tried to use a selection model, but this changed nothing. Do you have any advise or is this simply not possible, since the focus is managed by the browser? The behavior is the same in the Google showcase for the CellTable...
The selection model actually does what you want to do: it paints a row blue and the row does not change color if you click elsewhere in the page. (Only when another row is selected)
There are 2 selection models:
One that lets you select only one row, and another one that lets you select multiple rows.
MultiSelectionModel<Row> selectionModel = new MultiSelectionModel<Row>();
table.setSelectionModel(selectionModel);
SingleSelectionModel<Row> selectionModel = new SingleSelectionModel<Row>();
table.setSelectionModel(selectionModel);
The solution of user905374 did actually work. I mentioned in my first post that I already tried the solution with a selectionModel and that it did not work. This was partially true. It does work, but only if the table does NOT contain a CheckboxCell.
Following a working and the not working example. I think this might be a bug, but I am not sure if I miss something.
final CellTable<LicenceDto> licenseTable = new CellTable<LicenceDto>();
final SingleSelectionModel<LicenceDto> selectionModel = new SingleSelectionModel<LicenceDto>();
licenseTable.setSelectionModel(selectionModel);
//--- If I add this column, the selection does work.
Column<LicenceDto, String> workingColumn = new Column<LicenceDto, String>(new TextCell()) {
#Override
public String getValue(LicenceDto object) {
return "Works";
}
};
workingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, String>() {
#Override
public void update(int index, LicenceDto object, String value) {
;
}
});
licenseTable.addColumn(workingColumn);
//--- If I add this column, the selection does NOT work anymore.
Column<LicenceDto, Boolean> notWorkingColumn = new Column<LicenceDto, Boolean>(new CheckboxCell(true, true)) {
#Override
public Boolean getValue(LicenceDto object) {
return object.getEnabled();
}
};
notWorkingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, Boolean>() {
#Override
public void update(int index, LicenceDto object, Boolean value) {
presenter.enableLicense(object, value);
}
});
licenseTable.addColumn(notWorkingColumn);
You can even combine multiple cells and add them to the table (e.g. LinkActionCell etc). As long as there is no CheckboxCell, the blue selection with the SingleSelectionModel does work like a charm. Does anyone see what I do wrong with this CheckboxCell or is there a bug?
UPDATE
It was simply a usage error of me. The problem was that I set handlesSelection to true (second parameter of the CheckboxCell constructor) even thought I don't handle anything. Setting it to false solves the problem.
Bottomline: Use a selection model (e.g. SingleSelectionModel) and do not set the handlesSelection parameter to true of the CheckboxCell constructor to true, if you don't handle the selection by yourself.
You should observe the Showcase demo again. This time use the checkbox on the left most column i.e the first column. On selection the row turns blue indicating the row selection is made. This is when you have SelectionModel set up. Click on the page anywhere outside the CellTable/DataGrid the selection is not changed.
Now, instead of choosing the row via checkbox from first column, you click on a row in any other column. The row turns yellow. Click on the page anywhere outside the CellTable/DataGrid the focus/yellow is lost.
"colored in yellow" indicates row is under focus and being edited and not selected.
Note - you can force row selection by using click events per cell.
Try something like this:
CellTable table;
YourDataObject object = new YourDataObject(...);
SingleSelectionModel<YourDataObject> selectionModel =
new SingleSelectionModel<YourDataObject>();
table.setSelectionModel(selectionModel);
...
table.setSelected(object, true);
Use MultiSelectionModel if you wish more than one line to be highlighted.
Store the selected row's index. When user selects row, change row's style to some "selected-style" appropriate for your case (defined in your css file) and remove selected style from the previously selected row. Also don't forget to update selected row's index.
If you provide some code from the original version I help you out with some code with pleasure.
I need to reset all the values of field elements of my page. The elements are: inputs, selects (combobox), checkbox and radio group.
Searching found the following code:
$("*").attr('value', '');
$("input[type='checkbox']").attr("checked",false);
$('select').each(function() {
if($(this).children().length > 0) {
$($(this).children()[0]).attr('selected', 'selected');
$(this).change();
}
});
Inputs and checkbox are ok with this code, but the other components present problems with the codes tested. The radio group needed or take any kind of selection or at least select the first. The combobox resets with this code but when trying to select a new value it is not storing your value.
Thanks!
The non textual inputs need to be refreshed. Here's an example of doing so:
//reset text input values, then refresh slider widgets
$(".ui-input-text").val('').filter('.ui-slider-input').slider('refresh');
//reset checkboxes and radio inputs, then refresh them
$(".ui-checkbox input[type='checkbox'], .ui-radio input[type='radio']").prop("checked", false).checkboxradio("refresh");
//reset all select menus and then refresh them
$('.ui-select select').val('').selectmenu('refresh');
return false;
Here is a demo: http://jsfiddle.net/MLewd/1/
I have a cell Table in GWT with columns , there are 3 rows in each column, I want the first row to get selected by default when the application starts
some thing like this
mycelltable.setselectedrow(index);
is it possible ?
Thanks
her is the code
display.getShortListedCVsBasedOnJob().getResumeDescriptionColumn().setFieldUpdater(
new FieldUpdater<CandidateSummary, String>() {
public void update(int index, CandidateSummary object,
String value) {
fetchResume(cvSelected, shortListedFlag);
}
});
This fetchResume() method calls but only when i select cell of this column , I want to call this fetchResume() method as my application starts, i.e i want to make the 1st cell of the column to be selected byDefault.
Selection is handled by a SelectionModel, based on objects (not indices); so you have to select the first object from your data in the SelectionModel used by the CellTable (have a look at the Using a key provider to track objects as they change sample code in the Celltable javadoc for an example (last sample before nested classes summary).
This could work?
setSelected(Element elem, boolean selected)
see GWT Documentation
CellTable Google Web Toolkit
Hmm I dont see what´s the Celltable is there. I would set the initial Value like this:
int INITAL_SET_ROW = 0;
TableRowElement initalSetElement = yourCellTable.getRowElement(INITAL_SET_ROW);
yourCellTable.setSelected(initialSetElement, true);
You can try to implement it in you´re main Method. Haven´t tested it tho, hope it helps.
Simply;
List<RowType> source = new LinkedList<RowType>();
//put some data to this list
//populate the table
table.setRowCount(source.size(), true);
table.setRowData(0, source);
//for example, you can select the first row
RowType firstRow = source.get(0);
selectionModel.setSelected(firstRow, true);