SCSS for DataGrid

Support
#1

Hi there

I’m trying to set up custom styles for a Datagrid. I’ve started from the example given in the CUBA sampler.

So, I took exactly the same “style.scss file”. It put in what I believe it is the right location (the DataGrid is in Budget_editor), like it is done here: sampler/modules/web/src/com/haulmont/sampler/web/ui/components/datagrid/style at 7bbc71bd1372edf5c4a33a5c3f047877184a800b · cuba-platform/sampler · GitHub

image

I have inserted this code within the controller:
@Install(to = "itemsTable", subject = "rowStyleProvider")
protected String itemsTableRowStyleProvider(Item item) {
return "active-customer";
}

And … nothing happens. I’m trying to understand what I missed. I don’t know where and how I have to tell the app to load and use this scss file.

Help appreciated, thanks in advance.

Cheers

#3

Hi @olivier.choquet.

Your custom styles should be defined in styles.scss file located in the theme extension (or custom theme) directory:
image.

In the CUBA example file style.scss is located there so that it can be shown in a separate tab when you view the sample.

Regards,
Nadezhda.

1 Like
#4

Hi Nadezhda
Thanks for posting an answer, it helps.
At the end your advice, plus a frantic use of the cache cleaning, almost resolved my issue.
The fact is, I’m trying to use it on a TreeDataGrid with a lot of code generated columns, and it looks that some properties (as background-color or even .vgrid{ …} are not well processed (which probable makes sense).

Here is a typical sample of what I do

private void addNameColumn(int position) {
        DataGrid.Column<Item> columnIcon = itemsTable.addGeneratedColumn("Name",
                new DataGrid.ColumnGenerator<Item, Component>() {
                    @Override
                    public Component getValue(DataGrid.ColumnGeneratorEvent<Item> event) {
                        if (itemsTable.getSelected().contains(event.getItem())) {
                            // edit mode
                            TextField<String> label = uiComponents.create(TextField.NAME);
                            label.setStyleName("roundFrame");
                            label.setValue(event.getItem().getName());
                            label.setEditable(true);
                            label.setWidth("100%");
                            label.addValueChangeListener(e -> {
                                event.getItem().setName(label.getValue());
                                dm.commit(event.getItem());
                                SynchroBookEvent sbe = new SynchroBookEvent(this, event.getItem());
                                events.publish(sbe);
                            });
                            return label;
                        } else  {
                            // read mode
                            Label<String> label =uiComponents.create(Label.NAME);
                            label.setValue(event.getItem().getName());
                            return label;
                        }
                    }

                    @Override
                    public Class<Component> getType() {
                        return Component.class;
                    }
                },position);
        columnIcon.setRenderer(new WebComponentRenderer<Item>());
        columnIcon.setWidth(700);
    }

Anyway, thanks for your support. Have a nice day.