Results 1 to 6 of 6

Thread: Some styles applied with gridViewConfig are overwritten

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Cremona Italy
    Posts
    37

    Default Some styles applied with gridViewConfig are overwritten

    Hi folk! Here I am with another issue.
    While configuring row/column style of a grid with gridView's gridViewConfig everything works fine if I just setup che css property "color" (so it will apply normally to font color in the grid).
    But when I change to it, say, "background-color", this doesn't render.
    Exporing with Chrome's DevTool I found this:

    css.jpg

    The last class is what I've set in gridViewConfig, the first is what overrides my setting when I run my app.

    For reference I just do:
    Code:
    gridViewDTO.setViewConfig(new GridViewConfig<DTO>() {
                @Override
                public String getColStyle(DTO model,ValueProvider<? super DTO, ?> valueProvider,int rowIndex, int colIndex) {
                    return null;
                }
                @Override
                public String getRowStyle(DTO model, int rowIndex) {
                    if (model.getProp() != null) {
                        return style.backgroundGreen();
                    } else {
                        return style.backgroundRed();
                    }
                }
            });
    where style is an instance of CssStyle I got from my ClientBundle.
    I tried both row and column setting with no luck.

    Any ideas? I don't think that's intended.

    Regards

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Probably because you are injecting your CSS before the grid CSS is injected (happening when calling the Grid/GridView constructor).

    Could you try to inject your CSS after calling the constructor?

    Another solution would be to mark your rule as important.

    Code:
    .backgroundRed {
    background-color: red !important;
    }

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Cremona Italy
    Posts
    37

    Default

    Thanks for the reply Sven.

    "!important" is working but only if I put syles in getColStyle(), not in the getRowStyle().

    Can you please elaborate "inject CSS after calling constructors" ?
    I tryed to make
    Code:
    gridView = new GridView<>();
    grid = new Grid<>(store, columnModel, gridView);
    gridView.setViewConfig(new GridViewConfig<>() {};
    But nothing changed, am I missing some major method?

    Thank you again.

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    But nothing changed, am I missing some major method?
    I meant your custom CssResource (what is referenced by "style").

    That needs to be injected after you create your grid. The Grid code can stay at it is

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    "!important" is working but only if I put syles in getColStyle(), not in the getRowStyle().
    I guess this is because each cell is having an own background color set by default. Thats why its overriding the one you set on the parent(the row). Chrome Debugger will tell you for sure when looking at the cell element. If there is a background color assigned, that one will be visible, as that element is a child of the row.

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Cremona Italy
    Posts
    37

    Default

    Just for complete reference on the issue.
    I'm using UiBinding, so for "inject after constructor" you need to
    Code:
    //setup of the grid
    this.component = uiBinder.createAndBindUi(this);
    style.ensureInjected();
    If working on row background-color, definition of "on select" and "on over" styles is also needed.
    I'll post all the relevant code after I'm done.

    Thanks Sven.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •