Editable column in Flexgrid treeview - 2

Editable column in Flexgrid treeview - 2

Posted by: sameer-boddun on 14 September 2017, 12:13 pm EST

• 

  sameer-boddun

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:13 pm EST

  Hello

  this is the continuation of work that I mentioned in the this thread

  now that I have a drop-down in the column I notice that every time the grid loads/reloads/refreshes it triggers event ‘selectedIndexChanged’. As I mentioned I update the one of the column on the same row once the value from the drop-down is selected.

  When I update value, I do it in eventHandler of the dropdown. The updated value is not displayed util I call grid.invalidate(). this call triggers the grid refresh and thus infinite loop of events ‘selectedIndexChanged’. another issue when grid refreshed is that the drop-down loosed the selected value

  this is code that I have in my event handlder

  selectionChanged(methodCb: WjComboBox, event: wjCore.EventArgs) {
      const currentSelection: myObject = this.flex.selectedItems[0];
      if (methodCb) {
          switch (methodCb.selectedItem.id) {
              case 'CB':
                  currentSelection.prop1 = currentSelection.Prop1;
                  this.flex.invalidate();
                  break;
              case 'WSCPI':
                  alert('yet to be implemented');
                  methodCb.selectedValue = 'NA';
                  break;
              case 'SOFA':
                  currentSelection.prop1 = currentSelection.Prop3 + currentSelection.Prop3;
                  this.flex.invalidate();
                  break;
              case 'BR':
                  alert('yet to be implemented');
                  methodCb.selectedValue = 'NA';
                  break;
              case 'TEAC':
                  alert('yet to be implemented');
                  methodCb.selectedValue = 'NA';
                  break;
              case 'TCPI':
                  alert('yet to be implemented');
                  methodCb.selectedValue = 'NA';
                  break;
              case 'MEAC':
                  alert('yet to be implemented');
                  methodCb.selectedValue = 'NA';
                  break;
              default:
                  break;
          }
      }
  }

  there are few options that I tried to solve this issue

  1. I tried to change the value in cell directly using grid.setCellData() . it didn’t display the updated value
  2. Using dataMap on the column also didn’t work as the dropdown was never displayed. I made the column [isReadOnly]=“false” to make it appear but it didn’t work.

  how do I get the updated value displayed and keep the selected value in dropdown selected.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:13 pm EST

  Hello,
  
  We are investigating on this.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:13 pm EST

  Hello Sameer,
  
  You need to make some changes in your HTML code. You have to set selectedValue property to cell.item.name .
  
  Please refer to the attached sample for the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/08/FlexGrid_treeView_ComboBox.zip

• 

  sameer-boddun

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:13 pm EST

  Thanks Manish,

  The code attached doesn’t address the problem that I am facing. To demonstrate my problem I have made changes to this code and attached.

  There are following changes

  1. There is no button on the page, so it does not trigger change within grid.
  2. Added one more column in the tree called ‘type’
  3. added event listener for ‘selectedIndexChanged’. and within this event handler the value of the ‘type’ cell is changed. unless we call this.flex.invalidate() the value will never get updated in the cell. when we add this refress() call this event handler trigger infinite chain of the same event.
     
     this happens since every time grid is refreshed/loaded/reloaded event ‘selectedIndexChanged’ is triggered. you can see check the console to see the never ending messages.

  Is this issue is present if we implement the same with dataMap instead of adding a drop-down? if it does can show me an example (since I am not able to add it using dataMap)

  thanks
  
  Sameer.
  
  2017/08/FlexGrid_treeView_ComboBox-1.zip

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:13 pm EST

  Hello Sameer,
  
  Thank you for the sample. We were able to replicate the issue at our end. On testing with the latest nightly build, it works fine at my end. Please refer to the attached sample for the same with the latest nightly build.

  This fix will be included in the next release build.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/08/FlexGrid_treeView_ComboBox_edit.zip

• 

  sameer-boddun

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:13 pm EST

  Thanks a lot manish, I worked flawlessly

  I have license for version 5.20172.334, how do I update to version 5.20172.346?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:13 pm EST

  Hi Sameer,
  
  For this, you have to wait for the next maintenance release. Once the next maintenance build released, you can download it from your account.

  Most likely, the build will be released in the mid-September.

  Thanks,
  
  Manish Kumar Gupta

• 

  sameer.boddun

  • Post Options:
  • Link
    Copy

  Posted 10 October 2017, 4:50 am EST

  This issue is resolved with the latest build I however have another issue where when grid has more than screen full of records and when we scroll over the records, comboboxes within the grid creates event ‘selectedIndexChanged’ for all comboboxes that reappear in the screen as result of scrolling.

  Issue I am facing is that, I am displaying some popups when user selects new value from drop down. so when I scroll popups starts appearing without any user action. Also it triggers some processing which otherwise should only happen when user select the option in combo-box.

  Please run the attached sample which exhibits the same behaviour.FlexGrid_treeView_ComboBox.zip

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 3:12 am EST

  Hi Sameer,
  
  We apologize for the late reply.

  We tried your sample and observe as follows:
  
  slectedIndexChanged 722 times on FlexGrid initialization.
  
  Once all the selectedIndex gets changed, on scrolling no selected index changed event get triggered.

  On initializing FlexGrid, selectedIndex gets triggered because the ComboBox’s value set to the cell value.

  You can prevent this by handling mousedown event for the ComboBox. And set flag variable to check if control is clicked or not.

  Please refer to the following code:

  <div *ngIf="!cell.row.hasChildren">
                         <wj-combo-box #cb
                             [itemsSource]="child"                            
                             [displayMemberPath]="'names'" 
                             [selectedValuePath]="'names'" 
                             [(ngModel)]="cell.item.name"                        
                             [isEditable]="false"
                             
                             (selectedIndexChanged)="ddChanged(cb, $event)" >
                         </wj-combo-box>
                 </div>
  

  TS

  private _isClick= false;
      mouseDown(){
          this._isClick=true;
      }
      ddChanged(cb, event) {
         if(this._isClick){
             this._isClick=false;
             console.log('SelectedIndexChange event triggered- from inside ddChanged');
             const selectedItem: any = this.flex.selectedItems[0];
             const currentRow: any = this.flex.selectedRows[0];
             selectedItem.type = 'some calcualed value'; 
             this.flex.invalidate();
         }
      }
  

  Hope it helps!

  ~Manish