Set Row isReadOnly = true

Set Row isReadOnly = true

Posted by: hoang.nguyen on 30 November 2017, 4:54 am EST

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 November 2017, 4:54 am EST

  I have a Flexgrid with 8 columns. There are 1 dropdown mapping to a column 1, 2 wij-input-date mapping to column 2 & 3, and a button on column 7

  How can I set the entire row to be readOnly when toDate is less than today date? which will not let user edit any cell on the row, dropdown will be disabled, input date is also disabled. Thank you very much

  <wj-flex-grid
        #flexLoans
        [allowAddNew]="true"
        [allowDelete]="true"
        [selectionMode]="3"
        [autoGenerateColumns]="false"
        [headersVisibility]="1"
        [itemsSource]="selectedLoans"
        (cellEditEnded)="loansChanged($event)"
        (deletedRow)="deleteLoanRow($event,flexLoans)"
        >
  
        <wj-flex-grid-column
          [binding]="'teamMemberLoanId'"
          [visible]="false"
          >
        </wj-flex-grid-column>
  
        <wj-flex-grid-column
          [dataMap]="loansMap"
          [showDropDown]="toDate >= minDate || toDate === null"
          [header]="'Loan to Business Unit'"
          [binding]="'businessUnitID'"
          [width]="'150*'"
          >
        </wj-flex-grid-column>
  
        <wj-flex-grid-column
          [header]="'From Date'"
          [binding]="'fromDate'"
          [width]="'50*'"
          [format]="'MM/dd/yyyy'"
          [inputType]="date"
          >
          <ng-template wjFlexGridCellTemplate
            [cellType]="'Cell'"
            let-cell="cell">
            <wj-input-date
              [min]="minDate"
              [(value)]="cell.item.fromDate"
              [min]="cell.item.fromDate ? cell.item.fromDate : minDate"
              [mask]="'00/00/0000'"
              [isRequired]="false"
              (valueChanged)="updateFromDate(cell.item)">
            </wj-input-date>
          </ng-template>
        </wj-flex-grid-column>
  
        <wj-flex-grid-column
          [header]="'To Date'"
          [binding]="'toDate'"
          [width]="'50*'"
          [format]="'MM/dd/yyyy'"
          [inputType]="date"
          >
          <ng-template wjFlexGridCellTemplate
            [cellType]="'Cell'"
            let-cell="cell">
            <wj-input-date
              [min]="minDate"
              [(value)]="cell.item.toDate"
              [min]="cell.item.fromDate ? cell.item.fromDate : minDate"
              [mask]="'00/00/0000'"
              [isRequired]="false">
            </wj-input-date>
          </ng-template>
        </wj-flex-grid-column>
  
        <wj-flex-grid-column
          [header]="'Comments'"
          [binding]="'comments'"
          [width]="'200*'"
          >
        </wj-flex-grid-column>
  
        <wj-flex-grid-column
          [header]="'Delete'"
          [allowSorting]="false"
          [width]="75"
          [align]="'center'"
          [isReadOnly]="true"
          >
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
            <button
              ion-button icon-only clear small
              [disabled]="item.toDate < minDate"
              (click)="removeLoan($event, item.teamMemberLoanId, flexLoans)">
              <ion-icon name="trash"></ion-icon>
            </button>
          </ng-template>
        </wj-flex-grid-column>
  
      </wj-flex-grid>
  

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 3 December 2017, 7:45 pm EST

  Hi,

  Use your grid’s item source’s CollectionChanged event to trigger validation of each row of your grid and manipulate Row.IsReadOnly property.

  @ViewChild('flexLoans') flexLoans : WjFlexGrid;
  

  this.selectedLoans.collectionChanged.addHandler( (collectionChanged)=> {
     this.flexLoans.rows.forEach((row: Row) => {
        if(row.dataItem['toDate'] < new DateTime()) {
           row.isReadOnly = true;
        }
     });
  })
  

  ~nilay

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 4 December 2017, 6:20 am EST

  Thank you Nilay,

  it works well. If fromDate is less than minDate, I need to set second column (businessUnitID) to be readOnly or disabled the dataMap. How do I set a cell to be readonly or disabled the dataMap base on a condition? Thank you sir very much.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 December 2017, 8:37 pm EST

  Hi Hoang,
  
  You need to handle beginningEdit event for preventing editing for any cell based on any condition. For your reference, please refer to the following code snippet:

   flex1.beginningEdit.addHandler(function(s,e){
                  if(flex1.rows[e.row].dataItem.date.getFullYear()==2013){
                      e.cancel=true;
                  }
              });
  

  ~Manish

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 5 December 2017, 4:37 am EST

  Thank you Manish