I want to style a grid row after clicking on it. I get the grid row / item in the itemClickListener, but I need to avoid using grid.select(item). I have achieved the desired output which would highlight the row I clicked on with the grid select method, but this causes problems for my app since I do not want that row to be selected, but I want it to be just highlighted, e.g. apply a CSS style to said row. This is my code so far:
grid.addItemClickListener(e -> {
grid.deselectAll();
grid.select(e.getItem());
});
as well as:
grid.setStyleGenerator(row -> grid.getSelectedItems().contains(row)
? getRowSelectedStyle(row)
: null);
I cannot seem to find anything on the forums which could apply a style name for the clicked row.
You probably need to add a property to your item Bean, se "clicked".
Then you could do
grid.addItemClickListener(e -> {
e.getItem().setClicked(true);
grid.getDataProvider().refreshItem(e.getItem());
});
And
grid.setStyleGenerator(row -> row.isClicked()
? getRowSelectedStyle(row)
: null);
Related
I have implemented bootstrap 4 data table 4 in angular 4 but not able to change or modify row color. row selection color and header color as well.
I am using the data table 4 example : https://github.com/afermon/angular-4-data-table-bootstrap-4
and in this examples demo go through the demo 1 of link: https://afermon.github.io/angular-4-data-table-bootstrap-4-demo/
Considering the below code snippet present in data-table-component-demo1.ts got by the Git project you downloaded:
<data-table id="persons-grid"
[header] = "false"
[multiSelect] = "false"
[substituteRows]="false"
[indexColumn]="false"
[items]="items"
[itemCount]="itemCount"
(reload)="reloadItems($event)"
[pagination]="false"
(rowClick)="rowClick($event)"
[rowColors] = "callBackForChangineRowColors"
>
<data-table-column
[property]="'name'"
[header]="'Name'"
[sortable]="true"
[styleClass]="someExplicitClass"
In this, we can assign the value 'someExplicitClass' to [styleClass] as shown above and define the class someExplicitClass in our data-table-component-demo1.css file as below:
:host /deep/ .someExplicitClass{
background-color:red;
}
However, this is applied to the whole of the DataColumn and not controllable on a granular level.
We can indirectly apply only background-color using the rowEvent variable available within the rowClick(rowEvent) function of 'data-table-component-demo1.ts'
On click of the row, I will set the selected property of the row to true and thereby will trigger the onRowSelectChanged function of table.component.ts file
Now, once I set [rowColors] value to "callBackForChangineRowColors" as shown above and make the below changes in my data-table-component-demo1.component.ts file:
rowClick(rowEvent) {
console.log('Clicked: ' + rowEvent.row.item.name);
rowEvent.row.selected = true;
}
callBackForChangineRowColors(a,b,c)
{
if(b.selected)
return 'blue';
}
This way, I will be able to apply the color of blue explicitly for the selected Row.
*I could'nt unfortunately find any solution to apply any other styles on a granular level using a readily available input parameter like [styleClass] for it wasnt exposed as an #Input within our column.component.ts. If anyone has an idea, please do help me know it.
When I start a page with grid, first row is focused and this style is beeing applied(row is highlighted):
.v-grid-row-focused > .v-grid-cell {
// ...
}
But when I programmtically change data source
grid.setContainerDataSource(...)
It doesn't highligh first row.
I've tried to select and deselect first item but it doesn't work.
myGrid.focus() also doesn't work.
How can I do that programmatically?
I have a couple of OptionGroups with very long captions that run across the width of the page, which looks very bad. I tried restricting the width of the OptionGroup using setWidth and via CSS, and also tried restricting the width of the parent container; all without effect.
So I made a grid layout with an option group in the first column (spanning all rows), and individual labels for the captions in the second column (one per row). However, in case the captions span multiple lines (which they do in my case), this leads to the radio buttons / checkboxes no longer being aligned to the captions. (Regrettably, I'm not allowed to post images.) For instance,
(o) This is a multiline
(o) caption
This is another multiline
caption
I resolved this by creating one OptionGroup per label, and adding each option group in the first column:
(o) This is a multiline
caption
(o) This is another multiline
caption
Clearly, in case of radio buttons, this means multiple buttons can be selected at the same time, since they are no longer linked via a single OptionGroup. Therefore, I registered listeners which, each time a button is selected, de-select all other buttons. And this brings me to my problem; since this "unchecking" is done at the server side, there will unavoidably be some lag, meaning that for some time, multiple radio buttons will appear selected at the client side.
Any ideas on how to resolve this? I only started working with Vaadin recently, so I'm far from an expert. Is there some simple way of restricting the caption width (some magical undocumented CSS class), or do I need to extend / adapt the client-side widget implementation?
Thanks,
William
What you need is FlexibleOptionGroup add-on.
Here is an example implementation:
#Override
protected void init(VaadinRequest request) {
Container cont = new IndexedContainer();
cont.addContainerProperty("caption", String.class, "");
// very long strings in the following setValue() methods
cont.getContainerProperty(cont.addItem(), "caption").setValue("I have...");
cont.getContainerProperty(cont.addItem(), "caption").setValue("So I ma...");
FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
fog.setCaption("FlexibleOptionGroup:");
fog.setItemCaptionPropertyId("caption");
fog.setMultiSelect(true); // force using CheckBoxes
VerticalLayout fogLayout = new VerticalLayout();
Iterator<FlexibleOptionGroupItemComponent> iter;
iter = fog.getItemComponentIterator();
while(iter.hasNext()) {
// OptionGroupItem part (CheckBox or RadioButton)
FlexibleOptionGroupItemComponent fogItemComponent = iter.next();
// CustomComponent part
Label caption = new Label(fogItemComponent.getCaption());
caption.setWidth(400, Unit.PIXELS);
fogLayout.addComponent(new HorizontalLayout(fogItemComponent, caption));
}
setContent(fogLayout);
}
The above code produces:
i would like to have one list select that will have more than one style, i put two kinds of object's one is a group of users (bold), rest are users (italic or regular) is it possible to add style that will be added to part of added obj?
My code looks like this:
for(Usr usr: userSearchResult){
listSelect.addItem(usr);
}
listSelect.addStyleName("bold");
for (Gr gr : groupSearchResult) {
searchList.addItem(gr);
}
and also have style set in css correct similar to this
.v-select-bold .v-select-select {
font-weight:bold;}
i would be glad to solve this by myself but that was two days ago now i'm in a dot ;)
Thanks in advance for help!
You can store your row as a label with style. In the container there will be a label instance. There you can simply add the style.
Container container = new IndexedContainer();
container.addContainerProperty(NAME_PROPERTY, Label.class , "");
for (int i = 0; i <= 50 ; i++) {
Item item = container.addItem(i);
Label label = new Label(HashUtils.getRandomSalt());
label.addStyleName(style)
item.getItemProperty(NAME_PROPERTY).setValue();
}
return container;
You can't style rows of a ListSelect. You can use a Table component with one column to achieve a similar result. Table.setCellStyleGenerator method is used for differentiating styles for each cell (each row in your case).
I am new to DoJo development so this could be basic.
I have created an EnhancedDatagrid and it shows the data fine.
The data comes from an JSON store in a different page.
I have a button which causes that one new entry is created in the datastore and then my datagrid is 'refreshed'. This works fine.
But now i want only as the last step to change the style of the first row in my datagrid.
(I need to make the newly added row more visible.)
But i simply can't figure out how to get a handle on the first row in a datagrid.
...
grid = new dojox.grid.EnhancedGrid({
id: strId,
store: store,
structure: layout,
}, document.createElement('div'));
dojo.byId(placeHolder).appendChild(grid.domNode);
grid.startup();
var row = grid.getItem(0); // ---get the first row. How ? And how to apply new style ?
...
Thank you in advance.
Solved the problem like this:
dojo.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if (row.index == 0) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#FFB93F;';
}
});
I use the 'Claro' theme and it prevented me to set the background color of the row-cells.
The solution was to set the customClasses to a style like this:
.highlightRow tr
{
background-color: #FF6A00 !important;
}
Found part of the solution here: http://dojo-toolkit.33424.n3.nabble.com/row-customStyles-was-overwrite-by-claro-theme-td3763079.html