Wijmo Combobox selectedItemChange Event in Flexgrid Angular 2

Wijmo Combobox selectedItemChange Event in Flexgrid Angular 2

Posted by: selvakumar.periyasamy on 27 October 2017, 12:37 am EST

• 

  selvakumar.periyasamy

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 October 2017, 12:37 am EST

  Hi ,

  I’m using angular 2 wijmo combobox inside a flex grid cell template. When I change the combobox selection I want to update the item property with the selected value , so I have written a selectedItemChange event handler and changing the item property of the cell item as follows

  <template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-cell=“cell”>
  
  <wj-combo-box #dp [itemsSource]=“(cell.item?.marketStatusCode == ‘MART_DECLINATION’)?declineReasonRefData:notTakenReasonRefData”
  
  [isRequired]=“false”
  
  [selectedValue]=“cell.item.declnNTUReasonCode” [isEditable]=“false”
  
  [displayMemberPath]=“‘codeNm’” (selectedItemChange)=“onGridDropDownChange($event,cell.item,‘clientSubjectivityIn’)”
  
  [selectedValuePath]=“‘codeKey’” style=“width: 80%”
  
  [isDisabled]=“(cell.item?.marketStatusCode != ‘MART_DECLINATION’ && cell.item?.clientStatusCode != ‘MART_CLIENT_STATUS_NOT_TAKEN_UP’)” >
  
  

  onGridDropDownChange(event, item, property: string ): void {
  
  if (event != null) {
  
  console.log(event);
  
  if(item[property] != event.codeKey)
  
  {
  
  this.data.editItem(item);
  
  item[property] = event.codeKey;
  
  this.data.commitEdit();
  
  console.log(event);
  
  }

  }
  

  But when i do like this, whenever i scroll the grid the selected combobox values are changing wierdly please help me to fix this issue

• 

  selvakumar.periyasamy

  • Post Options:
  • Link
    Copy

  Posted 27 October 2017, 12:38 am EST
• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 October 2017, 3:38 pm EST

  Hi,
  
  There is no selectedItemChange event for wjComboBox. In this case, you need to handle lostFocus event for ComboBox. Please refer to the code snippet:

  <wj-flex-grid #flex [itemsSource]="data" style="height: 500px;" (scrollPositionChanged)="ch(flex)">
      <wj-flex-grid-column [binding]="'id'">
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
              <wj-combo-box #cb
                            [itemsSource]="countries" 
                            [isRequired]="false"
                            [selectedValue]="cell.item.id"
                            [displayMemberPath]="'country'"
                            [selectedValuePath]="'id'"                          
                            (lostFocus)="onFocusLost(cb,$event,cell.item)"></wj-combo-box>
          </ng-template>
      </wj-flex-grid-column>
  </wj-flex-grid>
  

  onFocusLost(s,e,item){  
        
        this.data.editItem(item);
        item[s.selectedValuePath]=s.selectedValue;
        this.data.commitEdit();      
     }
  }
  

  ~Manish

• 

  david.nelson

  • Post Options:
  • Link
    Copy

  Posted 20 February 2018, 11:34 am EST

  Was there a bug recently introduced for the wj-auto-complete in Wijmo. We recently updated to wijmo@5.20173.405 and are using Angular 4.1.3

  We have lots of combo boxes that look like:

    
  <wj-auto-complete class="form-control p-0" [placeholder]="'Add new variable'"
                                                [itemsSource]='sensorsItemSource'
                                                [(ngModel)]='selectedNewSensor'
                                                [wjModelProperty]="'selectedValue'"
                                                [displayMemberPath]="'name'"
                                                [isEditable]='false'
                                                [isRequired]="false"
                                                [maxItems]="1000"
                                                [isDisabled]="canAddNewSensors">
    </wj-auto-complete>
  

  where selectedNewSensor is a property get/set routines

   private _selectedNewSensor: VmBlockMap = null;
      private get selectedNewSensor(): VmBlockMap {
          return this._selectedNewSensor
      }
  
      private set selectedNewSensor(newValue: VmBlockMap) {
          if (newValue === null) return;
  
          this._selectedNewSensor = newValue;
          console.log(this.loadCompleted + ' hi');
          if (!this.loadCompleted) return;   //only propogate after the load is completed
  
          if (newValue) {
              this.addChartSeriesItem(newValue.name);
              this.requestAllData(-1);
              if (!this.isInModal) {
                  let optionalRouteParameters = new OptionalRouteParameters(this.startTime, this.endTime, this.singleYaxis);
                  let ii: number = 1;
                  this.chartSeriesItems.forEach(chartItem => {
                      //  Reflect.set(optionalRouteParameters, 'sensor' + ii, chartItem.tag.replace('.', '~'));
                      Reflect.set(optionalRouteParameters, 'sensor' + ii, chartItem.tag);
                      ii = ii + 1;
                  });
  
                  this.vmGlobal.navigator.routeNewSensor('tsChart', this.route.outlet, optionalRouteParameters.getParamObject());
              }
          }
      }
  
  

  after the upgrade, the set routine is never called.

  David

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 February 2018, 11:18 pm EST

  Hi David,
  
  We are sorry, we are unable to replicate the issue at our end with build 5.20173.409(latest). Please refer to the attached sample for the same.

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 February 2018, 11:18 pm EST

  ComboBox_ngModel_getter_setterProperties.zip

• 

  david.nelson

  • Post Options:
  • Link
    Copy

  Posted 21 February 2018, 3:44 am EST

  Thanks for the sample Manish. Looks just like our code.

  We are upgrading to 5.20173.409 and seeing if that fixes.

  I also note you are on Angular 5.2 and we are on 4.1.3. Perhaps thats the issue?

  David

• 

  david.nelson

  • Post Options:
  • Link
    Copy

  Posted 26 February 2018, 5:22 am EST

  Manish,

  I finally figured this issue out and I think there has been a bug introduced in a recent version of wijmo (because it did break our code)

  The issue is this:

  [(ngModel)]=‘selectedNewSensor’

  selectedNewSensor MUST have an initial value. If its NULL, the set routine is NEVER called.

  Your example has the same issue In the ts file just change

  public _selectedNewSensor = ‘’;
  
  to
  
  public _selectedNewSensor ;

  I don’t think this is really ok behiour. We shoould be allowed to have no value to start.

  Thanls

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2018, 3:54 pm EST

  Hi David,
  
  We are sorry for the inconvenience. Thank you for further investigation. We are able to replicate the issue and it seems a bug.
  
  We have forwarded to the concerned team for further investigation with tracking id 310847.

  We will let you know as we get any update on this.

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 March 2018, 5:29 pm EST

  Hi David,
  
  This issue is related to the following issue in Angular:
  
  https://github.com/angular/angular/issues/14988

  It can’t be resolved in Wijmo, so the workaround is to have a default set to “”.

  ~Manish