FlexGrid Async AutoComple CustomEditor selectedItem propigation

FlexGrid Async AutoComple CustomEditor selectedItem propigation

Posted by: erik.berg on 29 June 2020, 3:41 pm EST

• 

  erik.berg

  • Post Options:
  • Link
    Copy

  Posted 29 June 2020, 3:41 pm EST

  I attempting to use an Async AutoComplete Customer Editor with in a FlexGrid. I have combined the AutoComplete Async Loadinghttps://jsfiddle.net/Wijmo5/teLupgq3/ with the Custom Editors https://jsfiddle.net/Wijmo5/1w9hr82h/ examples into a single examplehttps://jsfiddle.net/erikberg/0udo8vLm/24/.

  Note that the Selected Product is not being updated.

  I want to use the SelectedItem from the AutoComplete Custom Editor to populate other columns, ProductId for example, in a FlexGrid.

  Any help on why the combined demo is not binding and the proper implementation on how to propagate the SelectedItem from a custom editor to other columns.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 June 2020, 8:24 pm EST

  Hello Erik,
  
  We need to make changes in the selectedIndexChanged event for AutoComplete. Please refer to the updated sample and the following code snippet for reference:
  
  https://jsfiddle.net/rwy5Lsth/

   selectedIndexChanged: function(s,e) {
        var product = s.selectedItem;
        var cv=theGrid.collectionView;
        if(cv.currentEditItem && product ){
          	cv.currentEditItem["ProductId"]=product.ProductID;
        }
        document.getElementById('msg').textContent = product ?
          wijmo.format('{ProductName} (ID: {ProductID})', product) :
          'None';
      }
  

  Regards,
  
  Manish Gupta

• 

  erik.berg

  • Post Options:
  • Link
    Copy

  Posted 2 July 2020, 8:14 am EST

  Thanks for the pointer to currentEditItem. I tweaked your working example by adding custom formatItem to the custom editor autocomplete’s combobox in same manner as example product column does. The formatItem breaks the autocomple.displayMemberPath rendering. I would have expected the CustomEditors comboboxes to have the same behaviors independent of how the their itemSource data is obtained. See example at https://jsfiddle.net/xb01z89k/

  The high level design is have an auto complete that searches by name or id and upon selection, sets the item fields to the appropriate values. When attempting to fix the above issue, in the selectedIndexChanged event, the selectedItem is an object. However is the collectionview is set to the selected item

   cv.currentEditItem['NewProperty'] = s.selectedItem
  

  theGrid.Column.cellTemplate events are showing the ‘NewPropery’ as composite string the same as what the combobox is displaying after selection. Adding some debug code to selectedIndexChanged event

   cv.currentEditItem['NewPropertyJson'] = JSON.stringify(s.selectedItem)
  ``` validates that selectedItem was an object in the event but it getting transposed via some other mechanism.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 July 2020, 8:24 pm EST

  Hello Erik,
  
  We are sorry, we are able to get the correct data after assigning the stringified text to the FlexGrid column.
  
  Please refer to the following demo sample and modify it depicting your issue:
  
  https://jsfiddle.net/bhrxoas5/

  Regards,
  
  Manish Gupta

• 

  erik.berg

  • Post Options:
  • Link
    Copy

  Posted 3 July 2020, 9:18 am EST

  Sorry I think we got off track and into the weeds so lets step back. When comparing your working example at https://jsfiddle.net/rwy5Lsth/ and
  
  my non working at https://jsfiddle.net/xb01z89k/:

  1. Why is the displayed and returned value from the customGridEditor different for the ProductName Column between the two examples? “{ProductName}” vs “{ProductName}{ProductId}”. All that was changed was adding a formatItem handler.

  2. In the example at https://jsfiddle.net/xb01z89k/ why are the customGridEditors for Product and ProductName behaving differently in respect to what is being displayed and returned after the selectedIndexChanged event fires. They booth have formatItem handlers.

  thanks

  erik

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2020, 7:31 pm EST

  Hello Erik,

  1. The demo fiddle sample https://jsfiddle.net/rwy5Lsth/
     
     It shows only ProductName since the formatItem is not attached to AutoComplete CustomEditor.
     
     While for demo fiddle: https://jsfiddle.net/xb01z89k/
     
     The formatItem is handled at Line 141.

  2. The different behavior for selectedIndex for ProductName and Product column is because of the different control used.
     
     The Product column uses the ComboBox while the ProductName column uses the AutoComplete control. For ComboBox and AutoComplete control the selectedIndex changed event is different.

  Regards,
  
  Manish Gupta

• 

  erik.berg

  • Post Options:
  • Link
    Copy

  Posted 8 July 2020, 4:05 pm EST

  Is there anyway to use an AutoComplete Custom Grid Editor that is functionality equivalent to the customized Combobox Grid Editor in this given example such that:

  1. The user types in a Key or Value term in the AutoComplete Custom Grid Editor.

  2. The AutoComplete Custom Grid Editor renders a list of Key - Value pairs that matches the text that the user entered in the custom editor. The list is bases on AutoComplete matches against the Key or Value fields.

  3. After the user selects a list item from the AutoComplete Custom Grid Editor, the displayed item in the AutoComplete Custom Grid Editor is only the Key field.

  4. The grid cell that was bound to the AutoComplete Custom Grid Editor displays the user selected Key field or is empty is no user selection or match was made.

  5. When subsequent AutoComplete Custom Grid Editors are rendered, the text and user selections from previous AutoComplete grid editors are not displayed when rendering the initial AutoComplete Custom Grid Editor, .

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 July 2020, 6:45 pm EST

  Hello Erik,
  
  For this, we need to set the headerPath property for AutoComplete control to set the display text and set it to the cell value when the Grid exit from Edit mode.

  
  var theAutoComplete = new CustomGridEditor(theGrid, 'ProductName', wijmo.input.AutoComplete, {
      placeholder: 'Product Name',
      displayMemberPath: 'ProductName',
      isEditable:false,
      headerPath:'ProductID',
      showDropDownButton:true,
  ....
    });
  

  Regarding avoid selection and rendering from the previous selection, we need to clear the Collection for the AutoComplete in the CustomGridEditor._closeEditor method.

  CustomGridEditor.prototype._closeEditor = function(saveEdits) {
  
      if (this._rng) {
       ....
  	if (saveEdits) {
          ....if (!wijmo.isUndefined(ctl['text'])) {
          	var _txt = ctl['text'];
  /*Avoid Text update if no value is selected */
            if(!ctl.isEditable &&  ctl.selectedIndex==-1){
            	_txt="";
            }
            this._grid.setCellData(this._rng.row, this._rng.col, _txt);
          }....
        }
        .....
        if(ctl instanceof wijmo.input.AutoComplete){
          ctl._rxHighlight=undefined;
          ctl.rxSrch =undefined;
          if(ctl.listBox.collectionView)
          	ctl.listBox.collectionView.sourceCollection=[];
        }
      .....
    };
  

  Please refer to the updated sample: https://jsfiddle.net/mkgupta911/qptev5a3/

  Hope it helps!

  Regards,
  
  Manish Gupta