Set Css Class for a cell in flexgrid

Set Css Class for a cell in flexgrid

Posted by: mayanksoni73 on 14 September 2017, 11:22 am EST

• 

  mayanksoni73

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  In Flexgrid I need to set css class for a particular cell. I have have its row number & Column number.

  I can get data of that cell by using following code
  
  Grid_Table.getCellData(row, col)

  Similary is there any way to set Css Class for this cell.? I am using pure js for flexgrid.

  I have to do this in separate function NOT in any event like cellformatter/CellEditEnd

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  Hello,

  We are working on your query. We will get back to you soon.

  Thanks,
  
  Manpreet Kaur

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  Hello,

  We apologize for the delayed response. You can use the following code to get the cell element in an external function and use the addClass method to set the css on the cell:

  [js]
  
  // 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");
      }
  

  [/js]

  Kindly refer to the attached HTML Page which implements the same. Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2015/08/CellCss.html

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  Hi,
  
  I am trying to add class to the cell in itemFormatter so that I can change style of multiple cells based on the value in the cell edited by user.

  I have attached my test html file to demonstrate the problem.

  I expected the cells to get red background but instead I see only
  
  only one cell in the grid containing “US”. No errors in the console. I get the same result if I am trying the “while loop” logic or just $(cell).addClass(“test”);

  Could you please show me what I am missing?

  thank you
  
  2015/12/addClassExample.html

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  Hello,

  I apologize for the delayed response. You can use the following code to set the background color of the cells:

  [js]
  
  //Set the backgroundColor property of the Style attribute
  
  cell.style.backgroundColor = “red”;

  //Add class to the cell
  
  cell.classList.add(“test”);
  
  [/js]

  Kindly refer to the attached HTML Page which implements both the approaches. Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2016/01/addClassExample_New.html

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:23 am EST

  Hello,

  Kindly refer to the attached HTML Page which depicts how you can set the cell border.

  Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2016/01/GridBorder.html

• 

  nandyala.praveen

  • Post Options:
  • Link
    Copy

  Posted 5 March 2018, 5:18 pm EST

  Hi Manpreet ,

  The above solution is not working for me.

  I am retrieving specific cell using row and col number and applying option1 is not working for me. The option 2 giving me error as property does not exists.

  option 1:
  
  cell.classList.add(“test”);

  options 2:
  
  cell.style.backgroundColor = “red”; ( angualr cli giving error on cell.style)

  Thanks for your time

  Thanks
  
  Praveen