Devextreme data-grid event handling with angularjs

Question

I have following data-grid Definition:

<div ng-controller="testCtrl">
    <div dx-data-grid="{ bindingOptions: { dataSource: 'model' },
        paging: {
            enabled: false
        },
        editing: {
            editMode: 'row',
            editEnabled: true,
            removeEnabled: true,
            insertEnabled: true
        },
        columns: [{
            dataField: 'Name',
            },
            {
            dataField: 'DateOfBirth',
            dataType: 'date'
            },
            {
            dataField: 'Note'
        }],
        onEditingStart: 
            function(e) {
                alert('EditingStart');
        },
        onRowInserted: 
            function(e) {
                alert('RowInserted');
        }
    }"></div>
</div>

But I get a syntax error. How do I handle events with the angular approach? I haven't found any code samples at the devextreme site.

Answer 1

You should not use the event handler directly in the markup. Put it to the controller:

$scope.editingStart = function(e){
    alert("onEditingStart is fired");
}

Then, update the view:

<div dx-data-grid="{
    <!-- data grid options... -->
    onEditingStart: editingStart }
 "></div>

I've created the sample here - http://jsbin.com/nijuvewure/edit?html,output