FlexGrid Async AutoComple CustomEditor selectedItem propigation

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

  • 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.

  • Replied 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
  • Replied 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.
  • Replied 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
  • Replied 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
Need extra support?

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

Learn More

Forum Channels