FlexSheet - How to set a row readonly in flexsheet

FlexSheet - How to set a row readonly in flexsheet

Posted by: ashrivastav1 on 14 September 2017, 11:57 am EST

• 

  ashrivastav1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  I am using the get service to pull the data and showing the same in the flesheet.
  
  Can you please suggest how can I make a full row readonly on the basis on the data coming in the cell.

  Thanks,
  
  Abhishek

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  You will need to use event handling for this purpose. There are methods like beginningEdit,rowEditStarting which can be used. You can use any one of them based on your requirement. These methods have the following signature i.e eventname(source,event). You can call the event.cancel inside these events to cancel any edits to the cell/row based on some condition. This would effectively make the row/cell readonly.

   <wj-flex-sheet #flexSheetIntro (initialized)="flexSheetInit(flexSheetIntro)" (rowEditStarting)="rowEditStarting(flexSheetIntro ,$event)"> 
              <wj-sheet name="Country"></wj-sheet>
              <wj-sheet name="Empty Sheet"></wj-sheet>
          </wj-flex-sheet>
  

  rowEditStarting(s: wjGrid.FlexGrid, e: wjGrid.CellRangeEventArgs) {
  // check some condition   
    e.cancel=true;
    }

  Thanks,
  
  Abhishek

• 

  Gopala.Chintakindi

  • Post Options:
  • Link
    Copy

  Posted 26 September 2018, 12:06 pm EST

  I tried this. It is not working. I am able to edit cells. I want edit disable at row level and also cell level

  public rowEditStarting(s: wjcGridSheet.FlexSheet, e: wjcGrid.CellRangeEventArgs) {
  // check some condition 
  console.log(e);
  console.log(s);
  if (s.selectedSheet.name === 'UI') {
  e.cancel = true;
  }
  }
  
  <wj-flex-sheet #flexSheet [selectedSheetIndex]="0" (initialized)="flexSheetInitialize(flexSheet)" (dragover)="dragOverFile($event)" (drop)="dropFile($event, flexSheet)" (rowEditStarting)="rowEditStarting(flexSheet ,$event)">
  <wj-sheet name="Country" [itemsSource]="countryFlexSheetData"></wj-sheet>
  <wj-sheet name="Number" [rowCount]="20" [columnCount]="8"></wj-sheet>
  <wj-sheet name="Date" [rowCount]="20" [columnCount]="8"></wj-sheet>
  </wj-flex-sheet>
  

• 

  Gopala.Chintakindi

  • Post Options:
  • Link
    Copy

  Posted 26 September 2018, 2:12 pm EST

  I did like this

  
  private disableCell(row: number, col: number) {
          const element: HTMLElement = this.flexSheet.cells.getCellElement(row, col);
          if (element !== null && element !== undefined) {
              element.className = 'wj-cell wj-state-disabled wj-wrap';
          }
          this.flexSheet.beginningEdit.addHandler(
              function(sender, e: any) {
                  if (e.row === row && e.col === col) {
                      e.cancel = true;
                  }
              }
          );
      }