Hello, I want to know how is data source updated after grid is updated with new data.

Here's my app

$.ig.loader({
    scriptPath: './javascript_common/igniteui/corefiles/js/',
    cssPath: './javascript_common/igniteui/corefiles/css/',
    theme: 'metro'
});

$.ig.loader("igGrid.Responsive.Hiding.Paging.Updating", function () {
    $("#grid1").igGrid({
        dataSource: 'http://192.168.1.222/safestyle-windows.co.uk/admin-new/users.php?mode=getUsers',
        responseDataKey: "results",
        primaryKey: 'id',
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        columns: [{
            key: 'id',
            dataType: 'number',
            headerText: 'Id',
        }, {
            key: 'fullname',
            dataType: 'string',
            headerText: 'Full Name'
        }, {
            key: 'fname',
            dataType: 'string',
            headerText: 'First name'
        }, {
            key: 'lname',
            dataType: 'string',
            headerText: 'Last Name'
        }, {
            key: 'username',
            dataType: 'string',
            headerText: 'User Name'
        }, {
            key: 'userLevel',
            dataType: 'string',
            headerText: 'User Level'
        }, {
            key: 'userGroupId',
            dataType: 'string',
            headerText: 'User Group'
        }, {
            key: 'email',
            dataType: 'string',
            headerText: 'Email'
        }, {
            key: 'status',
            dataType: 'bool',
            headerText: 'Status'
        }],
        features: [
        {
                            name: "Paging",
                            type: "remote",
                            pageSize: 2, // Default number of records per page.
                            recordCountKey : 'totalCount', // The property in the response that will hold the total number of records in the data source.
                            pageSizeUrlKey : 'psize', // Denotes the name of the encoded URL parameter that will state what is the currently requested page size.
                            pageSizeList : [1,2,3,4,5,6,7,8,9,10,20,30], // Default: [5, 10, 20, 25, 50, 75, 100]. contents of the page size dropdown indicating what preconfigured page sizes are available to the end user.
                            pageIndexUrlKey : 'page', // Denotes the name of the encoded URL parameter that will state what is the currently requested page index.
                            
        },{
            name: 'Responsive',
            forceResponsiveGridWidth: false,
            columnSettings: [{
                columnKey: 'id',
                classes: "ui-hidden-phone"
            }, {
                columnKey: 'fullname',
                classes: "ui-visible-phone",
                configuration: {
                    phone: {
                        template: "<span>${lname}, ${fname}</span>"
                    }
                }
            }, {
                columnKey: 'fname',
                classes: "ui-hidden-phone"
            }, {
                columnKey: 'lname',
                classes: "ui-hidden-phone"
            }]
        }, {
            name: 'Hiding',
            hiddenColumnIndicatorHeaderWidth: 14,
            columnSettings: [{
                //hide unbound from chooser list and indicator
                columnKey: 'fullname',
                allowHiding: false
            }]
        }, {
            name: "Updating",
            enableAddRow: true,
            showReadonlyEditors: false,
            dataDirty: function (evt, ui) {
                return false;
            },
            rowEditDialogOpening: function (event, ui) {
                if ($(ui.owner.element).igGridResponsive("getCurrentResponsiveMode") != "desktop") {
                    ui.owner.options.rowEditDialogWidth = document.body.clientWidth * 0.9;
                    ui.dialogElement.children('.ui-dialog-content').css('height',ui.owner.grid.element.height() - 115);
                    ui.owner.options.rowEditDialogHeight = ui.owner.grid.element.height();
                }
                var columns = ui.owner.grid.options.columns;
                for (i = 0; i < columns.length; ++i) {
                    //use 0 instead of false to be able to differentiate when restoring state
                    if (columns[i].hidden) columns[i].hidden = 0;
                }
            },
            rowEditDialogOpened: function (event, ui) {
                var columns = ui.owner.grid.options.columns;
                for (i = 0; i < columns.length; ++i) {
                    if (columns[i].hidden === 0) columns[i].hidden = true;
                }
            },
            editMode: "rowedittemplate",
            columnSettings: [{
                columnKey: 'fullname',
                readOnly: true
            }, {
                columnKey: 'id',
                readOnly: true
            }, {
                columnKey: "email",
                validatorOptions: {
                    required: true,
                    errorMessage: "Enter a valid email.",
                    bodyAsParent: false
                }
            }]
        }]
    });
});
var grid = $('#grid1');
        grid.bind("iggridupdatingrowdeleting", function (e, args) {
        var result = confirm("Sure to delete ?");
        if (result==true) {
        $.ajax({
          type: "POST",
          url: "users.php?mode=deleteUser",
          data: { id: args.rowID }
        }).done(function( msg ) {
          // alert( "Deleted: " + args.rowID );
        });
        }else{
        return false;
        }
        });