How to prompt user that edits have been made upon

Question

I have run into an issue with the kendo-ui grid that I can't solve. In my application I am using kendo-grid in batch edit mode to allow a data entry person to quickly make edits to several records on a screen. This particular grid is set to allow paging and sorting.

I am looking for a way to prompt the user upon attempting a sort or clicking on one of the paging links while there have been edits made on the particular page (as in page of the datagrid/datasource). If the user clicks OK, then I want to continue onto the next page of data, otherwise I would like to cancel the edit and keep the user on the current page with the existing edits. My other option would simply be to automatically commit any changes upon paging or sorting or allow them to cancel and stay on the current page.

My attempts thus far have been to use the change event on the actual grid datasource to store a dirty flag into an observable and then try to catch the actual sorting or paging change by listening to the dataBinding event of the grid and display the prompt when my isDirty flag is true and the e.action of the dataBinding event == "rebind".

The problem that I am having with this approach is that the dataBinding event fires after the grid dataSource has already performed a fetch of another page and not prior. This prevents me from both saving any edits or even maintaining existing edits.

I can't find any event that I can subscribe to that will allow me to do inspections prior to a page fetch/sort. Has anyone else come up with a way to handle this scenario? It seems to me that it would be a pretty common thing that people would want to handle in data entry applications.

Answer 1

I solved my problem by subscribing to the requestStart event of the dataSource. So now my Kendo Datasource looks like this:

{
    pageSize: 15,
    batch: false,
    schema: {
        model: {
            id: "LocalId",
            fields: {
                LocalId:
                {
                    editable: false,
                    nullable: true
                },
                Ssn: {
                    validation: {
                       required: true
                    }
                },
                QtrEarnings: {
                    type: "number",
                    defaultValue: 0,
                    validation: { required: true, min: 0 }
                }
            }
        }
    },
    change: function (e) {
        onDataChange(e);
    },
    requestStart: function (e) {
        if (homeModel.get("dataSource").hasChanges()) {
            if (confirm("You have made edits to data! Click Cancel to stay on this page or click Ok to abandon your changes and continue.") == false) {

                e.preventDefault();
            }
        }
    }
}