Render disabled cell in editabled row

Render disabled cell in editabled row

Posted by: moritz.neugebauer on 27 September 2020, 11:44 pm EST

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 27 September 2020, 11:44 pm EST - Updated 3 October 2022, 6:30 am EST

  Dear Wijmo Team,

  I’m currently trying to disable cells by using itemFormat EventHandler.

  When a column is readOnly, I want the cells to appear disabled.
  
  When a certain row is editable, I want the cells to appear editable

  But additionally, I want two certain columns to appear disabled, regardless of the certain row. How can I achieve this.

  Here is my code:

  
  //regular cells
              if (e.panel == s.cells) {
                  let item = s.rows[e.row].dataItem;
                  if (!item) {
                      return
                  }
  
  		// Disable isReadOnly row
                  let disabledCell: string = "disabled-cell";
                  if(item.isReadOnly) {
                      s.rows[e.row].cssClass = disabledCell;
                  }
                  
  		// Enalbe special row
                  if(item.isSpecialRow) {
                      let classes = e.cell.classList;
                      classes.remove(disabledCell);
                  }
                  
                  // Disable isReadOnly columns
                  let column = s.columns[e.col];
                  if(column.isReadOnly) {
                      column.cssClass = disabledCell;
  		}
  	}
  
  

  The result of this code looks like this
  
  

  

  1008×232 21 KB

  • All columns are set to be readOnly
  • Only second row is editable

  But I want the first two columns of the second row to look disabled, too. How can I achieve that?

  Best regards
  
  Moritz

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 29 September 2020, 1:48 pm EST

  Replied:
  
  https://www.grapecity.com/forums/wijmo/render-disabled-cell-in-ed_1

• 

  steve.schrab

  • Post Options:
  • Link
    Copy

  Posted 5 February 2024, 1:54 am EST

  The above link takes you to this page. Is there a solution to this problem somewhere else?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 5 February 2024, 4:17 pm EST

  Hi Steve,

  I’m attaching the solution for the above-mentioned issue below:

  To disable specific cells in the grid, you need to set the disabled class at the cell level instead of the row level. You can use the formatItem and beginningEdit events of FlexGrid to style the disabled cells and make them readOnly (non-editable) using these events, respectively. Please refer to the sample link below, demonstrating the same:

  https://stackblitz.com/edit/js-lcgrx2?file=style.css,index.js

  Regards