Results 1 to 3 of 3

Thread: Grid Row/Cell & Text highlighting in GXT3

  1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2010
    Posts
    193

    Default Answered: Grid Row/Cell & Text highlighting in GXT3

    Hi,

    Could you please let me know how can a row/cell background color could be set to any color?

    I would also like to know how a row/cell text color can be set to any color.

    Thanks.

  2. Quote Originally Posted by dxdev View Post
    Could you please let me know how can a row/cell background color could be set to any color?
    Shall every cell of a given column have the same color(s) or shall color(s) depend on data value of cells?
    Try this for a column of type Integer:
    Code:
            AbstractCell<Integer> cell = new AbstractCell<Integer>() {            @Override
                public void render(Context context, Integer value, SafeHtmlBuilder sb) {
                    // For column depending coloring you may use context.getColumn();
                    
                    // Value depending coloring
                    String bgcolor = "#DDBABE";
                    String colorCode = "#000000";
                    if (value != null) {
                        if (value >= 10) {
                            bgcolor = "#BBDDFF";
                            colorCode = "#FF0000";
                        } 
                        if (value >= 100) {
                            bgcolor = "#442200";
                            colorCode = "#CAFEEE";
                        } 
                        sb.appendHtmlConstant("<div style='background-color:"+ bgcolor + ";' <span style='color:" + colorCode + ";'>" + value + "</span></div>");
                    }
                }
            };
    
    
    
            columnConfig.setCell(cell);

  3. #2
    Sencha User
    Join Date
    Jul 2011
    Location
    Germany
    Posts
    223
    Answers
    5

    Default

    Quote Originally Posted by dxdev View Post
    Could you please let me know how can a row/cell background color could be set to any color?
    Shall every cell of a given column have the same color(s) or shall color(s) depend on data value of cells?
    Try this for a column of type Integer:
    Code:
            AbstractCell<Integer> cell = new AbstractCell<Integer>() {            @Override
                public void render(Context context, Integer value, SafeHtmlBuilder sb) {
                    // For column depending coloring you may use context.getColumn();
                    
                    // Value depending coloring
                    String bgcolor = "#DDBABE";
                    String colorCode = "#000000";
                    if (value != null) {
                        if (value >= 10) {
                            bgcolor = "#BBDDFF";
                            colorCode = "#FF0000";
                        } 
                        if (value >= 100) {
                            bgcolor = "#442200";
                            colorCode = "#CAFEEE";
                        } 
                        sb.appendHtmlConstant("<div style='background-color:"+ bgcolor + ";' <span style='color:" + colorCode + ";'>" + value + "</span></div>");
                    }
                }
            };
    
    
    
            columnConfig.setCell(cell);

  4. #3
    Ext GWT Premium Member
    Join Date
    Oct 2010
    Posts
    193

    Default

    Hi

    Thanks for your reply. This is working for the cell background though the entire cell is not covered. There seems to be some padding issues.

    I tried the below code, and the Text color is changing but the background color is still not reflecting changes:

    grid.getView().setViewConfig(new GridViewConfig<PMemo>() {
    public String getRowStyle(PMemo model, int rowIndex) {
    if ("G0100032432624".equals(model.getProductNumber())){
    return "redrow";
    }else if ("Conway".equals(model.getArtistName())){
    return "redrow";
    }
    return null;
    }

    public String getColStyle(PMemo model,
    ValueProvider<? super PMemo, ?> valueProvider, int rowIndex,
    int colIndex) {
    return null;
    }
    });


    And the CSS is as below:

    .redrow {
    color: green;
    background-color: yellow;
    }


    Could you please give your suggestion?

Tags for this Thread

Posting Permissions

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