Toggle entire FlexGrid using column templates Read Only based on parameter

Posted by: ssmith on 25 July 2019, 12:47 pm EST

    • Post Options:
    • Link

    Posted 25 July 2019, 12:47 pm EST

    I’m following the documentation here: https://us.grapecitydev.com/wijmo/demos/Grid/Editing/Read-only/angular

    My requirement is that, based on a boolean attribute in the component, I need to be able to make an entire FlexGrid Read Only.

    I have a grid (#flex) that calls this on:

    (initialized)="initializeGrid(flex)"
    

    The init function is basically from the Docs except for the if(this._isReadOnly) condition.

        initializeGrid(flex: wjcGrid.FlexGrid) {
            flex.beginningEdit.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.CellRangeEventArgs) => {
                let item = s.rows[e.row].dataItem;
    			if (this._isReadOnly) { // prevent editing if read only is enabled
    				console.log("Read Only",this._isReadOnly);
                    e.cancel = true;      
                }
            });
        }
    
    

    Where this._isReadOnly is a boolean toggled true/false based on external logic. For testing I’m toggling with a button, and can confirm the state change, but the grid does not become read only.

    I’ve tried re-running the initializeGrid function on the grid after the state change to no effect - I don’t know if I need to remove the initial handler, or update the handler.

    Even setting the condition to _isReadOnly=true when the component initializes doesn’t actually make the FlexGrid read only, so clearly I’m missing something here.

    Some clarity here would be very much appreciated.

  • Posted 26 July 2019, 12:57 am EST

    Hi Stephen,

    The sample provided was to demonstrate how to make some of the cells read-only, But, if you wish to make the whole grid read-only, I would suggest you to use the isReadOnly property of FlexGrid instead of beginningEdit event. Please refer to the code snippet below:

    <wj-flex-grid #flex [isReadOnly]="_isReadOnly" [itemsSource]="source">
    </wj-flex-grid>
    

    You may also refer to the sample below:

    https://stackblitz.com/edit/angular-kwtpsq

    Please let us know if this solves your issue.

    Regards,

    Ashwin

  • Posted 26 July 2019, 10:40 am EST

    I’m afraid that doesn’t work. I’m wondering if it’s because we’re using controls in columns via templates like the following.

    <wj-flex-grid-column [header]="'W/D Date'" [binding]="'Wd_Date'">
    	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item" >
    		<wj-input-date 
    		[(ngModel)]="item.Wd_Date" 
    		format="dd/MMM/yyyy">
    		</wj-input-date>
    	</ng-template>
    </wj-flex-grid-column>
    
    <wj-flex-grid-column [header]="'Weight'"  [binding]="'Weight'">
    	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
    		<input type="number" 
    			[(ngModel)]="data[cell.row.index].Weight" 
    			>
    	</ng-template>
    </wj-flex-grid-column>
      
    <wj-flex-grid-column [header]="'UoM'" [binding]="'UoM'">
    	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
    		<wj-combo-box  class="wj-combo-box"  
    			name="UOM_Cd_{{cell.row.index}}"
    			id="UOM_Cd_{{cell.row.index}}" 
    			[(ngModel)]="data[cell.row.index].UOM_Cd" 
    			[itemsSource]="dropdown_list.units" 
    			[selectedValuePath]="'lookup_code'" 
    			[displayMemberPath]="'text_long'"
    			>
    		</wj-combo-box>		  
    	</ng-template>
    </wj-flex-grid-column>
    
    

    Would those ignore the FlexGrid read-only property, and if so - how can we make them inherit that?

  • Posted 29 July 2019, 2:08 am EST

    Hi Stephen,

    Yes, if we are using cell templates to edit the grid, then they will not be read-only even if the FlexGrid is read-only. To solve the issue, you will also need to set the isReadOnly property of the controls. Please refer to the code snippet below:

    <wj-flex-grid #flex [isReadOnly]="_isReadOnly" [itemsSource]="source">
      <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
      <wj-flex-grid-column header="Date" binding="date" [width]="150">
        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
          <wj-input-date [isReadOnly]="_isReadOnly" [(value)]="item.date"></wj-input-date>
        </ng-template>
      </wj-flex-grid-column>
      <wj-flex-grid-column header="Amount" binding="amount" [width]="150">
        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
          <wj-input-number [isReadOnly]="_isReadOnly" [(value)]="item.amount" [step]="10"></wj-input-number>
        </ng-template>
      </wj-flex-grid-column>
    </wj-flex-grid>
    

    You may also refer to the sample below:

    https://stackblitz.com/edit/angular-c6fdqz

    However, if you wish to use input controls as grid editor, I would suggest you use CustomGridEditor for FlexGrid. Please refer to the demo below:

    https://www.grapecity.com/wijmo/demos/Grid/Editing/CustomEditors/angular

  • Posted 29 July 2019, 6:12 pm EST

    How long as CustomGridEditor existed? This is a thing of absolute beauty! Thank you - I’ll do some work with this and see where I get to!

  • Posted 29 July 2019, 11:15 pm EST

    Hi,

    We are glad that we were able to help. Please let us know if you face any issues while implementing custom grid editors.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels