How to update bound data in FlexGrid on the client using JavaScript

When modifying data bound to a FlexGrid using JavaScript, changes made directly to the underlying data object may not be immediately reflected in the grid's UI. This occurs because the grid is not automatically notified of external property changes, often requiring a manual user interaction or a separate event to force a visual refresh.

Solution
To ensure that programmatic updates are correctly synchronized and reflected in the grid, you should use the CollectionView's editing API. Instead of assigning values directly to the data item, you should wrap the update logic between the editItem and commitEdit methods.

First, identify the item you wish to modify—such as the currentItem—and pass it to the editItem method to put it into an edit state. Then, apply your changes to the properties (e.g., FirstName or LastName). Finally, calling commitEdit notifies the CollectionView that the data has changed, which automatically triggers a UI update in the FlexGrid and ensures all event listeners, such as those registered in onClientCurrentChanged, are properly synchronized.

function UpdateData(){
        var grid = wijmo.Control.getControl("#flexGrid");
        var cv = grid.collectionView;

        // make Current Item as Edit Item
        cv.editItem(cv.currentItem);

        // Update data with Binding name
        cv.currentEditItem.FirstName = data.FirstName;
        cv.currentEditItem.LastName = data.LastName;

        //commit made changes to CollectionView
        cv.commitEdit();
    }