FlexGrid allow combobox selection but not editing (typing)

FlexGrid allow combobox selection but not editing (typing)

Posted by: kyle.m.vassella on 5 November 2018, 7:30 pm EST

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 November 2018, 7:30 pm EST

  I have a combo box with a list of items to select from.

  I’d like the user to be able to only select the predefined combo box options - but not able to type in their own option or change the wording of the existing options. [readOnly] = “true” disables both typing and combo box selection. Is there a way to accomplish this?

  Bonus question: how about the above behavior for all pre-existing rows, but allow users to both type and combo box select only on the ‘allowAdNew’ row at the bottom?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 November 2018, 2:11 am EST

  You need to set ‘isRequired’ property to the combo box to true(prevents from accepting nulls as value) and ‘isEditable’ to false(restricts input value to items from the itemsSource).

  how about the above behavior for all pre-existing rows, but allow users to both type and combo box select only on the ‘allowAdNew’ row at the bottom?
  
  <<<<<<<<<<<<
  
  Please refer to the following sample which demonstrates the required functionality: https://stackblitz.com/edit/angular-cfrgbg?file=app%2Fapp.component.ts

  ~Sharad

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 15 November 2018, 6:30 pm EST

  Thanks Sharad,

  I’m running into issues w/ my first question since for our datamaps we aren’t actually using a , but rather we are setting a dataMap inside of a .

  Given this, in Angular 6 how do I add [isEditable]=“false” to my datamap? I’ve tried adding it on the datamap and also on the , but both failed with errors that .isEditable is not a property of wj-flex-grid-column and wj-flex-grid.

  Is it possible to set [isEditable] to ‘false’ inside of a ? Here’s an example of my code:

  my.component.html

  
      <wj-flex-grid #m_grid [keyActionTab]="'CycleOut'" [allowAddNew]="true" [itemsSource]="m_collectionView" (initialized)="initGrid(sender, event)">
  	        <wj-flex-grid-column [header]="'myDataMapColumn'" [binding]="'myDataMapColumn'" [width]="155" [visible]="true"
              [isReadOnly]="false" [dataMap]="dataMap_0"
              ></wj-flex-grid-column>
  </wj-flex-grid>
  
  

  my.component.ts

  
  
   public dataMap_0;
  
      ngOnInit() {
          this.loadData();
          this.mapData();
      }
  
      // --------------------------------------------------------------------
  
      mapData() {
          var data =
              [
                  { "apiPath": this.m_myApiPath, "FieldName": "test" }
                  // 0
              ];
  
          this.mapData_0(data[0]);
      }
  
     // --------------------------------------------------------------------
  
      mapData_0(p_data) {
          this.dbService.get(p_data.apiPath)
              .subscribe
              (
              data => {
                  // data.unshift({ ID: 0, appID: 0, appName: "---" });
                  this.dataMap_0 = new this.m_wjcGrid.DataMap(data, p_data.FieldName + "ID", p_data.FieldName);
              },
              errorCode => {
                  console.log('errorCode:  ' + errorCode);
              }
              );
      }
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 November 2018, 1:24 am EST

  For dataMaps, you need to set isEditable property using the dataMap instance.

  this.dataMap_0 = new this.m_wjcGrid.DataMap(data, p_data.FieldName + "ID", p_data.FieldName);
  this.dataMap_0.isEditable = false;
  

  But if you want to set isEditable to true for only newRowTemplate you would have to use combo-boxes.
  
  Please refer to the following updated sample: https://stackblitz.com/edit/angular-2kwqpu?file=app%2Fapp.component.ts

  ~Sharad

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 4 December 2018, 5:22 pm EST

  Hi Sharad,

  In your last example https://stackblitz.com/edit/angular-2kwqpu?file=app%2Fapp.component.ts ,

  I’m failing to see what ```
  
  this.countryMap.isEditable = false;

  Also, with either true or false, If you type an entry into the dataMap that does not exist in that dataMap, it does not 'save' and reverts back to it's original value - example: if I type 'Mexico' in the 'Japan' dataMap and press 'enter', the dataMap field reverts back to 'Japan'.
  
  What is ```
  this.countryMap.isEditable = false;
  ``` doing, and is there a way to prevent typing in a dataMap cell, so that the user can only use the dropdown to select items?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 5 December 2018, 1:50 am EST

  Hi Kyle,

  In the sample above, isEditable has no effect because selectedValuePath and displayMemberPath are different, isEditable works only if both are one and the same.
  
  Read more about isEditable property here: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.DataMap.Class.html#isEditable

  is there a way to prevent typing in a dataMap cell, so that the user can only use the dropdown to select items?
  
  <<<<<<<<<<<<<<
  
  You may handle the prepareCellForEdit event and mark activeEditor as read-only. Please refer to the following code snippet and sample;

  grid.prepareCellForEdit.addHandler((s,e) => {
        let col = e.panel.columns[e.col];
        // if not column of interest or newrow template, return
        if(col.binding != 'countryMapped' || e.row == e.panel.rows.length - 1){
          return;
        }
  
        let val = grid.getCellData(e.row, e.col, true);
        setTimeout(()=>{
          // to handle quick edit mode i.e start editing by typing in the cell rather than conventional double click
          if(s.activeEditor.value != val){
            s.activeEditor.value = val;
          }
          s.activeEditor.readOnly = true;
        });
        
  
      });
  

  https://stackblitz.com/edit/angular-nuixl3?file=app%2Fapp.component.ts