Flexgrid colors

Flexgrid colors

Posted by: kisar on 22 August 2018, 3:00 am EST

• 

  kisar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 August 2018, 3:00 am EST

  Hi could you help me to change the color:

  • alternative row

  • background (with fixed height the empy side I would like to have gray and not blank)

  I tried with .wj-row { but it works only with the foreground color

  Thanx

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 August 2018, 8:51 am EST

  Hi,
  
  We are sorry for the delayed response.
  
  The alternative rows can be colored using wj-alt class. Please refer to the following code snippet:

  .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected){
  	background-color : lightcoral !important;
  }
  

  You may add the background color for FlexGrid blank area using following CSS:

  [wj-part="root"]{
  	background-color:aqua !important;
  }
  

  ~Manish

• 

  kisar

  • Post Options:
  • Link
    Copy

  Posted 29 August 2018, 4:05 am EST

  Thank you

• 

  kisar

  • Post Options:
  • Link
    Copy

  Posted 30 August 2018, 9:06 am EST

  sorry could you help me to :

  • customize the ColumnFooters : height, background, font…

  Thank you

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2018, 5:43 am EST

  Hi Kisar,

  The ColumnFootes Color can be changed using following css:

  .wj-colfooters .wj-cell.wj-header{
  	color:red !important;
  	background-color: yellow!important;
  }
  

  Regarding changing rows height for ColumnFooters, following code snippet can be used:

  var grid=wijmo.Control.getControl("#grid");
  grid.columnFooters.rows[0].height=21;
  

  Hope it helps!

  ~Manish

• 

  kisar

  • Post Options:
  • Link
    Copy

  Posted 31 August 2018, 10:17 am EST

  Thank you,
  
  if I use flexgrid with fixed height,
  
  is it possible show the footer always on the bottom
  
  (even if there are a few rows) and not as the last row.

  Thank you

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 3 September 2018, 1:49 am EST

  Hi Kisar,
  
  The CoulmnFooters gets shown always on the bottom of FlexGrid with the fixed position.

  Could you please let us know where you would like to show ColumnFooters?

  ~Manish

• 

  kisar

  • Post Options:
  • Link
    Copy

  Posted 3 September 2018, 5:06 am EST

  Hi,
  
  This is how I would like to be,
  
  I my case if the grid has few rows, example 2 rows > the column footer is the third row, and not at the bottom of grid.

  Thanx

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 September 2018, 1:22 am EST

  Hi Kisar,
  
  There is no way to achieve this using CSS. However, this could be achieve by adding a row with height equals to blankarea.
  
  Please refer to the following demo sample for the implementation.
  
  https://jsfiddle.net/mo1pntkr/
  
  And please add the following code to your project.

  
  <style>
  .no-border-cell{
    border:none!important;
    background:none!important;
  }
  </style>
  <script>
  if(grid){
  	if(grid.scrollSize.height < grid.hostElement.clientHeight){
      	var rowSize= grid.rows.defaultSize;
        var blankHeight = (grid.hostElement.clientHeight-(2*rowSize))-grid.scrollSize.height;
        var row=new wijmo.grid.Row()
        row.height=blankHeight;
        row.cssClass="no-border-cell";
        row.isReadOnly=true;
        grid.rows.push(row)
      }
  }
  </script>
  
  

  Hope it helps!

  ~Manish