Cell Selected CSS style

Posted by: hoang-nguyen on 14 September 2017, 12:12 pm EST

  • Posted 14 September 2017, 12:12 pm EST

    How do I set the selected cell with border color change to another color (example red) but the cell background remains the original color of the cell. I have tried:

    .wj-state-selected, .wj-state-multi-selected {

    border-width: 0.1;

    border-left: 1px solid red;

    border-right: 1px solid red;

    border-bottom: 1px solid red;

    font-size: .95em !important;

    }

    this will give me a red cell border but automatically change cell background color to blue by default. How do I reserve the original color of the cell?

    How I change the footer cell background color by CSS? I have tried wj-footer but it does not work:

    .wj-footer {

    background-color: #5B9BD5;

    color: white;

    border-width: 0.1;

    border-left: 1px solid lightgray;

    border-bottom: 1px solid lightgray;

    text-align: center;

    word-wrap: break-word;

    font-weight: normal;

    text-align: center !important;

    font-size: .85em !important;

    }

    Thank you very much

  • Posted 14 September 2017, 12:12 pm EST

    Hi Hoang,

    You can change the CSS properties value by using !important. For e.g.

    .wj-state-selected .wj-state-multi-selected {

    border-width: 0.1 !important;

    border-left: 1px solid red !important;

    border-right: 1px solid red !important;

    border-bottom: 1px solid red !important;

    font-size: .95em !important;

    }

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 12:12 pm EST

    Hi Manish, thank you for replying. However, what you are suggesting is exactly what I did. Even though I did not specify cell’s backcolor, it always default to blue background. Example, I have a cell with green background. When selected, it becomes blue background. When it’s lost foucus to another cell, it will return to green background and the new selewcted cell will have default blue background. I am looking for a way to change the border color to another color but keep the cell backcolor to original. Just like Excel, when you navigate from one cell to another, only the cell’s border change but not the cell. Is there such a way to do this sir? Thank you sir very much.

  • Posted 14 September 2017, 12:12 pm EST

    Hello Hoang,

    Please use the following CSS for the same, this will persist styles backgroundColor if applied.

    .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
                 background:#fff;
            }
            .wj-state-selected {           
                border: 1px solid red !important;
            } 

    Hope it helps!

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 12:12 pm EST

    Thank you Manish for quick replying. I have copy your css but it does not work. I am attaching here the sample code of what I did.

    https://www.dropbox.com/s/wyn1426z2ri4ht8/wijmoTest.7z?dl=0

  • Posted 14 September 2017, 12:12 pm EST

    Hi Hoang,

    We are investigating this.

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 12:12 pm EST

    Thank you Manish for your help.

  • Posted 14 September 2017, 12:12 pm EST

    Hello Honag,

    Please use the following CSS for the same:

    .wj-cell:not(.wj-alt):not(.wj-header):not(.wj-group){
            background: green !important ;
        }
       .wj-state-selected {             
           border: 5px solid red !important;
       }
       .wj-alt:not(.wj-header):not(.wj-group){
           background: #fff!important;
           color:#000;       
       }

    Above CSS does not allow to change color for the FlexGrid cell on condition based. Hence, you should replace following class in the wijmo.theme.material.primary.min.css class as per your project:

    .wj-state-selected{background:transparent;}.wj-state-multi-selected{background:transparent;}

    and

    home.scss
     .wj-state-selected {     
           color:black!important;        
           border: 5px solid red !important;
       }

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 12:12 pm EST

    Thank you Manish for quick respond. I have tried your suggestion and it works partially. Meaning the default blue color is no longer display (this is what I am looking for) but it displays white color background. I am looking for way to reserve original cell color because I have multiple cell color on the same grid. Each color represent an action/category such as read only, cell contain formula, editable… etc … please look at cell with green background on my example. Thank you sir very much.

    https://www.dropbox.com/s/wyn1426z2ri4ht8/wijmoTest.7z?dl=0

  • Posted 14 September 2017, 12:12 pm EST

    Hi Hoang,

    We are sorry for the inconvenience caused. We need to remove background property from wijmo.min.css and theme css file. Please refer to the updated sample for the same.

    ftp://ftp.componentone.com/supportftp/public/Samples/Manish/FlexGrid_selected_cell_CSS.zip

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 12:12 pm EST

    Good Morning Manish. Thank you for helpinng me. I have followed your example code and here is what I have found what you have changed:

    1. After changing style sheets to

      a) wijmo.min.css

      b) styles/wijmo.theme.material.primary.min.css
    2. comment out the style for .wj-state-selected and .wj-state-multi-selected in these 2 files as follow

      .wj-state-selected {

      /* background-color: #0085c7;

      color: #fff; /

      }

      .wj-state-multi-selected {

      /
      background-color: #80adbf;

      color: #fff; */

      }
    3. on home.css, you have added

      .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt) {

      background:green ;

      color:#000;

      }

      .wj-state-selected {

      border: 2px solid yellow !important;

      }

      .my{

      background: lightcoral !important;

      }
    4. on home.ts you have added:

      itemFormatter=(panel,r,c,cell)=>{

      if(wjGrid.CellType.Cell==panel.cellType ){

      if(r === 0) {

      cell.style.backgroundColor=“aqua”;

      } else if(r === 2) {

      panel.rows[r].cssClass=“my”;

      }

      }

      }

    Now when I run it, it seems to work fine. But when I check it. It only works on row 0 & 2 where you have changed it background color through itemformatter(). The alternate row of white and green background does not work.

    Because you have added:

    .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt) {

    background:green ;

    color:#000;

    }

    thus when I select a cell on green background row, it will act as it only change the border but not the cell background. On the white color alternate row, of course it shows white color background and yellow border because in the beginning, it shows white cell background regardless of current cell background.

    To prove it, I change the alternate row color to light green and light purple, now you can see that when I select any cell on row with light green back ground, it will show the darker green that you added. If I select any cell on row with light purple background, it will shows white background.

    So this will work only when you use itemformatter to format cell style backcolor. In my case I set the row alternate color through style sheet, is there a work around for this one sir?

    my other question is, allowMerging will only work on first row of column header. I have insert 3 columnheader rows (s.columnHeaders.rows.push(new wjGrid.GroupRow()):wink:

    and I set:

    s.allowMerging = wjGrid.AllowMerging.All;

    s.columnHeaders.rows[0].allowMerging = 2;

    s.columnHeaders.rows[1].allowMerging = ‘All’;

    s.columnHeaders.rows[2].allowMerging = ‘All’;

    with your allowMerging Enum:

    Name Value Description

    None 0 No merging.

    Cells 1 Merge scrollable cells.

    ColumnHeaders 2 Merge column headers.

    RowHeaders 4 Merge row headers.

    AllHeaders ColumnHeaders | RowHeaders Merge column and row headers.

    All Cells | AllHeaders Merge all areas.

    I have tried all of those values on columnheader row index 1 & 2 but they are not working at all. What am I missing here sir?

    Thank you sir very much

    <https://www.dropbox.com/s/qn811agj1c6g9lu/wijmoTest.zip?dl=0&gt;

  • Posted 14 September 2017, 12:12 pm EST

    Hi Hoang,

    You need to set Row and alternative color using CSS as follows, with this CSS definition you would be able to keep background for selected cell too:

    // Keep backgroud color same while cell is selected
      .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt) {
        background:#E9E925 ;
      }
      // Change  Row background Color
      .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) { 
          background:#E9E92B ;
      }  
      // Keep backgroud color same while cell is selected
      .wj-alt{
        background:#6DD27C;
      }
      // Change Alternative Row background Color  
      .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
        background:#6DD27C;
      }
      .wj-state-selected {           
          border: 2px solid red !important;
      } 

    For merging of Row,

    You need to make little changes in your code as follows:

    s.allowMerging = wjGrid.AllowMerging.All;
    s.columnHeaders.rows[0].allowMerging = true; // Row allowMerging property requires boolean value
    s.columnHeaders.rows[1].allowMerging = true; // Row allowMerging property requires boolean value
    s.columnHeaders.rows[2].allowMerging = true; // Row allowMerging property requires boolean value
    

    Hope it helps!

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 12:12 pm EST

    Thank you Manish,

    With your css, I am able to reserve the cell background color when selected. About cell merging, I am not able to merge all rows on column header. I created a grid with a column header with 4 rows, I was able to merge the first row but not second and third row. Any rows not column header are merging normally. Attaching is my current code. Please let me know what I am missing sir. Thank you sir very much.

    <https://www.dropbox.com/s/mhcf2par3hgk9qh/wijmoTest.7z?dl=0&gt;

  • Posted 14 September 2017, 12:12 pm EST

    Hello Hoang,

    You need to push Row instead of GroupRow in ColumnHeaders. If you have information for cell range to be merged, you can use mergeManager. Please refer to the updated src files.

    //Changes are made in home.ts only

    Thanks,

    Manish Kumar Gupta

    2017/09/src.zip

  • Posted 14 September 2017, 12:12 pm EST

    Thank you Manish. After changing to push Row instead of GroupRow. It is working.

    The issue I am still getting is:

    1. I need my columnheaders to merge both vertical and horizontal
    2. Any other cells not columnheaders to merge horizontal only.

    I achieve this by setting the s.allowMerging = wjGrid.AllowMerging.All;

    then each row that need merging by:

    for (let i = 0; i < s.rows.length; i++) {

    s.rows[i].allowMerging = true;

    }

    s.columnHeaders.rows[0].allowMerging = true

    s.columnHeaders.rows[1].allowMerging = true

    s.columnHeaders.rows[2].allowMerging = true

    s.columnHeaders.rows[3].allowMerging = true

    This will merge horizontal fine. But columnheader need both horizontal and vertical merging, so I add:

    for (let i = 0; i < s.columns.length; i++) {

    s.columns[i].allowMerging = true;

    }

    When I do this, all rows, all cells are merging both horizontal and vertical when cell contains same value. I only need header to merge horizontal & vertical.

    I saw your example of custom merger. I have tried it:

    mergeHeaders(grid: wjGrid.FlexGrid, range: wjGrid.CellRange): void {

    let mm = new wjGrid.MergeManager(grid);

    mm.getMergedRange = function(panel, r, c) {
      if (panel.cellType === wjGrid.CellType.ColumnHeader) {
        if (r &gt;= 0 &amp;&amp; range.contains(r, c)) {
          return range;
        }
      }
    
      return null;
    };
    
    grid.mergeManager = mm;
    

    }

    and I call it in loadedRows event:

    this.mergeHeaders(s, new wjGrid.CellRange(0,2,2,8));

    this.mergeHeaders(s, new wjGrid.CellRange(0,9,0,15));

    this.mergeHeaders(s, new wjGrid.CellRange(1,9,1,15));

    this.mergeHeaders(s, new wjGrid.CellRange(0,16,0,22));

    this.mergeHeaders(s, new wjGrid.CellRange(1,16,1,22));

    this.mergeHeaders(s, new wjGrid.CellRange(0,23,1,s.columns.length - 1));

    The weird thing is that, it breaks all cell merging I had before, but this is normal because I am applying custom merging. What weird is that I call mergeHeader() 6 times, it will merge the last call only, which is this.mergeHeaders(s, new wjGrid.CellRange(0,23,1,s.columns.length - 1)) and break all others. How can I combine multi ranges into 1 single range and then call mergeHeader()?

    Thank you sir very much

  • Posted 14 September 2017, 12:12 pm EST

    Hello Hoang,

    You need to update mergeHeaders method and push ranges in an array. For your reference, please refer to the code:

    // Push cellRanges in an array
     this.range.push(new wjGrid.CellRange(0,2,2,8));
        this.range.push(new wjGrid.CellRange(0,9,0,15));
        this.range.push(new wjGrid.CellRange(1,9,1,15));
        this.range.push(new wjGrid.CellRange(0,16,0,22));
        this.range.push(new wjGrid.CellRange(1,16,1,22));
        let colLength=s.columns.length;
        this.range.push( new wjGrid.CellRange(0,23,1,colLength-1));
        this._mergeHeaders(s,this.range); 
    //updated Merger Header method
     private _mergeHeaders(grid:wjGrid.FlexGrid,ranges:Array<wjGrid.CellRange>):void{
        let mm= new wjGrid.MergeManager(grid);    
        mm.getMergedRange = function(panel, r, c) {
            if (panel.cellType == wjGrid.CellType.ColumnHeader) {
                for(let i=0;i<ranges.length;i++){
                  if (r >= 0 && ranges[i].contains(r, c)) {              
                    return ranges[i];
                  }
                }
            }
            return null;
        };
        grid.mergeManager=mm;
      }

    Since we have customized merger manager, default merging for the cell may be interrupted if any.

    Please read the following blog:

    http://wijmo.com/blog/wijmo-com-will-soon-be-grapecity-com/

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 12:12 pm EST

    Hello Hoang,

    I got a property in FlexGrid to make selection same as Excel. Using this property, you does not need to customize CSS as we did in the previous discussion.

    Please try to set showMarquee to true.

    Thanks,

    Manish Kumar Gupta

  • Posted 5 March 2018, 5:21 pm EST

    Hi Manish,

    I am looking for solution to apply the style on specific cell on flexgrid. I tried the below but both of them are not working. Could you please get back on this?

    / get a grid cell from the row/col indices

    function getGridCell(r, c) {

            // find the cell from its bounding rectangle
            var rc = grid.getCellBoundingRect(r, c);
            var cell = document.elementFromPoint(rc.left + rc.width / 2, rc.top + rc.height / 2);
    
            // make sure this is a regular cell (not a header)
            if (wijmo.hasClass(cell, 'wj-header')) {
                cell = null;
            }
    
            // make sure this is not an element within a cell
            while (cell && !wijmo.hasClass(cell, 'wj-cell')) {
                cell = cell.parentElement;
            }
            $(cell).addClass("test");
        }
    

    //Set the backgroundColor property of the Style attribute

    cell.style.backgroundColor = “red”;

    //Add class to the cell

    cell.classList.add(“test”);

    Thanks for your time

    Thanks

    Praveen

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels