Render disabled cell in editabled row

Render disabled cell in editabled row

Posted by: moritz.neugebauer on 28 September 2020, 8:45 am EST

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 28 September 2020, 8:45 am EST - Updated 3 October 2022, 3:30 pm 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, 7:22 am EST

  Hello Moritz,
  
  For this, we need to set the cssClass for the First two columns. Please refer to the following demo link:
  
  https://stackblitz.com/edit/angular-euxwhd?file=package.json

  Regards,
  
  Manish Gupta

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 1 October 2020, 6:51 am EST

  Dear Manish,

  thank you for your response. In my case this works for the first two columns, because they have a special binding:

  
  		let disabledCell: string = "disabled-cell";
  
  		
                  if(item.isReadOnly) {
                      s.rows[e.row].cssClass = disabledCell;
                  }
                  
                  if(item.isEditable) {
                      if(s.columns[e.col].binding !== "serial" && s.columns[e.col].binding !== "somethingSpecial") {
                          let classes = e.cell.classList;
                          classes.remove(disabledCell);
                      }
                  }
  
  		let column = s.columns[e.col];
                  if(column.isReadOnly) {
                      column.cssClass = disabledCell;
  		}
  
  

  But I have other columns where I can’t decide that based on the columns binding. The data to decide that is stored in an array from which the columns are created…

  I need something like column.specialReasonWhyThisIsBlocked or something.

  Is is possible to add custom fields to a column in the create method of a column?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 October 2020, 10:56 pm EST

  Hello,
  
  We can not have our own property for the columns with standard WjFlexGridColumn. But you may set the name property to access later the information.

  Also, you may derive your own class from the Column class and add the custom property.
  
  Please let us know if you would like further help and also share your environment detail (JS Framework/Language - JS/TS) so that we may assist you accordingly.

  Regards,
  
  Manish Gupta